How to Make Box Clickable in Android Jetpack Compose

Jetpack Compose is the modern toolkit for building native UI in Android applications. It provides a declarative approach, making your UI code more intuitive and concise. This post will guide you on making a Box Composable clickable using Jetpack Compose.

A Box in Jetpack Compose is a layout composable that stacks its children on top of each other. It’s very handy when you want to overlap several composables.

Here is a simple example:

@Composable
fun BoxExample() {
    Column{
        Box(
            modifier = Modifier
                .background(color = Color.LightGray)
                .size(200.dp)
                .clickable { Log.d("clicked", "BoxExample: true") },
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Click Here",
            )
        }
    }
}

In the above code, we define a Box with a size of 200.dp and a background color of light gray. We made the Box clickable using the .clickable {} modifier. You can handle the click event inside the lambda function.

Following is the complete code for reference.

package com.example.example

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BoxExample()
                }
            }
        }
    }
}

@Composable
fun BoxExample() {
    Column{
        Box(
            modifier = Modifier
                .background(color = Color.LightGray)
                .size(200.dp)
                .clickable { Log.d("clicked", "BoxExample: true") },
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Click Here",
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ExamplePreview() {
    ExampleTheme {
        BoxExample()
    }
}

That’s it! You’ve made a Box composable clickable. By utilizing Jetpack Compose’s declarative UI patterns, you can make any composable interact with user inputs and gestures with ease.