Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
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.