How do i make Click events with Jetpack Compose

Published September 25, 2021

In this Jetpack example we will learn how to do click events with Jetpack Compose. we know that all composable view doesn't have direct click listeners while we create view with compose, so how we can make click events for all views, to do this we have two different composabes.Clickable and Toggleable.

To use these components we need to wrap these inside our compose views.

What we will cover?

How to add Clickable component to the view?

How to make entire screen clickable

How to add Button and set button background color ?

How to add Click Event to the button?

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: Now create a Compose function with Empty box

fun ComposeMenu(){
    Box(
        
    ){

    }

}

Now when we run the app it will show empty blank screen

Now apply the properties to the Box, to do this we need to add Modifier to the Box

The companion object Modifier is the empty, default, or starter Modifier that contains no elements

Now set the alignment for the box to fix full size of the screen by

Box(
    modifier=Modifier
        .fillMaxSize()
        .background(
            color = Color.LightGray
        )
        
)

Now when we run it will show full screen with background color LightGray

Add Clickable to View

To add click event we need to add .clickable property to the Modifier component.

This clickable contains the below properties

fun Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
) = composed(
    inspectorInfo = debugInspectorInfo {
        name = "clickable"
        properties["enabled"] = enabled
        properties["onClickLabel"] = onClickLabel
        properties["role"] = role
        properties["onClick"] = onClick
    }
)

onClick: To handle the click listener for the View component

enabled: Enable/Disable the view

Let's add clickable to our Box component

Box(
    modifier=Modifier
        .fillMaxSize()
        .background(
            color = Color.LightGray
        )
        .clickable (

            onClick = {
                Toast.makeText(context,"OnClick",Toast.LENGTH_LONG).show()
               Log.v("OnClick","OnClick ");
            }
        )
){

}

We are showing the Toast while click on the View. Read more How to create Toast with Jetpack compose

Android Clickable event with jetpack compose

Add Button Component

Add button to the Box component

Button(
   content={
    Text(
        text = "Click Me",color = Color.Red)
})

Button compose has below properties

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

To set button width and height by Modifier.size()

To set background color to the button we will use the colors property of the button

colors= ButtonDefaults.buttonColors(backgroundColor = Color.White),

Now let's add click event to the button by click() listener

onClick = {
        Toast
            .makeText(context, "OnClick", Toast.LENGTH_LONG)
            .show()
}

Jetpack compose button click event in android

Complete example

package com.example.jetpack.widget

import android.content.Context
import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.SnackbarDefaults.backgroundColor
import androidx.compose.material.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.semantics.Role.Companion.Button
import androidx.compose.ui.unit.dp

@Composable
fun ComposeMenu(context: Context){
    Box(
        modifier= Modifier
            .fillMaxSize()
            .background(
                color = Color.Magenta
            )
            .clickable(

                onClick = {
                    Toast
                        .makeText(context, "OnClick", Toast.LENGTH_LONG)
                        .show()
                    Log.v("OnClick", "OnClick ");
                }
            )
    ){

        Button(
            modifier=Modifier
                .align(alignment = Alignment.Center)
                .padding(all=0.dp),
            colors= ButtonDefaults.buttonColors(backgroundColor = Color.White),
            onClick = {
                Toast
                    .makeText(context, "OnClick", Toast.LENGTH_LONG)
                    .show()
        },content={
            Text(
                text = "Click Me",color = Color.Red)
        })

    }

}

Conclusion: In this jetpack compose we covered how to make entire screen clickable and add button with background color and click event with button

Article Contributed By :

8017 Views

Projects By category