En Android, los botones son el elemento de interfaz de usuario más básico y de uso más frecuente que permite a los usuarios llamar a una función o iniciar una tarea desde el contexto de la aplicación. Se proporciona al usuario para dar entrada a la aplicación con la ayuda de un clic. Estos botones son en gran medida personalizables y los atributos visuales se pueden modificar según el tema de la aplicación.
En este artículo, le mostraremos cómo puede crear un botón circular con un ícono en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo 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
package com.geeksforgeeks.circularbutton
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Calling the composable function
// to display element and its contents
MainContent()
}
}
}
// Creating a composable
// function to display Top Bar
@Composable
fun MainContent(){
Scaffold(
topBar = {TopAppBar(
title = {Text(
"GFG | Circular Button",
color = Color.White)},
backgroundColor = Color(0xff0f9d58)
) },
content = { MyContent()}
)
}
// Creating a Composable function to create
// a Circular Button with an Icon inside it
// Calling this function as content in the above function
@Composable
fun MyContent(){
// Fetching the local context
val mContext = LocalContext.current
Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
// Creating an Outlined Button and setting
// the shape attribute to CircleShape
// When the Button is clicked, a Toast
// message would be displayed
OutlinedButton(onClick = { Toast.makeText(mContext, "This is a Circular Button with a + Icon", Toast.LENGTH_LONG).show()},
modifier= Modifier.size(100.dp),
shape = CircleShape,
border= BorderStroke(5.dp, Color(0XFF0F9D58)),
contentPadding = PaddingValues(0.dp),
colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
) {
// Adding an Icon "Add" inside the Button
Icon(Icons.Default.Add ,contentDescription = "content description", tint=Color(0XFF0F9D58))
}
}
}
// For displaying preview in the
// Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainContent()
}
Producción:
Cuando ejecuta la aplicación, puede ver que aparece un botón circular con un icono ‘+’ dentro.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA