Docsity
Docsity

Prepara tus exámenes
Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity


Consigue puntos base para descargar
Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium


Orientación Universidad
Orientación Universidad


Componentes en Jetpack Compose, Ejercicios de Informática Móvil

Uso de Jetpack Compose para algunos componentes básicos en Android Studio. Original: Dr. Ricardo Armando Machorro Reyes

Tipo: Ejercicios

2024/2025

Subido el 02/03/2026

reyes-mandujano-angel-raul
reyes-mandujano-angel-raul 🇲🇽

1 documento

1 / 16

Toggle sidebar

Esta página no es visible en la vista previa

¡No te pierdas las partes importantes!

bg1
INSTITUTO POLITÉCNICO NACIONAL
UNIDAD PROFESIONAL INTERDISCIPLINARIA DE
INGENIERÍAS Y CIENCIAS SOCIALES Y
ADMINISTRATIVAS
Ingeniería En Informática
Programación Móvil
Componentes En Jetpack Compose
Dr. Machorro Reyes Ricardo
Reyes Mandujano Angel Raúl
2022601794
6NV61
24 de octubre de 2025
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff

Vista previa parcial del texto

¡Descarga Componentes en Jetpack Compose y más Ejercicios en PDF de Informática Móvil solo en Docsity!

INSTITUTO POLITÉCNICO NACIONAL

UNIDAD PROFESIONAL INTERDISCIPLINARIA DE

INGENIERÍAS Y CIENCIAS SOCIALES Y

ADMINISTRATIVAS

Ingeniería En Informática

Programación Móvil

Componentes En Jetpack Compose

Dr. Machorro Reyes Ricardo

Reyes Mandujano Angel Raúl

6 NV 61

24 de octubre de 2025

Contenido

  • Catalogo de Versiones (Modulo de App)
  • Recursos String
  • Recursos Drawable
  • Código Fuente
    • Componentes Básicos......................................................................................................................
    • Componentes Complementarios
    • MainActivity...................................................................................................................................
  • Ejecución
    • Componentes
    • App Bars
    • Drop Down Menu

Código Fuente

Componentes Básicos

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 ) } }

Componentes Complementarios

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() } ) } } }

MainActivity

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() } } } }

Drop Down Menu