Part 1 – Layouts – Coding in Flow

[embedyt] https://www.youtube.com/watch?v=PiCZQg4mhBQ[/embedyt]

In this video series we are going to build a multiple choice quiz app which stores it’s questions in an SQLite database. We will count points for correct answers, save a highscore and implement a countdown timer for each question. We will also display the wrong and correct answers after the user made it’s choice or the timer ran out.

In part 1 we will prepare the starting screen, the quiz activity and their corresponding layouts. We will also set up the “start quiz” button which then opens our quiz activity via an intent.

Show less

colors.xmlactivity_starting_screen.xmlactivity_quiz.xmlStartingScreenActivity.java

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#795548</color>
    <color name="colorPrimaryDark">#5D4037</color>
    <color name="colorAccent">#FFEB3B</color>

    <color name="colorBackground">#BCAAA4</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/colorBackground"
    android:padding="16dp"
    tools:context="com.codinginflow.myawesomequiz.StartingScreenActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="My Awesome Quiz"
        android:textColor="@android:color/black"
        android:textSize="35sp" />

    <TextView
        android:id="@+id/text_view_highscore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_start_quiz"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="32dp"
        android:text="Highscore: 0"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button_start_quiz"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Start Quiz" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/colorBackground"
    android:padding="16dp"
    tools:context="com.codinginflow.myawesomequiz.QuizActivity">

    <TextView
        android:id="@+id/text_view_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Score: 0"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/text_view_question_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view_score"
        android:text="Question: 1/x"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/text_view_countdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="00:30"
        android:textColor="@android:color/black"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/text_view_question"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/radio_group"
        android:layout_marginBottom="16dp"
        android:text="Here will be the question text\nHere will be the question text\nHere will be the question text"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

        <RadioButton
            android:id="@+id/radio_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 1" />

        <RadioButton
            android:id="@+id/radio_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 2" />

        <RadioButton
            android:id="@+id/radio_button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 3" />

    </RadioGroup>

    <Button
        android:id="@+id/button_confirm_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio_group"
        android:layout_marginTop="16dp"
        android:text="Confirm" />

</RelativeLayout>

package com.codinginflow.myawesomequiz;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class StartingScreenActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_starting_screen);

        Button buttonStartQuiz = findViewById(R.id.button_start_quiz);
        buttonStartQuiz.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startQuiz();
            }
        });
    }

    private void startQuiz() {
        Intent intent = new Intent(StartingScreenActivity.this, QuizActivity.class);
        startActivity(intent);
    }
}