Modifier basics (padding, size, clickable) in Android Kotlin

Introduction

Modifiers help you change how UI elements look and behave. You can add space, size, or make things respond to taps.

You want to add space around a button so it doesn't touch other elements.

You want to make a box bigger or smaller on the screen.

You want to make a text or image respond when the user taps it.

You want to control the layout of items by changing their size or padding.

You want to make parts of your app interactive without extra code.

Syntax

Android Kotlin

Modifier.padding(dpValue)
Modifier.size(widthDp, heightDp)
Modifier.clickable { /* action */ }

Modifier is a way to change UI elements in Jetpack Compose.

You can chain multiple modifiers together like Modifier.padding(8.dp).clickable { }.

Examples

Adds 16 density-independent pixels of space around the element.

Android Kotlin

Modifier.padding(16.dp)

Sets the width to 100dp and height to 50dp.

Android Kotlin

Modifier.size(100.dp, 50.dp)

Makes the element respond to taps by printing a message.

Android Kotlin

Modifier.clickable { println("Clicked!") }

Combines padding, size, and click behavior on one element.

Android Kotlin

Modifier.padding(8.dp).size(120.dp).clickable { /* do something */ }

Sample App

This example shows a colored box with text. It has padding around it, a fixed size, and changes color and text when clicked.

Android Kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ModifierBasicsExample() {
  val clicked = remember { mutableStateOf(false) }

  Box(
    modifier = Modifier
      .padding(16.dp)
      .size(150.dp, 80.dp)
      .background(if (clicked.value) Color.Green else Color.Red)
      .clickable { clicked.value = !clicked.value }
  ) {
    Text(
      text = if (clicked.value) "Clicked!" else "Click me",
      fontSize = 20.sp,
      color = Color.White,
      modifier = Modifier.padding(16.dp)
    )
  }
}

Important Notes

Modifiers are applied in order. Padding before size affects the total space differently than size before padding.

Use clickable to make any UI element respond to taps easily.

Remember to import dp from androidx.compose.ui.unit.dp to use size units.

Summary

Modifiers change how UI elements look and behave.

Use padding to add space around elements.

Use size to set width and height.

Use clickable to make elements respond to taps.