Create a Quiz App Using Android Studio
Tags: android, java, beginners, codenewbie
Published: 2022-07-29 14:36:47

### By Samrat Chakraborty
For an Android app developer,user interface is the key. 

Your app may have cutting edge functionality, but if its wrapped in an unappealing UI, its unlikely that users will stay around long enough to discover how great your app really is.

In this project we will cover the following :

- LinearLayout
- Designing for multiple screens
- Adding image resources
- App accessibility
- Custom XML styles
- Making Buttons
- Toast Notifications

Start by creating an Android project called ‘QuizApp’ and a new activity go for empty activity. (Refer to [my previous blog](https://dev.to/crazycodigo/android-studio-guide-for-beginners-3mmn) if you aren't sure how)

## Define a LinearLayout

A LinearLayout is a flexible layout that will allow you to organize UI elements in relation to one another. This feature makes it particularly useful to developers needing control over the exact positioning of their UI components.

```
<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schmas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:app=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
```

## Designing for Multiple Screens: Background Image:
Open the ‘res’ folder here you can add the images that you want to display as background  in your app screen.
![android studio res folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a41yso9jcx26dpq2gep.png)
 
Modify your layout code by adding the id of the background image that you want in your Quiz App.

```
<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schmas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:app=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:gravity=”center”
android:background=”@drawable/ic_bg”
android:orientation=”vertical”
Tools:context=”.MainActivity”
```

## Creating Buttons:

In the main activity file you can create your own button and give it an ID so that you can access it anywhere in your project.

![Android Studio tutorial button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pgjn9ybyqpjmfe8fqv7.png)

## Here is the complete Main Layout code that I'm using :

```
<?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:gravity="center"
    android:background="@drawable/ic_bg"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_app_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="@string/app_name"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        android:textStyle="bold" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:background="@android:color/white"
        app:cardCornerRadius="8dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Welcome"
                android:textColor="#363A43"
                android:textSize="30sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="16dp"
                android:text="Please enter your name."
                android:textColor="#7A8089"
                android:textSize="16sp" />

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/til_name"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp">

                <androidx.appcompat.widget.AppCompatEditText
                    android:id="@+id/et_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:imeOptions="actionGo"
                    android:hint="Name"
                    android:inputType="textCapWords"
                    android:textColor="#363A43"
                    android:textColorHint="#7A8089" />
            </com.google.android.material.textfield.TextInputLayout>

            <Button
                android:id="@+id/btn_start"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@color/colorPrimary"
                android:text="Start"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>
```

## Adding Questions to your Quiz App:

Under layout tab add another `.xml` file to add pages to your quiz with questions and give respective IDs to them so that they are easily accessible.

![Android Studio adding multiple pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaw1xd4yy3nmrpmmyrl0.png)
 
Above Image code states giving id to the picture displayed in the quiz.

After giving the picture, you now have to go ahead and give the number of options for the answer. Also, create the submit button.

```
<TextView
android:id="@+id/tv_option_one"
android:layout_width="match_parent"
android:layout_height="wrap_content" 
android:layout_margin="10dp"
android:background="@drawable/default_option_border_bg",
android:gravity="center" 
android:padding="15 dp" 
android:textcolor="#7A8089" 
android:textSize="18sp" 
tools:text="Apple"
```
 
Repeat the above code for as many options as you want to give.

Make a final Submit button at the end of the quiz and then go to the kotlin file to work on the functionality of the app.

## Coding the Kotlin files:

In this File set an On Click Listener to the start button of the quiz.

![Kotlin on click listener](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odg0q1u87yf0plmdi60j.png)
 
Make variables for everything displayed in your QuizApp

```
package com.quizapp
data class Questions(
    val id: Int, 
    val question: String, 
    val image: Int, 
    val optionOne: String, 
    val option Two: String, 
    val optionThree: String, 
    val optionFour: String, 
    val correctAnswer: Int
)
```

Set On Click Listener to all the options and the final submit button:

```
tv_option_one.setOnClickListener(this) 
tv_option_two.setOnClickListener(this)
tv_option_three.setOnClickListener(this)
tv_option_four.setOnClickListener(this) 
btn_submit.setOnClickListener(this)
```
Finally Run the App with your Emulator provided by Android Studio. Boom! You just made your first App  :)

## Wrapping Up:

Over this blog, you have learned the essentials of Android UI design and have created a simple, yet effective UI with some working functionality. Try applying some of these techniques to your own Android projects, to ensure your UI doesn’t let your app down.

You can download the entire source code for this project on [my GitHub](https://github.com/Samrat1507/Meme-Quiz-Apk).

And for more Blogs and Coding related things, you can follow [Crazy Codigo’s social handles](https://linktr.ee/crazycodigo).

~ Sam