Button composable in Android Kotlin - Mini App: Build & Ship

Build: Simple Button Screen

A screen with a button that shows a message when clicked.

Target UI

---------------------
|                   |
|   [Click Me]      |
|                   |
---------------------

Add a Button composable with the text 'Click Me'.

When the button is clicked, show a Toast message 'Button clicked!'.

Center the button on the screen.

Starter Code

Android Kotlin

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                // TODO: Add Button composable here
            }
        }
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Button(onClick = {
                    Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show()
                }) {
                    Text(text = "Click Me")
                }
            }
        }
    }
}

We use a Box to center the button on the screen by setting contentAlignment = Alignment.Center. Inside the Box, we add a Button composable with the text 'Click Me'. The onClick lambda shows a Toast message 'Button clicked!' using Toast.makeText. This gives immediate feedback when the user taps the button.

Final Result

Completed Screen

---------------------
|                   |
|   [Click Me]      |
|                   |
---------------------

When the user taps the 'Click Me' button, a small popup message 'Button clicked!' appears briefly at the bottom.

Stretch Goal

Change the button color to a custom color and add a second button that resets the Toast message.

💡 Hint

Use the colors parameter in Button and add another Button composable below the first one inside a Column.