Jetpack compose: How to implement tap listener

Jetpack Compose - Implementing a Tap Listener

This code demonstrates how to implement a tap listener in Jetpack Compose. It creates a clickable circular text view that displays a "Tap Count" and increments the count every time the user taps on it.

Code Breakdown:

  1. Main Activity:

    • The MainActivity class extends AppCompatActivity and sets the content using setContent with the MainContent composable.

  2. MainContent Composable:

    • This composable defines the UI structure with a Column layout centered vertically and horizontally within the screen.
    • Inside the column:
      • A mutableStateOf variable named counter is created to store the tap count (initialized to 0).
      • A Text composable displays the current tap count with a circular background and some padding.
      • The pointerInput modifier is applied to the Text composable. This modifier allows us to capture user touch input on the text view.
        • Inside pointerInput, the detectTapGestures function is used to identify tap events.
        • The onTap lambda is called whenever a tap is detected. It increments the counter value by 1.

  3. Preview Composable:

    • The ComposablePreview function is used for previewing the UI in Android Studio. It's currently commented out and doesn't affect the main functionality.

Summary:

This code provides a basic example of handling user interaction in Jetpack Compose. By combining the pointerInput modifier with detectTapGestures, you can create clickable elements that respond to user taps and perform desired actions, such as updating UI state in this case.


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.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
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
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .background(Color(0xFFEDEAE0))
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            val counter = remember { mutableStateOf(0) }

            Text(
                text = "Tap Count : ${counter.value}",
                fontSize = 40.sp,
                color = Color(0xFF4B3621),
                modifier = Modifier
                    .clip(CircleShape)
                    .background(Color(0xFFE30022))
                    .padding(25.dp)
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = {
                                counter.value++
                            }
                        )
                    }
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}
More android jetpack compose tutorials