Modifier basics (padding, size, clickable) in Android Kotlin - Mini App: Build & Ship

Build: Modifier Basics Screen

A simple screen demonstrating how to use padding, size, and clickable modifiers on a Text composable in Jetpack Compose.

Target UI

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

Display a Text composable with the text 'Click Me'.

Add padding of 16.dp around the Text.

Set the size of the Text composable to 200.dp width and 60.dp height.

Make the Text clickable. When clicked, show a Toast message 'Text clicked!'.

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.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ModifierBasicsScreen()
    }
  }
}

@Composable
fun ModifierBasicsScreen() {
  val context = LocalContext.current
  Box(
    modifier = Modifier
      // TODO: Add padding of 16.dp
      // TODO: Set size to 200.dp width and 60.dp height
      // TODO: Make clickable to show Toast 'Text clicked!'
  ) {
    Text(text = "Click Me")
  }
}

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.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ModifierBasicsScreen()
    }
  }
}

@Composable
fun ModifierBasicsScreen() {
  val context = LocalContext.current
  Box(
    modifier = Modifier
      .padding(16.dp)
      .size(width = 200.dp, height = 60.dp)
      .clickable {
        Toast.makeText(context, "Text clicked!", Toast.LENGTH_SHORT).show()
      }
  ) {
    Text(text = "Click Me")
  }
}

We use Modifier.padding(16.dp) to add space around the Text so it doesn't touch the edges.

The Modifier.size(200.dp, 60.dp) sets the width and height of the Box containing the Text.

The Modifier.clickable makes the Box respond to taps. When tapped, it shows a Toast message "Text clicked!" using the current context.

This demonstrates how to chain modifiers to control layout and interaction in Jetpack Compose.

Final Result

Completed Screen

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

When user taps on the 'Click Me' text area, a short Toast message 'Text clicked!' appears at the bottom of the screen.

Stretch Goal

Add a background color to the clickable area that changes color when pressed.

💡 Hint

Use Modifier.background with remember { mutableStateOf() } and Modifier.pointerInput or Modifier.indication to detect press state.