How to design app UI for Quiz App [Step By Step]

Welcome to the second part of this quiz app series. In this post, we are going to learn how to design app UI (Screens) for Quiz App [Step By Step]. In the previous post, we had designed an icon for play store with the help of photoshop. If you haven’t seen that part, then I will recommend you to check that post first.

Read more:- How To Make A Simple App Icon [Step By Step]

Following this post, we will design 4 screens UI :

  1. Splash Screen.
  2. Home Screen.
  3. Play Screen.
  4. Score Screen.

How to design app UI for Quiz App [Step By Step]

Follow this tutorial step by step. Let’s start-

Before starting further step we will discuss some important things. If you want to launch any screen on your device then you have to do some important settings. This setting is important because we will design multiple screens. Whenever you want to launch any specified activity but at the time only one activity (Screen) will be launch those are defined in the manifest. For that, this setting is required. Let’s do the setting

1- Go to Activity Manifest > Define the intent filter into all activities. 

How to design app UI for Quiz App [Step By Step]

2- Go to Open edit run/debugger configuration  > Select Edit configurations.

Quiz App part 2 setting 1

3-  Select Launch Type (Specified Activity). Now one more activity option added. You can select any activity which one do you want to launch .

Quiz App part 2 setting 2

4- Click Apply and OK.

Now we move on to design App Screen (or UI)

How to design app UI for Quiz App [Step By Step]

Step 1- First we will design Splash Screen.

Splash Screen UI Design

Splash Screen of Quiz App

 

Splash Screen XML Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="@drawable/back"
    tools:context=".Splash_Screen">


    <ImageView
        android:id="@+id/icon_anim"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginBottom="40dp"
        android:background="@drawable/real_quiz_icon"
        app:layout_constraintBottom_toTopOf="@+id/progressBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.967" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="128dp"
        android:fontFamily="sans-serif"
        android:text="Loading...."
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:fontFamily="sans-serif"
        android:gravity="bottom"
        android:text="Developer-Techpass Master"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

Step 2- Second we will design Home Screen.

Home Screen UI Design

Home Screen

Home Screen XML Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/back_dashbord"
    tools:context=".Main_Activity">


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_above="@+id/btn_play"
        android:layout_below="@id/toolbar"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="150dp"
        android:layout_marginTop="150dp"
        android:layout_marginBottom="200dp"
        android:src="@drawable/real_quiz_icon" />

    <RelativeLayout
        android:id="@+id/btn_play"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="100dp"
        android:layout_marginEnd="100dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/button_bg_rec"
        android:gravity="center">


        <TextView
            android:id="@+id/tvPlay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Play Quiz"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

    </RelativeLayout>

</RelativeLayout>

Step 3- Third Screen is a very important screen for our quiz app. Let’s see how we will design it.

Play Screen UI Design

Play Screen

Play Screen XML Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="@drawable/background">


    <TextView
        android:id="@+id/score"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:layout_alignParentTop="true"
        android:text="Your Score :- 0"
        android:textColor="#A8FFFB"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/total_marks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@id/score"
        android:text="1/10"
        android:textAlignment="viewEnd"
        android:textColor="#FE7500"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="48dp"
        android:text="Time : 30"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_below="@id/txtTime"
        android:layout_marginTop="32dp"
        app:cardCornerRadius="4dp"
        android:focusable="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtTime">


        <TextView
            android:id="@+id/tv_que"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:fontFamily="sans-serif"
            android:padding="8dp"
            android:text="Questions"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteX="2dp"
            tools:layout_editor_absoluteY="170dp" />

    </androidx.cardview.widget.CardView>

    <RadioGroup
        android:id="@+id/answersgrp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignParentStart="true"
        android:clickable="true"
        android:focusable="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintTop_toBottomOf="@+id/cardView2">


        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:checked="false"
            android:drawableRight="@drawable/a"
            android:padding="8dp"
            android:text="Option A"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:checked="false"
            android:drawableRight="@drawable/b"
            android:padding="8dp"
            android:text="Option B"
            android:layout_marginTop="8dp"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:checked="false"
            android:drawableRight="@drawable/c"
            android:padding="8dp"
            android:text="Option C"
            android:layout_marginTop="8dp"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/radioButton4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:checked="false"
            android:drawableRight="@drawable/d"
            android:padding="8dp"
            android:layout_marginTop="8dp"
            android:text="Option D"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </RadioGroup>


    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/ad_view_container_ques"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="16dp"
        android:background="#4A69BD"
        android:text="Next Question"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:focusable="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/ad_view_container_ques"
        app:layout_constraintStart_toStartOf="parent" />

    <FrameLayout
        android:id="@+id/ad_view_container_ques"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Step 4– The fourth screen is the last screen of our quiz app it’s also a very important screen for our quiz app. Let’s see how we will design it.

Final Result Screen UI Design

Final Result Screen

Final Screen XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16sp"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_marginRight="16sp">


        <TextView
            android:id="@+id/txt_result_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Real Quiz Result"
            android:textColor="@android:color/black"
            android:textSize="24sp"
            android:textStyle="bold" />


        <ImageView
            android:id="@+id/wrong_emg"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/angry_img" />
    

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:background="@android:color/white"
            android:orientation="horizontal">


                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tvright"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:padding="12dp"
                        android:text="Correct: 0"
                        android:textSize="16sp"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/tvwrong"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:padding="12dp"
                        android:text="Wrong: 0"
                        android:textSize="16sp"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />

                </LinearLayout>



                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tvScore"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:padding="12dp"
                        android:textSize="16sp"
                        android:text="Score: 0"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/tvSkip"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:padding="12dp"
                        android:textSize="16sp"
                        android:text="Skip: 0"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/tvPlayNext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:padding="16sp"
            android:text="Play Again"
            android:textSize="18sp"
            android:textColor="@android:color/black"
            android:textStyle="bold" />


        <TextView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:padding="16sp"
            android:text="Share Score"
            android:textSize="18sp"
            android:textColor="@android:color/black"
            android:textStyle="bold" />


        <TextView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:padding="16sp"
            android:text="Rate App"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold" />


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:padding="16sp"
            android:text="Home"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold" />

</LinearLayout>

Download resource of this tutorial

I hope you liked this post. If you any questions about this post. Feel free to comment and Share this post with your friends.

Thanks for reading…

Leave a Reply