Jetpack Compose: Getting Started

On occasion, you will be required to process call-to-action items in your UI. For example, you may want to allow the user to submit a form, or to delete an item from a list. In these cases, you will need to add a button to your UI. In this session, we will learn how to add a button to our Compose UI. We will also get a chance to customize the button’s appearance and behavior. Finally, we will look at how to handle user clicks on the button.

Jetpack Compose provides a Button composable that you can use to add a button to your UI. The Button composable takes a onClick parameter that you can use to specify the action to be performed when the user clicks on the button. Let’s see how we can add a button to our UI.

@Composable
fun ButtonDemo() {
    Button(onClick = { /* Do something */ }) {
        Text(text = "Click Me")
    }
}

It is important to note, since we are using Material Design, the button will be styled according to the Material Design guidelines. This means that the button will have a background color, a text color, and a shape.

You can create a custom button from existing Composables and leveraging the Modifier API. For example, you can create a button with a custom background color by using the background modifier. You can also create a button with a custom shape by using the shape modifier. Let’s see how we can create a button with a custom background color and shape.

@Composable
fun CustomButton(){
    Box(
        modifier = Modifier
            .width(100.dp)
            .height(50.dp)
            .background(color = Color.Red, shape = RoundedCornerShape(8.dp))
            .clickable(onClick = { /* Do something */ })
    ) {
        Text(text = "Click Me", color = Color.White)
    }
}

The Button composable has three states: enabled, disabled, and pressed. The button is enabled by default. You can disable the button by setting the enabled parameter to false.

@Composable
fun ButtonStates() {
    Button(
        onClick = { /* Do something */ },
        enabled = false,
    ) {
        Text(text = "Click Me")
    }
}

This will result in a grayed out button that cannot be clicked.

You can customize the button’s colors by using the colors parameter. The colors parameter takes a ButtonColors object that you can use to specify the button’s colors.

The ButtonColors object has three properties: containerColor, contentColor, and disabledContentColor.

The containerColor property is used to specify the button’s background color. The contentColor property is used to specify the button’s text color.

The disabledContentColor property is used to specify the button’s text color when the button is disabled.

Let’s see how we can use the colors parameter to customize the button’s colors.

@Composable
fun ButtonColors() {
    Button(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Red,
            contentColor = Color.White,
            disabledContentColor = Color.Gray
        )
    ) {
        Text(text = "Click Me")
    }
}

You can also customize the button’s shape by using the shape parameter. The shape parameter takes a Shape object that you can use to specify the button’s shape.

@Composable
fun ButtonShape() {
    Button(
        onClick = { /* Do something */ },
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(text = "Click Me")
    }
}

Adding a Button

We can start by adding a new file to our components package. Let us call it FoodItem.kt, this will hold individual food items in our list.

Add a Composable named FoodItem to the file. This Composable will take a Food object as a parameter.

Ensure the FoodItem Composable has Column Composable upon which we will build as we continue.

We will then add a Button to the FoodItem Composable. The button will have a Text Composable as its content. This button will be used to open the FoodDetails screen.

@Composable
fun FoodItem(food: Food) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 5.dp)
    ) {

        Button(
            onClick = { /* Do something */ },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Red,
                contentColor = Color.White,
                disabledContentColor = Color.Gray
            )
        ){
            Text(text = "View Details")
        }

    }
} 

Click Handler

Buttons are meant to be Call-To-Actions. This means that they are meant to perform some action when clicked. In order to perform an action when the button is clicked, we need to provide a click handler.

We can add click handlers with two main approaches:

• Providing the onClick parameter to the Button Composable
• Using the Modifier API to add a click handler to the Button Composable

All inbuilt Buttons in Jetpack Compose have an onClick parameter that you can use to provide a click handler. The onClick parameter takes a lambda that will be called when the button is clicked. Let’s see how we can use the onClick parameter to provide a click handler.

Click Handler

@Composable
fun FoodItem(food: Food) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 5.dp)
    ) {

        Button(
            onClick = { 
                Log.d("FoodItem", "Clicked: ${food.name}")
             },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(
                container = Color.Red,
                contentColor = Color.White,
                disabledContentColor = Color.Gray
            )
        ){
            Text(text = "View Details")
        }

    }
} 

Conclusion

We have seen how to add a Button to our UI. We have also seen how to customize the Button’s colors and shape. We have also seen how to add a click handler to the Button.

In our next episode, you will get a chance to add texts to several of our existing Composables.