Main navigation

Tutorial 2 – How to make a basic App.

adsense

Pre-requisites:

1) Android Studio installed on your PC (Unix or Windows). You can learn how to install it here .
2) A real time android device (Smartphone or Tablet) configured with Android Studio. .
3) A basic knowledge of Android lifecycle and different classes & functions used in Android Studio.
4) Go through our previous Tutorial-1 of how to make a basic Millionaire App.

First of all we will have to make some changes in content_millionaire.xml and strings.xml. Here we will add and remove some code from these files as compare to Tutorial-1 .

content_millionaire.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center"
              android:orientation="vertical" >
    <TextView
        android:id="@+id/millionaire_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="24dp" />               <!-- reference id is added for each question  -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:id="@+id/option_1"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/option_1" 
            android:layout_marginRight="50dp" /> 
        <Button 
            android:id="@+id/option_2" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/option_2" /> 
    </LinearLayout> 
        
    <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <Button 
            android:id="@+id/option_3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/option_3" 
            android:layout_marginRight="50dp"/> 
         <Button 
            android:id="@+id/option_4" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/option_4" />
    </LinearLayout>

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next_button"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"/>
</LinearLayout>
            

strings.xml:

<resources> 
    <string name="app_name">Millionaire App</string>
    <string name="option_1">option_1</string>
    <string name="option_2">option_2</string>
    <string name="option_3">option_3</string>
    <string name="option_4">option_4</string>
    <string name="invalid">This is first question. Cannot go back</string>
    <string name="next_button">Next</string>
    <string name="prev_button">Prev</string>
    <string name="correct_toast">Correct!</string>
    <string name="incorrect_toast">Incorrect!</string>
    <string name="question_president"> Who was first president of UN </string>
    <string name="question_river">  Which is biggest river in the world </string>
    <string name="question_star"> Name the biggest star in the Universe known to human </string>
    <string name="question_population"> Which country has the largest population in the world </string>
    <string name="question_planet">Which is the largest planet in our solar system </string>
    <string name="action_settings">Settings</string>
</resources> 

In the above code we have added certain questions and their corresponding ids.

Now let’s work on the brain of our App i.e MillionaireActivity.java. First we have to make a class Question that holds the question (mTextResId) and answer (mOptionTrue) :

public class Question { 
          private int mTextResId; 
          private int mOptionTrue; 

          public Question(int textResId, int optionTrue) { 
            mTextResId = textResId; 
            mOptionTrue = optionTrue; 
        } 
      }

Generate Getter and Setter methods:

The first step is to configure Android studio to recognize “m” prefix variable such that when you ask it generate getter and setter for mTextResId, it will create getTextResId than getMTextResId. To do it go to File –> Settings –> Editor –> Code Style –> Java and fill Field as “m” and Static field as “s”. Click Ok.

tutorial2_1

Now left click on the variable mTextResId and select generate –> getter and setter. Similarly do for mOptionTrue . Following code will appear:

Question Class:

public class Question { 
          private int mTextResId; 
          private int mOptionTrue;

          public int getTextResId() { 
              return mTextResId; 
          } 

          public void setTextResId(int textResId) { 
              mTextResId = textResId; 
          } 

          public int isOptionTrue() { 
              return mOptionTrue; 
          } 

          public void setOptionTrue(int optionTrue) { 
              mOptionTrue = optionTrue; 
          }
  ....

So Question class is complete. Now we will create an array of Questions with which TextView and buttons will interact to give required functionality. This array will composed of different Millionaire questions along with their Answers.

MillionaireActivity

public class MillionaireActivity extends AppCompatActivity { 

        private Button mOption1Button; 
        private Button mOption2Button; 
        private Button mOption3Button; 
        private Button mOption4Button; 
        private int mCurrentIndex = 0; 
        private Button mNextButton; 
        private TextView mQuestionTextView; 

