Objectives
• To create a response mobile application using various layouts, xml files as well as java files.
Theory
Quiz Application is used to asking to different question. It allows users to create a question. As the title
suggest, there are various layouts, xml files, java files and activities that are used to build this responsive
application. All of them are described below with the help of screenshots.
Relative Layout: Relative Layout is a view group that displays child views in relative positions. The
position of each view can be specified as relative to sibling elements (such as to the left-of or below
another view) or in positions relative to the parent Relative Layout area (such as aligned to the bottom,
left or center).
Linear Layout: Linear Layout is a view Group that aligns all children in a single direction, vertically or
horizontally.
Constraint Layout: Constraint Layout is an advanced version of a relative layout. It is used to reduce the
child view hierarchies and improve the performance. It is used to define a layout by assigning constraints
for every child view/widget relative to other views present. Android Widget used:
Text View:
It is a user interface element that displays text to the user.
Following are some attributes used with TextView:
android:text : Text to display.
android:textAlignment : Apperance of the text.
android:size : Size of the text.
android:textStyle : Style(normal,bold,italic,bold|italic) for the text.
android:textColor : Text color
Recycler View:
RecyclerView is a ViewGroup added to the android studio as a successor of the GridView and ListView.
Image View: ImageView class is used to display any kind of image resource in the android application.
Following are some attributes used with ImageView:
android:id: A Unique id to identify any widget
android:layout_width: It defines the width of the layout
android:layout_height: It sets the layout's height
app:srcCompat: File path of the inserted image
android:scaleType: To fix the image's size by resizing it or moving it
android:padding: To add padding to an image from left, right, top, or bottom
Edit Text: EditText is a Widget of user interface (UI) used to retrieve and modify text data from a user in
an Android app.
Button
It is a user interface element that user can tap or click to perform an action.
Activity_developer
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Developer"
android:id="@+id/textView2"
android:layout_marginTop="33dp"
android:textSize="40dp"
android:layout_alignParentTop="true"
android:textColor="#000000"
android:textAlignment="center"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="false"
android:autoText="true"
android:layout_alignParentRight="false" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Back"
android:id="@+id/button4"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="31dp"
android:background="#01579B"
android:textColor="#ffffff" />
<ImageView
android:id="@+id/imageView"
android:layout_width="80dp"
android:layout_height="84dp"
android:layout_below="@+id/textView2"
android:layout_alignEnd="@+id/button4"
android:layout_alignRight="@+id/button4"
android:layout_marginTop="14dp"
android:layout_marginEnd="278dp"
android:layout_marginRight="278dp"
android:src="@drawable/logo" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageView"
android:layout_marginTop="99dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:text="Rekha Shrestha"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView5"
android:layout_alignEnd="@+id/textView5"
android:layout_alignRight="@+id/textView5"
android:layout_marginTop="13dp"
android:layout_marginEnd="-87dp"
android:layout_marginRight="-87dp"
android:text="[email protected]"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Above figures includes relative layout, text view, edit text, button which basically shows the UI of the
application.
The layout used here is Relative layout. Relative layout is a view group that displays child view in relative
positions. The position of each view can be specified as relative to sibling elements (such as to the left-of
or below another view) or in positions relative to the parent relative layout area (such as aligned to the
bottom, left or center).
Text View displays text to the user and optionally allows them to edit it. It is a complete text editor
however the basic class is configured to not allow editing and Button is a user interface element that
user can tap or click to perform an action. EditText is a Widget of user interface used to retrieve and
modify text data from a user in an Android app.
DeveloperActivity
package com.example.rekhaquiz;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
public class DeveloperActivity extends AppCompatActivity {
Button btnRestart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_developer);
btnRestart = (Button) findViewById(R.id.button4);
btnRestart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent in2 = new Intent(getApplicationContext(),MainActivity.class);
startActivity(in2);
});
In above java file, setContentView() function is used to attach a layout file to that activity i.e.
login_activity.xml. It is an Activity method only. Every activity has a single layout file attached to it. It
makes button clickable.
Activity_main. Xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00BCD4"
>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/editName"
android:layout_alignLeft="@+id/editName"
android:layout_alignParentTop="true"
android:layout_marginTop="48dp"
android:text="@string/quizapp"
android:textColor="#F44336"
android:textSize="60dp" />
<Button
android:id="@+id/button"
android:layout_width="200dp"
android:layout_height="52dp"
android:layout_above="@+id/button2"
android:layout_alignStart="@+id/editName"
android:layout_alignLeft="@+id/editName"
android:layout_marginBottom="25dp"
android:background="#29FF22"
android:text="Start"
android:textColor="#ffffff"
android:textSize="30dp" />
<EditText
android:id="@+id/editName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Enter your name"
android:inputType="textPersonName"
android:textColor="#df040b" />
<Button
android:id="@+id/button2"
android:layout_width="200dp"
android:layout_height="52dp"
android:layout_alignStart="@+id/button"
android:layout_alignLeft="@+id/button"
android:layout_alignParentBottom="true"
android:layout_marginBottom="33dp"
android:background="#01579B"
android:text="About"
android:textColor="#ffffff"
android:textSize="30dp" />
</RelativeLayout>
Above figures includes relative layout, text view, edit text, button which basically shows the UI of the
application. In this xml files we can enter the person name and display them.
MainActivity.java
package com.example.rekhaquiz;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button startbutton=(Button)findViewById(R.id.button);
Button aboutbutton=(Button)findViewById(R.id.button2);
final EditText nametext=(EditText)findViewById(R.id.editName);
startbutton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String name=nametext.getText().toString();
Intent intent=new Intent(getApplicationContext(),QuestionsActivity.class);
intent.putExtra("myname",name);
startActivity(intent);
});
aboutbutton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(getApplicationContext(),DeveloperActivity.class);
startActivity(intent);
});
}
In above java file, setContentView() function is used to attach a layout file to that activity i.e.
signup_activity.xml. It is an Activity method only. Every activity has a single layout file attached to it. It
makes button clickable
Activity_Questions.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/DispName"
android:textColor="@color/accent_material_light"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/DispName"
android:layout_alignStart="@+id/DispName"
android:id="@+id/answersgrp"
android:clickable="true"
android:layout_centerVertical="true">
<!--android:layout-->
<!--android:checkedButton="@+id/radioButton"-->
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:id="@+id/radioButton"
android:checked="false"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:id="@+id/radioButton2"
android:checked="false" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:id="@+id/radioButton3"
android:checked="false" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D"
android:id="@+id/radioButton4"
android:checked="false" />
</RadioGroup>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Next Question"
android:id="@+id/button3"
android:layout_marginTop="27dp"
android:layout_below="@+id/answersgrp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#FF5722"
android:textColor="#ffffff"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Quit"
android:id="@+id/buttonquit"
android:layout_marginTop="20dp"
android:layout_below="@+id/button3"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#01579B"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Questions"
android:id="@+id/tvque"
android:layout_marginBottom="52dp"
android:layout_above="@+id/answersgrp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:textAppearance="@color/abc_background_cache_hint_selector_material_dark"
android:text="Your Score"
android:id="@+id/textView3"
android:textColor="#000000"
android:textSize="19dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:textAppearance="@color/abc_background_cache_hint_selector_material_dark"
android:id="@+id/textView4"
android:text="0"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:textAlignment="center"
android:layout_alignParentRight="true"
android:textSize="19dp" />
</RelativeLayout>
The layout used here is relative layout. It is used to define a layout by assigning constraints for every
child view/widget relative to other views present. Text View displays text to the user and optionally
allows them to edit it. It is a complete text editor however the basic class is configured to not allow
editing. Textview is a Widget of user interface used to retrieve and modify text data from a user in an
Android app. Image View class is used to display any kind of image resource in the android application.
QuestionActivity.java
package com.example.rekhaquiz;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class QuestionsActivity extends AppCompatActivity {
TextView tv;
Button submitbutton, quitbutton;
RadioGroup radio_g;
RadioButton rb1,rb2,rb3,rb4;
String questions[] = {
"Which district has begun with producing tea?",
"When did the 14 zones and 75 districts are divided occur in nepal?",
"What is the small district of nepal after the local level divivsion?",
"Who is the first miss nepal of Nepal?",
"What does 'love waves' relate to?",
};
String answers[] = {"Illam","BS 2018 Baisakh 1","Bhaktapur","Ruby Rana","Earthquake"};
String opt[] = {
"Khotang","Dharan","Illam","Dang",
"BS 2015 Baisakh 10","BS 2018 Baisakh 1","BS 2017 Ashad 5","BS 2001 Chaitra 8",
"Bhaktapur","Lalitpur","Dhading","Kathmandu",
"Ruby Rana","Sumi Khadka","Asmi Shrestha","Shrinkhala Khatiwada",
"Tsunami","Landslide","Flood","Earthquake",
};
int flag=0;
public static int marks=0,correct=0,wrong=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_questions);
final TextView score = (TextView)findViewById(R.id.textView4);
TextView textView=(TextView)findViewById(R.id.DispName);
Intent intent = getIntent();
String name= intent.getStringExtra("myname");
if (name.trim().equals(""))
textView.setText("Hello User");
else
textView.setText("Hello " + name);
submitbutton=(Button)findViewById(R.id.button3);
quitbutton=(Button)findViewById(R.id.buttonquit);
tv=(TextView) findViewById(R.id.tvque);
radio_g=(RadioGroup)findViewById(R.id.answersgrp);
rb1=(RadioButton)findViewById(R.id.radioButton);
rb2=(RadioButton)findViewById(R.id.radioButton2);
rb3=(RadioButton)findViewById(R.id.radioButton3);
rb4=(RadioButton)findViewById(R.id.radioButton4);
tv.setText(questions[flag]);
rb1.setText(opt[0]);
rb2.setText(opt[1]);
rb3.setText(opt[2]);
rb4.setText(opt[3]);
submitbutton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//int color = mBackgroundColor.getColor();
//mLayout.setBackgroundColor(color);
if(radio_g.getCheckedRadioButtonId()==-1)
{
Toast.makeText(getApplicationContext(), "Please select one choice",
Toast.LENGTH_SHORT).show();
return;
RadioButton uans = (RadioButton) findViewById(radio_g.getCheckedRadioButtonId());
String ansText = uans.getText().toString();
// Toast.makeText(getApplicationContext(), ansText, Toast.LENGTH_SHORT).show();
if(ansText.equals(answers[flag])) {
correct++;
Toast.makeText(getApplicationContext(), "Correct", Toast.LENGTH_SHORT).show();
else {
wrong++;
Toast.makeText(getApplicationContext(), "Wrong", Toast.LENGTH_SHORT).show();
flag++;
if (score != null)
score.setText(""+correct);
if(flag<questions.length)
tv.setText(questions[flag]);
rb1.setText(opt[flag*4]);
rb2.setText(opt[flag*4 +1]);
rb3.setText(opt[flag*4 +2]);
rb4.setText(opt[flag*4 +3]);
else
marks=correct;
Intent in = new Intent(getApplicationContext(),ResultActivity.class);
startActivity(in);
radio_g.clearCheck();
});
quitbutton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(getApplicationContext(),ResultActivity.class);
startActivity(intent);
});
}
In above java file, setContentView() function is used to attach a layout file to that activity i.e.
main_activity.xml. It is an Activity method only. Every activity has a single layout file attached to it. It
makes button clickable .In this file we can added the different question here with their answer.
Activity_Result.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="28dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="@+id/tvres"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:background="#F44336"
android:textColor="#000000"
android:textAlignment="center"
android:textSize="19dp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Restart"
android:id="@+id/btnRestart"
android:layout_alignParentBottom="true"
android:layout_marginBottom="119dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#01579B"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="28dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="@+id/tvres2"
android:background="#76FF03"
android:layout_below="@+id/tvres"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="31dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#000000"
android:textAlignment="center"
android:textSize="19dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="28dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="@+id/tvres3"
android:background="#FFEB3B"
android:layout_below="@+id/tvres2"
android:layout_marginTop="33dp"
android:layout_alignRight="@+id/tvres2"
android:layout_alignEnd="@+id/tvres2"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:textColor="#000000"
android:textAlignment="center"
android:textSize="19dp" />
</RelativeLayout>
The layout used here is Relative layout. Relative layout is a view group that displays child view in relative
positions. The position of each view can be specified as relative to sibling elements (such as to the left-of
or below another view) or in positions relative to the parent relative layout area (such as aligned to the
bottom, left or center). Text View displays text to the user and optionally allows them to edit it. It is a
complete text editor however the basic class is configured to not allow editing and Button is a user
interface element that user can tap or click to perform an action. Textview is a Widget of user interface
used to retrieve and modify text data from a user in an Android app.
ResultActivity.java
package com.example.rekhaquiz;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class ResultActivity extends AppCompatActivity {
TextView tv, tv2, tv3;
Button btnRestart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_result);
tv = (TextView)findViewById(R.id.tvres);
tv2 = (TextView)findViewById(R.id.tvres2);
tv3 = (TextView)findViewById(R.id.tvres3);
btnRestart = (Button) findViewById(R.id.btnRestart);
StringBuffer sb = new StringBuffer();
sb.append("Correct answers: " + QuestionsActivity.correct + "\n");
StringBuffer sb2 = new StringBuffer();
sb2.append("Wrong Answers: " + QuestionsActivity.wrong + "\n");
StringBuffer sb3 = new StringBuffer();
sb3.append("Final Score: " + QuestionsActivity.correct + "\n");
tv.setText(sb);
tv2.setText(sb2);
tv3.setText(sb3);
QuestionsActivity.correct=0;
QuestionsActivity.wrong=0;
btnRestart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent in = new Intent(getApplicationContext(),MainActivity.class);
startActivity(in);
});
Aboves this figures here is java files give actually result .
BackgroundColor.java
package com.example.rekhaquiz;
import android.graphics.Color;
import java.util.Random;
public class BackgroundColor {
private String[] mColors = {
"#39add1", // light blue
"#3079ab", // dark blue
"#c25975", // mauve
"#e15258", // red
"#f9845b", // orange
"#838cc7", // lavender
"#7d669e", // purple
"#53bbb4", // aqua
"#51b46d", // green
"#e0ab18", // mustard
"#637a91", // dark gray
"#f092b0", // pink
"#b7c0c7" // light gray}
};
public int getColor(){
//Randomly generate a color
String color;
Random randomGenerator = new Random();
int randomNumber = randomGenerator.nextInt(mColors.length);
color = mColors[randomNumber];
int colorAsInt;
colorAsInt = Color.parseColor(color);
return colorAsInt;
In this figures there is java files in your app we can added the different background color .
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.RekhaQuiz"
tools:targetApi="31">
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name=".QuestionsActivity"/>
<activity android:name=".DeveloperActivity"/>
<activity android:name=".ResultActivity"/>
</application>
</manifest>
The AndroidManifest.xml file contains information of your package, including components of the
application such as activities, services, broadcast receivers, content providers etc.
Drawable
It is used to use an image resource, add your file to the res/drawable/directory of the project
output
