jetpack compose - Row onClick

Compose Row onClick Event

The Row is a very important layout component of the android jetpack compose library. The Row layout widget places its nested elements in a horizontal sequence. So, the Row widget is basically used to put some elements side by side, which means one after another.

Sometimes android application developers put some buttons horizontally one after another. Android app developers also display a list of items inside a Row widget where items are horizontally positioned. By default Row widget does not allow scrolling but android application developers can implement the horizontal scrolling capability of a Row widget.

The Row widget has no built-in property/argument/parameter to enable or handle a click event. So, how android developers can add an onClick event to a Row widget? This jetpack compose android application development tutorial will demonstrate to us how can we add a click functionality to a Row widget in our app. To enable the onClick event on a Row object we have to write some extra code. Read the following instruction carefully to understand them.

The Row widget’s modifier object has an element name ‘clickable’. First, we can add a click event to a Row widget by passing a value to this ‘clickable’ element. The value directly acts as an onClick function parameter. The modifier’s ‘clickable’ has a click visual effect.

The second solution is the Row modifier object’s ‘pointerInput’ element. Using this ‘pointerInput’ element we can detect the user’s tap gestures. As a result, we can pass an on-tap event that actually acts as a click event of the Row widget. Run the below code in your android studio to see the result in your emulator. The following screenshots also help you to understand the coding logic.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(
                    "Compose - Row onClick",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        var counterFirst by remember { mutableStateOf(0)}
        var counterSecond by remember { mutableStateOf(0)}

        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Row(
                modifier = Modifier
                    .background(Color(0xFF00BFFF))
                    .weight(1f)
                    .clickable { counterFirst++ }
            ) {
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier.fillMaxSize()
                ){
                    Text(
                        text = "$counterFirst",
                        style = MaterialTheme.typography.h2
                    )
                }
            }

            Row(
                modifier = Modifier
                    .background(Color(0xFFFF1493))
                    .weight(1f)
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = {counterSecond++}
                        )
                    }
            ) {
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier.fillMaxSize()
                ){
                    Text(
                        text = "$counterSecond",
                        style = MaterialTheme.typography.h2
                    )
                }
            }

        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //GetScaffold()
    }
}