How to Create a Quiz App In Android?

Android is an operating system which is built basically for Mobile phones. It is based on the Linux Kernel and other open-source software and is developed by Google. Android is very popular nowadays among students and students are now choosing Android for their projects. It’s very much important for a beginner to build baby Android apps to learn Android. In this article let’s create a simple Quiz App in android using Java. A simple Quiz App that contains a set of curated questions and its answers and checks for the correctness of the answer given by the user. It navigates through the questions using dynamic programming.

Approach

Step 1: Creating a new project

  • Click on the File option at the topmost corner in the left.
  • Then click on new and open a new project and name the project.
  • Now select the Empty Activity with language as Java.
  • Name it QuizApp.

Creating a new project

Step 2: Designing the UI with activity_main.xml



Add the below code in the activity_main.xml file. Here the parent layout is a LinearLayout whose orientation is set to vertical. Inside it, there is one ImageView, one TextView, two Buttons, and two ImageButton. The Button and ImageButton are inside a child LinearLayout for horizontal orientation. ImageView is used for displaying image and TextView is used to display the question and Button is used to indicate true/false and ImageButton for navigating to next/previous question.

Adding images in the drawable folder:

The following are the links given for all the drawable files that are used in this project.

  • For flower images (f1/f2/f3/f4/f5/f6/f7): Refer to this.
  • For the next icon: Refer to this.
  • For the previous icon: Refer to this.
  • For emoji: Refer to this.

The complete code for the activity_main.xml file is given below.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<!--Using linear layout with vertical orientation and center gravity -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#FFFFFF"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">
  
    <!--ImageView used for showing pictures along with questions-->
    <ImageView
        android:id="@+id/myimage"
        android:layout_width="wrap_content"
        android:src="@drawable/f1"
        android:layout_height="wrap_content"/>
  
    <!--TextView used for showing questions on screen-->
    <TextView
        android:id="@+id/answer_text_view"
        android:text="@string/a"
        android:textColor="@android:color/black"
        android:textSize="30sp"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
  
    <!--Using another LinearLayout for showing buttons
        in horizontal orientation-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
  
        <!--TrueButton-->
        <Button
            android:id="@+id/true_button"
            android:layout_marginRight="20dp"
            android:backgroundTint="#5BD91B"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@string/true_text" />
  
        <!--FalseButton-->
        <Button
            android:id="@+id/false_button"
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:backgroundTint="#E33328"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@string/false_text" />
  
    </LinearLayout>
  
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
  
        <!--PreviousButton-->
        <ImageButton
            android:id="@+id/prev_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/baseline_keyboard_arrow_left_black_18dp"
            android:backgroundTint="#DFD2D1"
            android:text="@string/prev_text" />
  
        <!--NextButton-->
        <ImageButton
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#DFD2D1"
            android:src="@drawable/baseline_keyboard_arrow_right_black_18dp"
            android:text="@string/next_text" />
  
    </LinearLayout>
</LinearLayout>

chevron_right


After adding this code in activity_main.xml the UI looks like:

Step 3: Working with Question.java 



To create a new Java class right-click a Java file or folder, and select New > Java Class

Now add the following code in the Question.java. Here use getters and setters method to retrieve and set data. Method isAnswerTrue() returns answerTrue as already passed in Question Constructor.

Question.java

filter_none

edit
close

play_arrow

link
brightness_4
code

package org.geeksforgeeks.quizapp;
  
public class Question
{
    // answerResId will store question
    private int answerResId;
    
    // answerTrue will store correct answer
    // of the question provided
    private boolean answerTrue;
  
    public Question(int answerResId, boolean answerTrue)
    {
      // setting the values through
      // arguments passed in constructor
      this.answerResId = answerResId;
      this.answerTrue = answerTrue;
    }
    
    // returning the question passed
    public int getAnswerResId() 
    {
      return answerResId; 
    }
    
    // setting the question passed
    public void setAnswerResId(int answerResId)
    {
      this.answerResId = answerResId;
    }
    
    // returning the correct answer
    // of question
    public boolean isAnswerTrue() 
    {
      return answerTrue; 
    }
    
    // setting the correct
    // ans of question
    public void setAnswerTrue(boolean answerTrue)
    {
      this.answerTrue = answerTrue;
    }
}

chevron_right


Step 4: Working with strings.xml file

In the strings.xml file, we have to provide the question bank. One can add many questions inside this file.

strings.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
    <!--All the string resources come here including Questions and title -->
    <string name="app_name">GFG | HOW WELL DO YOU KNOW SIMRAN?</string>
    <string name="correct"><b>CORRECTNESS IS</b> \n
                           <b>%1$d</b> OUT OF 6</string>
    <string name="true_text">true</string>
    <string name="false_text">false</string>
    <string name="correct_answer">That\'s correct</string>
    <string name="wrong_answer">That\'s incorrect</string>
    <string name="a">Simran loves Chocolates.</string>
    <string name="b">Simran Knows Following Skills:\n \t
                     <b>Ballet</b>\n \t
                     <b>HipHop</b></string>
    <string name="c">Do You Think Simran Believes In:\n \t
                     <b>Luck!!!</b></string>
    <string name="d">Do You Think Simran Wants To Visit <b>Italy</b></string>
    <string name="e">Simran Loves Loyalty.</string>
    <string name="f">Simran Sleeps Less</string>
    <string name="next_text">next</string>
    <string name="prev_text">previous</string>
  
