In this article, we will learn how to implement a button in Jetpack Compose with the help of examples.
Prerequisites:
What is Button in Android?
A button is a UI element that a user can interact with by clicking or tapping it. It typically contains a text label that says what happens when we tap on it.
Example:
For this article, create a MyUI() composable in the MainActivity, and call it from the onCreate() method.
// add the following imports
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.Add
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.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}We will write our code in MyUI().
Jetpack Compose provides Button() API:
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
elevation: ButtonElevation? = ButtonDefaults.elevation(),
shape: Shape = MaterialTheme.shapes.small,
border: BorderStroke? = null,
colors: ButtonColors = ButtonDefaults.buttonColors(),
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)Let’s understand it with examples.
Simple Button Example:
For a basic button, the onClick parameter is mandatory. It is a lambda that gets called when we tap on the button.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
onClick = {
// click event
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
}
) {
// add button content here.
// all the items are added in a row.
Text(text = "Click Me")
}
}Output:
The code is simple. In the onClick block, we are showing a toast message. In the content, we have added a Text composable. The content block is a row scope. So, if you add multiple items, they will be arranged in a Row.
Button with Icon and Text:
To display text with an icon, add Icon() and Text() composables in the content block. If you want to set a gap between them, use Spacer.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
onClick = {
// click event
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
}
) {
// add button content here.
// all the items are added in a row
Icon(imageVector = Icons.Default.Add, contentDescription = "Add icon")
Spacer(modifier = Modifier.width(width = 8.dp))
Text(text = "ADD ME")
}
}Output:
For the Add icon, you may need to include material icon dependency.
Button Shape:
We can customize the button shape using the shape parameter. Call the RoundedCornerShape() method and pass the desired corner size.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
onClick = {
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
},
shape = RoundedCornerShape(size = 20.dp)
) {
Text(text = "Click Me")
}
}Output:
Button Background Color:
The colors parameter helps us to change the background color. Call the buttonColors() method and pass the colors you want.
public final fun buttonColors(
backgroundColor: Color,
contentColor: Color,
disabledBackgroundColor: Color,
disabledContentColor: Color
): ButtonColorsRelated: Colors in Jetpack Compose
Let’s set green as the background color:
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
onClick = {
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Green
)
) {
Text(text = "Click Me")
}
}Output:
Button Elevation and Shadow:
We use the elevation() method to customize the shadow below the button. We can set the shadow at different states.
public final fun elevation(
defaultElevation: Dp,
pressedElevation: Dp,
disabledElevation: Dp,
hoveredElevation: Dp,
focusedElevation: Dp
): ButtonElevationLet’s set 20.dp as the default elevation.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
onClick = {
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
},
elevation = ButtonDefaults.elevation(
defaultElevation = 20.dp
)
) {
Text(text = "Click Me")
}
}Output:
Note: If you want to remove the elevation, pass 0.dp.
Button Size:
The Modifier‘s methods like width(), height(), fillMaxWidth(), etc. can be used to change the button size.
@Composable
fun MyUI() {
val contextForToast = LocalContext.current.applicationContext
Button(
modifier = Modifier
.width(width = 120.dp)
.height(height = 64.dp),
onClick = {
Toast.makeText(contextForToast, "Clicked!", Toast.LENGTH_SHORT).show()
}
) {
Text(text = "Click Me")
}
}Output:
How to Disable the Button?
To disable the button, pass false to the enabled parameter. Once disabled, the button will not be clickable.
@Composable
fun MyUI() {
var enabled by remember {
mutableStateOf(true)
}
Button(
onClick = {
enabled = false
},
enabled = enabled
) {
Text(text = if (enabled) "Disable Me!" else "I am Disabled!")
}
}Output:
How to Create a Custom Button in Jetpack Compose?
The default Button() API follows the material guidelines. As a result, we cannot not fully customize it according to our requirements. But, we can use APIs like Box() and Surface() to create a complete custom button.
Example:
I have made the above ones using the Box() API. If you like it, take a look at all the custom buttons.
This is all about the Button API in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.
Related Articles:
- How to Disable Ripple Effect in Jetpack Compose?
- How to Integrate MAX Banner Ads in Android?
- How to Implement Checkbox in Jetpack Compose?
Resources:
