Android UI Workshop: Build an Interactive Quiz App

Get a hands-on crash course in building an effective and attractive UI for your Android app, and design an interactive quiz app along the way!

For an Android app developer, the user interface (UI) is key. Your app may boast cutting-edge functionality, but if it’s wrapped in an unappealing UI, it’s unlikely that users will stick around long enough to discover just how great your app really is.

This tutorial provides a practical, step-by-step course in building an effective UI, using the example of a simple quiz app.

Our quiz app will have the following features:

  1. The app will use a combination of ConstraintLayout and LinearLayout to position the UI elements. ConstraintLayout is pretty powerful and allows you to apply constraints based on margins, relative positioning, and more.
  2. We will implement a scoring system, where a click on the correct answer will increase the score and a click on the wrong answer will result in a penalty.
  3. We will use the shape drawable to create a background of different UI elements. This saves us from the headache of creating multiple image variants as drawables.
  4. We will also define a style resource for our options and see how it prevents code duplication.

Let's get started.

Creating a New Project

Before we can start designing our quiz app, we will have to create a new project.

Open Android Studio and click on the New Project button. This will take you to another screen, where you can choose from different activities to get some boilerplate code. Pick the Empty Activity here, and then click Next.

Fill out the following details on the next screen.

Quiz App New Project

The app name is what users will see when they launch your app, and multiple apps can have the same name. I have set the name to Quiz App. The package name has to be unique for every app on the Play Store. I have set mine to com.tutsplus.quizapp. We are using Kotlin as our app development language, and the minimum SDK has been set to 24.

Click Finish, and you will be good to go.

Designing the App Layout

The first file that we will edit is activity_main.xml. This file contains information about all the UI elements in our app. The activity_main.xml file contains a single TextView within a ConstraintLayout by default. We will update it to have the following XML.

 xmlns:android="https://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/app_background" 
tools:context=".MainActivity">