Jetpack Compose es un conjunto de herramientas moderno para crear una interfaz de usuario nativa de Android. Jetpack Compose simplifica y acelera el desarrollo de la interfaz de usuario en Android con menos código, herramientas potentes y API de Kotlin intuitivas. Compose está construido para apoyar los principios de diseño de materiales. Muchos de sus elementos de interfaz de usuario implementan el diseño de materiales listo para usar. En este artículo, explicaremos cómo puede crear botones de diseño de materiales utilizando Jetpack Compose. A continuación se muestra la imagen de muestra para mostrar lo que vamos a construir.
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio con Jetpack Compose, consulte Cómo crear un nuevo proyecto en Android Studio Canary Version con Jetpack Compose .
Paso 2: trabajar con MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcomposepractice.ui.theme.JetpackComposePracticeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposePracticeTheme {
// A surface container using the 'background' color from the theme
Surface(color = Color.White) {
Column {
// call the function which contains all the buttons
allButtons()
}
}
}
}
}
}
// In order to use compose properties annotate with @Compose
@Composable
fun allButtons() {
Text(text = "Buttons", style = typography.h5, modifier = Modifier.padding(8.dp))
// Here we are using Row to add
// two buttons in single Column
// You can change it as per your need
Row {
// Create a Main Button or Normal Button
Button(onClick = {}, modifier = Modifier.padding(8.dp)) {
Text(text = "Main Button")
}
// Create a Text Button
TextButton(onClick = { /*TODO*/ }, modifier = Modifier.padding(8.dp)) {
Text(text = "Text Button")
}
}
Row {
// Elevated Button
Button(
onClick = { /*TODO*/ },
modifier = Modifier.padding(8.dp),
elevation = ButtonDefaults.elevation()
) {
Text(text = "Elevated Button")
}
// Rounded Button
Button(
onClick = { /*TODO*/ },
modifier = Modifier.padding(8.dp),
shape = RoundedCornerShape(20.dp)
) {
Text(text = "Rounded")
}
}
Row {
// Outlined Button
// add border field and set BorderStroke and its color
OutlinedButton(
onClick = { /*TODO*/ },
border = BorderStroke(1.dp, Color.Red),
modifier = Modifier.padding(8.dp)
) {
Text(text = "Outlined")
}
// Outlined Button with icon
// add border field and set BorderStroke and its color
// add Icon field
OutlinedButton(
onClick = { /*TODO*/ },
border = BorderStroke(1.dp, Color.Red),
modifier = Modifier.padding(8.dp)
) {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null,
modifier = Modifier.padding(end = 4.dp)
)
Text(text = "Outlined Icon")
}
}
Row {
// Icon Button
// Icon on the left of text
Button(onClick = {}, modifier = Modifier.padding(8.dp)) {
Row {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null,
modifier = Modifier.padding(end = 4.dp)
)
Text(text = "Icon Button")
}
}
// Icon Button
// Icon on the Right of text
Button(onClick = {}, modifier = Modifier.padding(8.dp)) {
Text(text = "Icon Button")
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null,
modifier = Modifier.padding(start = 4.dp)
)
}
}
//custom background buttons
// create a variable mainButtonColor and define background Color and content Color
val mainButtonColor = ButtonDefaults.buttonColors(
backgroundColor = Color.Magenta,
contentColor = MaterialTheme.colors.surface
)
Row {
Button(colors = mainButtonColor, onClick = {}, modifier = Modifier.padding(8.dp)) {
Text(text = "Custom colors")
}
}
Row {
// Create variable horizontalGradient and inside color property define start and end color
val horizontalGradient = Brush.horizontalGradient(
colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),
0f,
250f
)
// Horizontal gradient Button
// Create a text and set its background to horizontalGradient that we created above
Text(
text = "Horizontal gradient",
style = typography.body2.copy(color = Color.White),
modifier = Modifier
.padding(12.dp)
.clickable(onClick = {})
.clip(RoundedCornerShape(4.dp))
.background(brush = horizontalGradient)
.padding(12.dp)
)
// Create variable verticalGradient and inside color property define top and bottom color
val verticalGradient = Brush.verticalGradient(
colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),
startY = 0f,
endY = 100f
)
// Vertical gradient Button
// Create a text and set its background to verticalGradient that we created above
Text(
text = "Vertical gradient",
style = typography.body1.copy(color = Color.White),
modifier = Modifier
.padding(12.dp)
.clickable(onClick = {})
.clip(RoundedCornerShape(4.dp))
.background(brush = verticalGradient)
.padding(12.dp)
)
}
}
// To see the preview annotate with @Preview to the function
@Preview
@Composable
fun DefaultPreview() {
JetpackComposePracticeTheme {
Column {
allButtons()
}
}
}
Producción:
