jetpack compose button example

Jetpack Compose Button Types with Examples

by
jetpack compose button example

These are the button types in Jetpack Compose. The button types are Button, OutlinedButton, TextButton, IconButton, and IconToggleButton.

The Button is a normal button that follows Android material design guidelines.

The OutlinedButton has a border around it and text inside of it.

The TextButton contains just text. It has no border and background. It shows a nice ripple when you tap on it.

The IconButton has an icon. You can add on click even on it. For example, a share button.

The IconToggleButton has two states. You can change its state by tapping on it. For example, the favorite icon on e-commerce apps. When you tap on it, it turns pink. When you tap on it again, it turns grey. I have removed the ripple effect on it to make it look beautiful. These are the available button types in Android Jetpack Compose.

If you want to use the code, you need to download the latest Android Studio. Jetpack Compose doesn’t work in the older versions.

Final Output:

If the video isn’t working, watch it on the YouTube.

Helpful Links to Understand the Code:

Jetpack Compose Button Types with Source Code:

Here are the Gradle files used in the project.

MainActivity.kt:

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: https://semicolonspace.com/semicolonspace-license/
For more designs with source code,
visit: https://semicolonspace.com/jetpack-compose-samples/
 */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BlogPostsTheme(darkTheme = false) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {

                    NormalButton()

                    Spacer(modifier = Modifier.height(16.dp))

                    OutlinedButtonExp()

                    Spacer(modifier = Modifier.height(16.dp))

                    TextButtonExp()

                    Spacer(modifier = Modifier.height(16.dp))

                    IconButtonExp()

                    Spacer(modifier = Modifier.height(16.dp))

                    IconToggleButtonExp()
                }
            }
        }
    }
}

@Composable
fun NormalButton() {
    var count by remember {
        mutableStateOf(0)
    }

    Button(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 32.dp, end = 32.dp),
        onClick = {
            count++
        },
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Magenta
        ),
        shape = RoundedCornerShape(16.dp)
    ) {
        Text(
            text = "Clicked $count time(s)",
            style = TextStyle(
                color = Color.White,
                fontSize = 18.sp
            )
        )
    }
}

@Composable
fun OutlinedButtonExp() {

    var enabled by remember {
        mutableStateOf(true)
    }

    OutlinedButton(
        enabled = enabled,
        onClick = {
            enabled = false
        }
    ) {
        Text(
            text = if (enabled) "Disable Me" else "I'm Disabled",
            style = TextStyle(
                color = if (enabled) Color.Cyan else Color.LightGray,
                fontSize = 20.sp
            )
        )
    }
}

@Composable
fun TextButtonExp(context: Context = LocalContext.current.applicationContext) {

    TextButton(
        onClick = {
            Toast.makeText(context, "Click", Toast.LENGTH_SHORT).show()
        }) {
        Text(text = "Text Button")
    }

}

@Composable
fun IconButtonExp(context: Context = LocalContext.current.applicationContext) {

    IconButton(
        onClick = {
            Toast.makeText(context, "Click", Toast.LENGTH_SHORT).show()
        }
    ) {
        Icon(
            imageVector = Icons.Outlined.Share,
            contentDescription = "Click to share",
            tint = Color.Red
        )
    }

}

@Composable
fun IconToggleButtonExp() {

    var checked by remember {
        mutableStateOf(false)
    }

    // This is used to disable the ripple effect
    val interactionSource = remember {
        MutableInteractionSource()
    }

    IconToggleButton(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    ) {

        val tint by animateColorAsState(
            targetValue = if (checked) Color.Magenta else Color.LightGray
        )

        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Favorite Item",
            modifier = Modifier
                .clickable(
                    indication = null, // Assign null to disable the ripple effect
                    interactionSource = interactionSource
                ) {
                    checked = !checked
                }
                .size(48.dp),
            tint = tint
        )
    }
}

Related:

Leave a Comment