jetpack compose - How to use IconButton

Jetpack Compose IconButton

The Button is a primary component for mobile application development. Sometimes android application developers need to show only an icon inside a Button widget. Android jetpack compose library provides a built-in widget to render an icon button in an app user interface.

Jetpack compose is a declarative way to render an app user interface in an android application without an XML-based layout. So, jetpack compose code is easily manageable and less error-prone. This android application development tutorial will demonstrate to us how we can render and use an IconButton inside a jetpack compose application.

IconButton is a clickable icon that acts as a Button widget and it represents action. IconButton’s overall minimum touch size is 48 dp width and 48 dp height which meets accessibility guidelines.

An IconButton is typically used inside an app bar as an action button and inside a navigation component. To render an IconButton we have to pass an onClick event and we also should pass an Icon to show it inside IconButton. IconButton enabled attribute used for enabling or disabling an IconButton.

There are lots of built-in icons in the android jetpack compose library, so we can use it for an IconButton. We also can use a custom icon for an IconButton. The IconButton modifier allows us to customize an IconButton rapidly and in a very efficient way. We can change the IconButton icon color by Icon’s tint property. IconButton’s onClick property handles the click event of IconButton.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material.icons.filled.Share
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.graphics.Color
import androidx.compose.ui.text.font.FontWeight
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(){
        val text = remember { mutableStateOf("") }

        Column(
            Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally) {

            Row(Modifier.padding(16.dp)) {
                IconButton(
                    onClick = { text.value = "Favorite clicked."},
                ){
                    Icon(
                        Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }

                IconButton(
                    onClick = { text.value = "Share clicked."},
                ){
                    Icon(
                        Icons.Filled.Share,
                        contentDescription = "Localized description",
                        tint = Color.Red
                    )
                }

                IconButton(
                    onClick = { text.value = "Refresh clicked."},
                ){
                    Icon(
                        Icons.Filled.Refresh,
                        contentDescription = "Localized description",
                        tint = Color.Blue
                    )
                }
            }

            Text(
                text = text.value,
                fontWeight = FontWeight.Bold,
                fontSize = 25.sp,
            )
        }
    }


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