Creating a new Android project in Android Kotlin - App Building Walkthrough

Build: Welcome Screen

This screen welcomes the user with a simple greeting message centered on the screen.

Target UI

---------------------
|                   |
|                   |
|                   |
|   Welcome to the  |
|      App!         |
|                   |
|                   |
|                   |
---------------------

Create a new Android project using Kotlin

Set up a MainActivity with a TextView centered on the screen

The TextView should display the text: "Welcome to the App!"

Use ConstraintLayout as the root layout

Starter Code

Android Kotlin

package com.example.welcomeapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // TODO: Set up ConstraintLayout and TextView here
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.welcomeapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import android.widget.TextView
import android.view.ViewGroup.LayoutParams.MATCH_PARENT
import android.view.ViewGroup.LayoutParams.WRAP_CONTENT

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val layout = ConstraintLayout(this).apply {
            id = ConstraintLayout.generateViewId()
            layoutParams = ConstraintLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)
        }

        val welcomeText = TextView(this).apply {
            id = TextView.generateViewId()
            text = "Welcome to the App!"
            textSize = 24f
        }

        layout.addView(welcomeText, ConstraintLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT))

        val set = ConstraintSet()
        set.clone(layout)
        set.connect(welcomeText.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP)
        set.connect(welcomeText.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM)
        set.connect(welcomeText.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        set.connect(welcomeText.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        set.applyTo(layout)

        setContentView(layout)
    }
}

We create a ConstraintLayout as the root layout programmatically. Then, we add a TextView with the text "Welcome to the App!". Using ConstraintSet, we center the TextView horizontally and vertically by connecting its edges to the parent layout's edges. Finally, we set the ConstraintLayout as the content view of the activity.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|                   |
|   Welcome to the  |
|      App!         |
|                   |
|                   |
|                   |
---------------------

The user sees a centered greeting message on app launch

No interactive elements on this screen

Stretch Goal

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

💡 Hint

Create a Button widget, position it below the TextView using ConstraintLayout constraints, and set an OnClickListener to show a Toast.