How to Make Surface Clickable in Android Jetpack Compose

Android’s Jetpack Compose toolkit has been gaining popularity due to its declarative nature and the modern approach it brings to building UI for Android apps. It offers a collection of composable functions for different UI elements, including buttons, text fields, and surfaces.

In this blog post, we’re going to focus on how to handle click events with the Surface composable in Jetpack Compose.

What is Surface Composable

The Surface composable is a fundamental building block in Material Design. It provides a container that can hold different composables and handle some events. It can also react to its state and environment, like handling click events or changing its color based on the theme.

How to Handle Click Events on Surface

The clickable modifier can be added to the Surface to make it respond to click events. Below is a simple example:

@Composable
fun SurfaceOnClickExample() {
    Surface(
        modifier = Modifier
            .clickable { println("Surface clicked!") }
            .fillMaxSize(),
        color = MaterialTheme.colorScheme.primary
    ) {
        Text("Click me!")
    }
}

In the SurfaceOnClickExample function, we have a Surface that fills the entire available space. We’ve added the clickable modifier so that it will respond to click events. Whenever you click on the surface, “Surface clicked!” will be printed in the log.

Inside the Surface, we’ve added a Text composable for some visible content. This example demonstrates how we can add click events to a Surface in Jetpack Compose, and how we can add other composables within the Surface.

Following is the complete code for reference.

package com.example.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
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
                ) {
                    SurfaceOnClickExample()
                }
            }
        }
    }
}

@Composable
fun SurfaceOnClickExample() {
    Surface(
        modifier = Modifier
            .clickable { println("Surface clicked!") }
            .fillMaxSize(),
        color = MaterialTheme.colorScheme.primary
    ) {
        Text("Click me!")
    }
}

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

In summary, handling click events on a Surface in Jetpack Compose is done by adding a clickable modifier to the Surface. This powerful functionality is achieved with just a few lines of code, thanks to the declarative and composable nature of Jetpack Compose.