</resources>

chevron_right


 

Step 5: Working with MainActivity.java

onCreate() method is invoked first when the app is launched. Question[] array is instantiated with question Id and right answer to the question. setOnClickListener() method is invoked whenever Button/ImageButton is clicked, so when the user clicks a button it checks for its Id by getId() method and performs actions as per our logic. updateQuestion() updates question by settext() method of TextView and changes images by keeping track of question number. checkAnswer() method checks the original answer with the button clicked and uses Toast to display text accordingly.

MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

package org.geeksforgeeks.quizapp;
  
import android.annotation.SuppressLint;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity
    implements View.OnClickListener {
    // setting up things
    private Button falseButton;
    private Button trueButton;
    private ImageButton nextButton;
    private ImageButton prevButton;
    private ImageView Image;
    private TextView questionTextView;
    private int correct = 0;
    // to keep current question track
    private int currentQuestionIndex = 0;
  
    private Question[] questionBank = new Question[] {
        // array of objects of class Question
        // providing questions from string
        // resource and the correct ans
        new Question(R.string.a, true),
        new Question(R.string.b, false),
        new Question(R.string.c, true),
        new Question(R.string.d, true),
        new Question(R.string.e, true),
        new Question(R.string.f, false),
  
    };
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // setting up the buttons
        // associated with id
        falseButton = findViewById(R.id.false_button);
        trueButton = findViewById(R.id.true_button);
        nextButton = findViewById(R.id.next_button);
        prevButton = findViewById(R.id.prev_button);
        // register our buttons to listen to
        // click events
        questionTextView
            = findViewById(R.id.answer_text_view);
        Image = findViewById(R.id.myimage);
        falseButton.setOnClickListener(this);
        trueButton.setOnClickListener(this);
        nextButton.setOnClickListener(this);
        prevButton.setOnClickListener(this);
    }
  
    @SuppressLint("SetTextI18n")
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onClick(View v)
    {
        // checking which button is
        // clicked by user
        // in this case user choose false
        switch (v.getId()) {
        case R.id.false_button:
            checkAnswer(false);
            break;
  
        case R.id.true_button:
            checkAnswer(true);
            break;
  
        case R.id.next_button:
            // go to next question
            // limiting question bank range
            if (currentQuestionIndex < 7) {
                currentQuestionIndex
                    = currentQuestionIndex + 1;
                // we are safe now!
                // last question reached
                // making buttons
                // invisible
                if (currentQuestionIndex == 6) {
                    questionTextView.setText(getString(
                        R.string.correct, correct));
                    nextButton.setVisibility(
                        View.INVISIBLE);
                    prevButton.setVisibility(
                        View.INVISIBLE);
                    trueButton.setVisibility(
                        View.INVISIBLE);
                    falseButton.setVisibility(
                        View.INVISIBLE);
                    if (correct > 3)
  
                        questionTextView.setText(
                            "CORRECTNESS IS " + correct
                            + " "
                            + "OUT OF 6");
                    // showing correctness
                    else
                        Image.setImageResource(
                            R.drawable.resu);
                    // if correctness<3 showing sad emoji
                }
                else {
                    updateQuestion();
                }
            }
  
            break;
        case R.id.prev_button:
            if (currentQuestionIndex > 0) {
                currentQuestionIndex
                    = (currentQuestionIndex - 1)
                      % questionBank.length;
                updateQuestion();
            }
        }
    }
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void updateQuestion()
    {
        Log.d("Current",
              "onClick: " + currentQuestionIndex);
  
        questionTextView.setText(
            questionBank[currentQuestionIndex]
                .getAnswerResId());
        // setting the textview with new question
        switch (currentQuestionIndex) {
        case 1:
            // setting up image for each
            // question
            Image.setImageResource(R.drawable.f2);
            break;
        case 2:
            Image.setImageResource(R.drawable.f3);
            break;
        case 3:
            Image.setImageResource(R.drawable.f4);
            break;
        case 4:
            Image.setImageResource(R.drawable.f5);
            break;
        case 5:
            Image.setImageResource(R.drawable.f6);
            break;
        case 6:
            Image.setImageResource(R.drawable.f7);
            break;
        case 7:
            Image.setImageResource(R.drawable.f1);
            break;
        }
    }
    private void checkAnswer(boolean userChooseCorrect)
    {
        boolean answerIsTrue
            = questionBank[currentQuestionIndex]
                  .isAnswerTrue();
        // getting correct ans of current question
        int toastMessageId;
        // if ans matches with the
        // button clicked
  
        if (userChooseCorrect == answerIsTrue) {
            toastMessageId = R.string.correct_answer;
            correct++;
        }
        else {
            // showing toast
            // message correct
            toastMessageId = R.string.wrong_answer;
        }
  
        Toast
            .makeText(MainActivity.this, toastMessageId,
                      Toast.LENGTH_SHORT)
            .show();
    }
}

chevron_right


Output: Run on Emulator

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.