En Android, Button es un elemento de interfaz de usuario muy común que se usa para llamar a una función o realizar una tarea cuando el usuario hace clic en ella. Un botón por defecto ocupa un espacio específico dependiendo del texto que muestra. Si el texto del botón es más largo o tiene un tamaño de fuente más grande, el ancho y la altura del botón aumentan. De manera similar, si el texto del botón es más pequeño o tiene un tamaño de fuente más pequeño, el ancho y la altura del botón disminuyen. Sin embargo, podemos establecer un ancho y una altura predefinidos en un botón, independientemente de los atributos del texto.
Entonces, en este artículo, le mostraremos cómo puede cambiar el tamaño del botón en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
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.changebuttonsize
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.geeksforgeeks.changebuttonsize.ui.theme.ChangeButtonSizeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Calling the composable function
// to display the elements and the content
MainContent()
}
}
}
// Creating a composable
// function to display the Top bar
@Composable
fun MainContent(){
Scaffold(
topBar = {TopAppBar(
title = {Text(
"GFG | Change Button Size",
color = Color.White)},
backgroundColor = Color(0xff0f9d58)
) },
content = { MyContent()}
)
}
// Creating a composable function to
// display three buttons of different sizes.
// This function is called in the
// content of the above function
@Composable
fun MyContent(){
// Creating a normal button at a margin of 100dp from the top
Column(Modifier.fillMaxWidth().absolutePadding(10.dp, 100.dp, 10.dp, 0.dp), horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = { /*TODO*/ },
colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
) {
Text("Regular Button", color = Color.White)
}
}
// Creating a Bigger button with height and width as 100dp and 200dp,
// font size as 30sp, at a margin of 200dp from the top
Column(Modifier.fillMaxWidth().absolutePadding(10.dp, 200.dp, 10.dp, 0.dp), horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = { /*TODO*/ },
colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
modifier = Modifier.height(100.dp).width(200.dp)
) {
Text("Big Button", color = Color.White, fontSize = 30.sp)
}
}
// Creating a Smaller button with height and width as 30dp and 100dp,
// font size as 7sp, at a margin of 350dp from the top
Column(Modifier.fillMaxWidth().absolutePadding(10.dp, 350.dp, 10.dp, 0.dp), horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = { /*TODO*/ },
colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
modifier = Modifier.height(30.dp).width(100.dp)
) {
Text("Small Button", color = Color.White, fontSize = 7.sp)
}
}
}
// Displaying the preview in the
// Android Studio IDE Real time emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainContent()
}
Producción:
Cuando ejecute la aplicación, verá tres botones de diferentes tamaños fijos como se muestra en la imagen a continuación.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA