First Android app in Android Kotlin - Mini App: Build & Ship

Build: WelcomeScreen

This screen shows a simple welcome message in the center of the screen.

Target UI

---------------------
|                   |
|                   |
|                   |
|   Welcome to my   |
|      Android      |
|       App!        |
|                   |
|                   |
|                   |
---------------------

Display a TextView with the text 'Welcome to my Android App!'

Center the text both vertically and horizontally

Use a simple white background

Starter Code

Android Kotlin

package com.example.firstapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class WelcomeScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // TODO: Set the content view with a layout containing the welcome text
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

package com.example.firstapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class WelcomeScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_welcome_screen)
    }
}

/* XML layout file: res/layout/activity_welcome_screen.xml */

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <TextView
        android:id="@+id/welcomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to my Android App!"
        android:textSize="24sp"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

We created a simple activity WelcomeScreen that sets its content view to a layout file activity_welcome_screen.xml.

The layout uses ConstraintLayout to center a TextView both vertically and horizontally by constraining all sides to the parent.

The TextView displays the welcome message with a readable font size and black text on a white background.

This is the simplest way to create a centered welcome screen in Android using Kotlin.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|                   |
|   Welcome to my   |
|      Android      |
|       App!        |
|                   |
|                   |
|                   |
---------------------

The screen shows the welcome message centered.

No buttons or interactions on this screen.

Stretch Goal

Add a button below the welcome text that shows a Toast message 'Button clicked!' when tapped.

💡 Hint

Add a Button widget below the TextView in the layout and set an OnClickListener in the activity to show a Toast.

Practice

1. What is the role of the MainActivity class in a simple Android app?

easy

A. It controls what the user sees by loading the layout and handling interactions.

B. It stores user data permanently on the device.

C. It manages network connections for the app.

D. It compiles the app code into machine language.

Solution

1. Step 1: Understand MainActivity's purpose

   MainActivity is the entry point of the app that sets the screen content.

2. Step 2: Identify its function in UI

   It loads the layout file which defines what the user sees and handles user actions.

3. Final Answer:

   It controls what the user sees by loading the layout and handling interactions. -> Option A

4. Quick Check:

   MainActivity controls UI = A [OK]

Hint: MainActivity sets the screen content and user interaction [OK]

Common Mistakes:

• Confusing MainActivity with data storage classes
• Thinking MainActivity handles network tasks
• Believing MainActivity compiles code

2. Which of the following is the correct way to set the content view in MainActivity using Kotlin?

easy

A. setContentView(R.id.activity_main)

B. setContentView(R.layout.activity_main)

C. setContentView(activity_main.xml)

D. setContentView("activity_main")

Solution

1. Step 1: Recall setContentView syntax

   In Kotlin, setContentView expects a layout resource ID, accessed as R.layout.filename.

2. Step 2: Match correct resource reference

   R.layout.activity_main correctly points to the layout XML file named activity_main.xml.

3. Final Answer:

   setContentView(R.layout.activity_main) -> Option B

4. Quick Check:

   Layout resource ID = R.layout.filename [OK]

Hint: Use R.layout.filename to reference layout files [OK]

Common Mistakes:

• Using string names instead of resource IDs
• Confusing layout and id resources
• Including file extensions in code

3. Given this Kotlin code in MainActivity:

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)
}

What will the user see when the app runs?

medium

A. A blank white screen with no text

B. An error message because onCreate is missing a return type

C. Nothing, the app will crash immediately

D. The layout defined in activity_main.xml displayed on screen

Solution

1. Step 1: Understand onCreate behavior

   onCreate is called when the app starts and sets the UI with setContentView.

2. Step 2: Effect of setContentView

   It loads the layout file activity_main.xml, so the user sees that layout on screen.

3. Final Answer:

   The layout defined in activity_main.xml displayed on screen -> Option D

4. Quick Check:

   setContentView loads layout = C [OK]

Hint: onCreate sets UI with setContentView(layout) [OK]

Common Mistakes:

• Thinking onCreate needs a return type
• Assuming no UI appears without extra code
• Confusing layout with id resources

4. What is wrong with this MainActivity code snippet?

override fun onCreate(savedInstanceState: Bundle?) {
  setContentView(R.layout.activity_main)
  super.onCreate(savedInstanceState)
}

medium

A. setContentView should be called outside onCreate

B. savedInstanceState should be nullable (Bundle?)

C. super.onCreate(savedInstanceState) must be called before setContentView

D. onCreate must return a value

Solution

1. Step 1: Check onCreate call order

   super.onCreate must be called first to properly initialize the activity.

2. Step 2: Identify correct order

   Calling setContentView before super.onCreate causes errors or unexpected behavior.

3. Final Answer:

   super.onCreate(savedInstanceState) must be called before setContentView -> Option C

4. Quick Check:

   super.onCreate first = B [OK]

Hint: Always call super.onCreate first inside onCreate [OK]

Common Mistakes:

• Calling setContentView before super.onCreate
• Using non-nullable Bundle parameter
• Expecting onCreate to return a value

5. You want your first Android app to show a greeting message centered on a white background. Which layout XML snippet achieves this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Check layout size and background

   uses match_parent for width and height and sets background to white (#FFFFFF).

2. Step 2: Verify text centering

   android:gravity=\"center\" centers the TextView inside the LinearLayout.

3. Final Answer:

   -> Option A

4. Quick Check:

   Center gravity + white background = A [OK]

Hint: Use LinearLayout with gravity=center and background=#FFFFFF [OK]

Common Mistakes:

• Using wrap_content for parent layout size
• Missing gravity=center for centering
• Not setting background color