









Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Uso de Jetpack Compose para algunos componentes básicos en Android Studio. Original: Dr. Ricardo Armando Machorro Reyes
Tipo: Ejercicios
1 / 16
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!










package com.areyesm.componente import android.util.Log import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape. CircleShape import androidx.compose.foundation.text.input.InputTransformation.Companion.keyb oardOptions import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Card import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.material3.TextField import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shadow import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled. Clear import androidx.compose.material.icons.filled. Close import androidx.compose.material.icons.filled. Done import androidx.compose.material.icons.filled. Settings import androidx.compose.material.icons.filled. ShoppingCart import androidx.compose.material.icons.filled. Visibility import androidx.compose.material.icons.filled. VisibilityOff import androidx.compose.material3.AssistChip import androidx.compose.material3.AssistChipDefaults import androidx.compose.material3.Badge import androidx.compose.material3.BadgedBox import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Checkbox import androidx.compose.material3.FilterChip import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.OutlinedButton import androidx.compose.material3.SuggestionChip import androidx.compose.material3.Switch import androidx.compose.material3.TextButton import androidx.compose.ui.Alignment import androidx.compose.ui.draw.BlurredEdgeTreatment import androidx.compose.ui.draw.blur import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics. contentDescription import androidx.compose.ui.semantics.semantics import com.areyesm.componentes.R @Composable fun Componentes() { Card(modifier = Modifier
. fillMaxSize () . padding ( 18. dp ) . verticalScroll (rememberScrollState())) { NewTextView() CustomDivider() NewTextField() NewTextFieldOutlined() CustomDivider() NewImageView() CustomDivider() NewChip() CustomDivider() NewButton() CustomDivider() NewBadge() CustomDivider() NewChecks() CustomDivider() NewTextView() CustomDivider()
Icon(imageVector = Icons.Filled. ShoppingCart , contentDescription = "Cart") } } } } @Composable fun NewButton() { Row(horizontalArrangement = Arrangement.spacedBy( 16. dp )) { Button(onClick = {} ) { Text("Finish") } Button(onClick = { /TODO/ } ) { Icon(imageVector = Icons.Filled. Close , null, modifier = Modifier. size (ButtonDefaults.IconSize) ) Spacer(modifier = Modifier. size (ButtonDefaults.IconSpacing)) Text("Send") } OutlinedButton(onClick = { /TODO/ } ) { Text("Back") } TextButton(onClick = { /TODO/ } ) { Text("Exit") } } } @Composable fun NewChip() { Row(horizontalArrangement = Arrangement.spacedBy( 8. dp )) { SuggestionChip( onClick = { Log.d("SuggestionChip", "hello world") } , label = { Text("Suggestion Chip") } ) AssistChip( onClick = { Log.d("AssistChip", "Hola Mundo") } , label = { Text("Assist Chip") } , leadingIcon = { Icon( imageVector = Icons.Filled. Settings , contentDescription = "Localized description", modifier = Modifier. size (AssistChipDefaults.IconSize) ) } ) var selected by remember { mutableStateOf (false) } FilterChip( onClick = { selected = !selected } , label = { Text("Filter Chip") } , selected = selected, leadingIcon = if (selected) { { Icon( imageVector = Icons.Filled. Done , contentDescription = "Done icon", modifier = Modifier. size (FilterChipDefaults.IconSize) ) }
} else null ) //InputChipExample(text = "Nombre") {} } } @Composable fun NewImageView() { Row(horizontalArrangement = Arrangement.spacedBy( 28. dp )) { Image( painter = painterResource(R.drawable. upiicsa ), contentDescription = "Escudo", modifier = Modifier
. size ( 80. dp ) . clip ( CircleShape ) ) Image( painter = painterResource(R.drawable. upiicsa ), contentDescription = "Escudo", contentScale = ContentScale.Crop, modifier = Modifier . size ( 80. dp ) . aspectRatio (4F / 3F) ) Image( painter = painterResource(R.drawable. upiicsa ), contentDescription = "Escudo", modifier = Modifier . size ( 80. dp ) //.blur(radius = 8.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded) . blur (radius = 8. dp , edgeTreatment = BlurredEdgeTreatment( CircleShape )) ///.blur(radius = 8.dp, edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))) ) } } @Composable fun NewTextFieldOutlined() { var textValue by remember { mutableStateOf ("") } OutlinedTextField( value = textValue, onValueChange = { textValue = it } , label = { Text(text = stringResource(R.string. ciclo )) } , modifier = Modifier. fillMaxWidth () ) var passwordValue by remember { mutableStateOf ("") } OutlinedTextField( value = passwordValue, onValueChange = { passwordValue = it } , label = { Text(text = "Contraseña") } , visualTransformation = PasswordVisualTransformation(), trailingIcon = { if(passwordValue. isNotEmpty ()) { Icon(
var textValue by remember { mutableStateOf ("Hi") } TextField( value = textValue, onValueChange = { textValue = it } , label = { Text(text = "Escribe algo") } , modifier = Modifier. fillMaxWidth () ) } @Composable fun CustomDivider() { Spacer(modifier = Modifier. height ( 8. dp )) HorizontalDivider(Modifier. fillMaxWidth ()) Spacer(modifier = Modifier. height ( 16. dp )) } @Composable fun NewTextView() { Column { Text( text = "Jetpack Compose", color = Color.DarkGray, fontSize = 28. sp , fontStyle = FontStyle.Italic, fontWeight = FontWeight.Bold, style = TextStyle( shadow = Shadow( color = Color.Magenta, offset = Offset (2F, 2F), blurRadius = 4F ) ) ) Text( text = "The best Jetpack Compose Course Dispositivos Moviles by the Dr. Ricardo Armando M.R. All Reserved 2025", style = MaterialTheme.typography.bodyLarge, maxLines = 2 , overflow = TextOverflow.Ellipsis ) Text(text = buildAnnotatedString { withStyle ( style = SpanStyle( fontWeight = FontWeight.ExtraBold, fontStyle = FontStyle.Italic, fontSize = 18. sp ) ) { append("Batman") } append(", Bruce Wayne") } ) Text( text = "Let's go to the next one", modifier = Modifier. fillMaxWidth (), textAlign = TextAlign.Center,
style = MaterialTheme.typography.bodySmall ) } }
package com.areyesm.componentes import android.widget.Toast import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled. Add import androidx.compose.material.icons.filled. MoreVert import androidx.compose.material3.BottomAppBar import androidx.compose.material3.CenterAlignedTopAppBar import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults.topAppBarColors import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform. LocalContext import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import kotlin.math.exp @OptIn(ExperimentalMaterial3Api::class) @Composable fun NewAppBars() { var intentos by remember { mutableStateOf ( 0 ) } Scaffold( topBar = { CenterAlignedTopAppBar( colors = topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer,
DropdownMenu( expanded = expanded, onDismissRequest = { expanded = false } ) { DropdownMenuItem( text = { Text("Load") } , onClick = { Toast.makeText(context, "Load", Toast. LENGTH_SHORT ).show() } ) DropdownMenuItem( text = { Text("Save") } , onClick = { Toast.makeText(context, "Save", Toast. LENGTH_SHORT ).show() } ) DropdownMenuItem( text = { Text("Load") } , onClick = { Toast.makeText(context, "Load", Toast. LENGTH_SHORT ).show() } ) DropdownMenuItem( text = { Text("Save") } , onClick = { Toast.makeText(context, "Save", Toast. LENGTH_SHORT ).show() } ) } } }
package com.areyesm.componentes import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import com.areyesm.componentes.ui.theme.ComponentesTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge () setContent { ComponentesTheme { //Componentes() //NewAppBars() NewDropDownMenu() } } } }