Jetpack Compose: Getting Started
Heads up... You've reached locked video content where the transcript will be shown as text.
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.
@Composable
fun ButtonDemo() {
Button(onClick = { /* Do something */ }) {
Text(text = "Click Me")
}
}
@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)
}
}
@Composable
fun ButtonStates() {
Button(
onClick = { /* Do something */ },
enabled = false,
) {
Text(text = "Click Me")
}
}
@Composable
fun ButtonColors() {
Button(
onClick = { /* Do something */ },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Red,
contentColor = Color.White,
disabledContentColor = Color.Gray
)
) {
Text(text = "Click Me")
}
}
@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.
@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.
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.