Simple Android Quiz App
This App is targeted at beginner android developers. It just explains the simple logic behind building a quiz app. With this simple knowledge, you can expand to other areas of Android programming as there need be. Enough talk and let's get started already.
Java is the programming language used for the example codes in this article. Please note, this article was not written to teach layout designing so we might not be touching much about designs, and please, pardon my horrible layout design, it is the best I could come up with.
I will assume that you know how to create an empty project in Android Studio and if not, click here to learn how.
Once your project is all set up, we need to design our quiz layout. Once again, pardon me if this layout is not up to your design taste.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"> <!-- change .MainActivity to whatever you might have named your activity -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/lightGreen"
android:minHeight="?actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp">
<TextView
android:id="@+id/quizMode"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/questionTextView"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@color/whiteText"
android:fontFamily="@font/shablagooital"
android:textSize="25sp" />
<TextView
android:id="@+id/questionTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/questionNumberText"
android:gravity="center"
android:paddingLeft="10dp"
android:textColor="@color/whiteText"
android:text="Que."
android:textSize="20sp" />
<TextView
android:id="@+id/questionNumberText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:paddingRight="10dp"
android:text="1"
android:textColor="@color/whiteText"
android:textSize="20sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="10dp"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/whiteText"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_margin="20dp"
android:gravity="center"
android:text="Question"
android:textColor="@color/grey"
android:textSize="18sp" />
<Button
android:id="@+id/option1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Option 1"
android:textColor="@color/whiteText"
android:background="@drawable/round_button_layout"/>
<Button
android:id="@+id/option2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Option 2"
android:layout_weight="1"
android:textColor="@color/whiteText"
android:background="@drawable/round_button_layout" />
<Button
android:id="@+id/option3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Option 3"
android:layout_weight="1"
android:textColor="@color/whiteText"
android:background="@drawable/round_button_layout"/>
<Button
android:id="@+id/option4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Option 4"
android:layout_weight="1"
android:textColor="@color/whiteText"
android:background="@drawable/round_button_layout"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="10dp"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/answer_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Correct"
android:textAlignment="center"
android:fontFamily="@font/shablagooital"
android:textColor="@color/lightGreen"
android:textSize="40sp"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/previous_question_button"
android:text="Previous Question"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/next_question_button"
android:text="next Question"/>
</LinearLayout>
</LinearLayout>Now we need to be able to style our buttons to change based on whether it has been selected or not. For this, we need to create two XML files inside the drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke
android:color="#01D4E6"
android:width="2dp"
/>
<corners
android:bottomLeftRadius="20sp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<solid
android:color="@color/green" />
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
</layer-list>Save the code above in the drawable folder as round_button_layout.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke
android:color="#01D4E6"
android:width="2dp"
/>
<corners
android:bottomLeftRadius="20sp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<solid
android:color="@color/whiteText" />
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
</layer-list>Save the code above as button_selected in the drawable folder. You might notice some red lines in the code and that is because we are using some color names that we haven't declared in the colors.xml file yet. Copy the code below and add it to the existing color.xml file
<color name="whiteText">#FFFFFF</color>
<color name="grey">#757171</color>
<color name="backgroundColor">#3E454F</color>
<color name="lightGreen">#8BC34A</color>
<color name="green">#008000</color>
<color name="red">#FF0000</color>
<color name="transparent">#88000000</color>With these changes, our layout is 90 percent done. we need to go to out Activity file to write some Java Code.
To follow some standard practice let us create a model for our questions. create a new class and name it Question. You can name it anything you like but make sure you are able to follow along by making appropriate changes in other parts of the code samples that will be provided in this article. Copy the code snippet below and paste it in the Question.java file
public class Question {
private String question;
private String option1;
private String option2;
private String option3;
private String option4;
private String correctAnswer;
private String userAnswer;
public Question(){
super();
}
public Question(String question, String option1, String option2, String option3, String option4, String correctAnswer, String userAnswer) {
this.question = question;
this.option1 = option1;
this.option2 = option2;
this.option3 = option3;
this.option4 = option4;
this.correctAnswer = correctAnswer;
this.userAnswer = userAnswer;
}
public String getQuestion() {
return question;
}
public String getOption1() {
return option1;
}
public String getOption2() {
return option2;
}
public String getOption3() {
return option3;
}
public String getOption4() {
return option4;
}
public String getCorrectAnswer() {
return correctAnswer;
}
public String getUserAnswer() {
return userAnswer;
}
public void setUserAnswer(String userAnswer) {
this.userAnswer = userAnswer;
}
}The code snippet above should be pretty straightforward, we declare fields that our question will have and set them as private so that users can't tamper with a question. We only create getters for the fields because we don't want users to be able to set the questions to what they like. The only field that has a setter is the userAnswer field for a reason you can easily guess (We need to be able to set user answers to a question).
This post is already getting too long so I will stop here for now and continue it in another part. Thank you for coming this far. If you feel like I am missing something or I am not doing something right, please feel free to reach out to me on Twitter or Instagram. If you like this article you can give it a clap and share it so that others can benefit. See you in the next part