        private Question[] mQuestionBank = new Question[] { 
            new Question(R.string.question_president, R.id.option_1), 
            new Question(R.string.question_river, R.id.option_1), 
            new Question(R.string.question_star, R.id.option_1), 
            new Question(R.string.question_population, R.id.option_1), 
            new Question(R.string.question_planet, R.id.option_1), 
        }; 

Here we have made an array of questions along with their answers. All answers are chosen as option_1 Questions will be mapped according to their string id from strings.xml .
mCurrentIndex refers to the current position of the index in array of questions. It’s initial value is chosen as 0.

Now we will use mQuestionBank, mCurrentIndex and accessor methods in the Question class to show all the Millionaire questions on screen.

Get reference of the TextView and setText to the first question of array in onCreate method.

protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_millionaire);
            mQuestionTextView = (TextView) findViewById(R.id.millionaire_question);
            int question = mQuestionBank[mCurrentIndex].getTextResId();
            mQuestionTextView.setText(question);
  ....

Similarly get reference of next_button which is responsible for going to the next question. So we will increment mCurrentIndex in the next_button implementation.

            mNextButton = (Button) findViewById(R.id.next_button);
            mNextButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mCurrentIndex = (mCurrentIndex + 1) % mQuestionBank.length;
                    int question = mQuestionBank[mCurrentIndex].getTextResId();
                    mQuestionTextView.setText(question);

                }
            });

Remainder is calculated with mQuestionBank.length so that first question starts after end question is reached.

Run above code in android device. You can refer our post on How to Connect and Configure App on Real Android device . Now If you Click on Next button and you will see next question.

tutorial_2_2

There is only one step remaining i.e update answer. If you click on a particular option then it should show if it is correct or incorrect. This will be done in the following code. Make an new class update_answer .

private void update_answer(int option) {

            int messageResId = 0;

            int answer = mQuestionBank[mCurrentIndex].isOptionTrue();
             if(answer == option) {
                 messageResId = R.string.correct_toast;
             }
             else {
                 messageResId = R.string.incorrect_toast;
             }
            Toast.makeText(this, messageResId, Toast.LENGTH_SHORT)
                    .show();
        }

So here if a user choose a particular option then it will be compared with correct answer. If it is matched then Correct will be shown otherwise Incorrect.

Call update_answer in setOnClickListener of all the option buttons:

            mOption1Button = (Button) findViewById(R.id.option_1);
            mOption1Button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int question = mQuestionBank[mCurrentIndex].getTextResId();
                    update_answer(R.id.option_1);
                }
            });
            mOption2Button = (Button) findViewById(R.id.option_2);
            mOption2Button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    update_answer(R.id.option_2);
                }
            });
            mOption3Button = (Button) findViewById(R.id.option_3);
            mOption3Button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    update_answer(R.id.option_3);
                }
            });
            mOption4Button = (Button) findViewById(R.id.option_4);
            mOption4Button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    update_answer(R.id.option_4);
                }
            });

Run this code on the android device. Click on a particular option and it will show if that answer is correct or not. Click on Next Button which will take you to the next question where similarly you can answer question.

Note: We have taken option_1 as the correct option for all the questions. You can change it by changing OptionTrue in Question array.

Hurray!! You have learnt how to make a basic Millionaire App where a user can answer a number of questions.



What’s Next

We have made all the options as option_1,.. option_4. Make them real options For example: Options for the biggest river could be (1) Ganga (2) Nile (3) Amazon (4) Volga . Try to replace these real options with option_1, option_2 etc.
Try it out. If succeeded then have a pat on your back. If not, don’t worry. This is just starting. Let us know. We will mail you code of how to do it.

Please comment if you have any doubts or suggestions. Don’t forget to subscribe. Also do Like our Facebook Page or Add us on Twitter.Thank you :).

You can download whole code of this tutorial by clicking below:


Android Tutorial Point Download Now


Reader Interactions

Leave a Reply

Advertisment ad adsense adlogger