Taller de

programación de
aplicaciones
Móviles
Profesor: Jorge Astorga
Taller de programación de aplicaciones móviles

PLANIFICACIÓN

1.TextView
2.EditText
3.String.xml
4.Button, ToggleButton, ImageButton
5.ImageView
6.Icono de la aplicación
7.RadioButton y Checkbox
8.ListView
Taller de programación de aplicaciones móviles

IMPORTANTE

• Implementar para todos los ejemplos siguientes el mismo

proyecto vacío llamado “CLASE_07_UI”
• Para cada componente utilizar una activity vacío Empty
Activity con el nombre del componente:

• Recordar dejar solo el primer Activity como launcher e ir

cambiando el principal según el que se quiera probar.
Taller de programación de aplicaciones móviles

TEXTVIEW

• Para mostrar información al usuario

• encontramos cuatro tipos:
• Plain TextView: texto plano o normal.
• Large Text: texto largo utilizado para títulos.
• Medium Text: texto mediano.
• Small Text: texto pequeño.
• Estas son las propiedades correspondientes
• android:textAppearance="?android:attr/textAppearanceLarge“
• android:textAppearance="?android:attr/textAppearanceMedium“
• android:textAppearance="?android:attr/textAppearanceSmall"
Taller de programación de aplicaciones móviles

TEXTVIEW - EJEMPLO
Taller de programación de aplicaciones móviles

EDITTEXT

• permite la edición y escritura de texto en Android Studio

• Con esta propiedad podemos agregar un mensaje de
ayuda para que sepa que escribibir en el campo
• android:hint=”Ingrese su nombre”
Taller de programación de aplicaciones móviles

EDITTEXT - EJEMPLO
Taller de programación de aplicaciones móviles

STRING.XML

• es el archivo donde se guardan las cadenas de texto de

nuestra app
• Si quisiéramos definir el mensaje “Hola estoy aquí”,
tendríamos que escribir el siguiente código:
<resources>
<string name="app_name">CLASE_07_UI</string>
<string name="mensaje">Hola estoy aquí</string>
</resources>
• Luego lo agregamos en el campo text de um editText
android:text="@string/mensaje"
Taller de programación de aplicaciones móviles

STRING.XML - EJEMPLO
Taller de programación de aplicaciones móviles

String.xml – traducciones

• para realizar la traducción haremos lo siguiente

• Entramos a nuestra activity
• En modo Design>
Taller de programación de aplicaciones móviles

String.xml – traducciones

• Seleccionamos
• Y agregamos la traducción al mensaje actual lo
dejamos como “Kiuvo”

• Se debiera mostrar un nuevo archivo string.xml

•
Taller de programación de aplicaciones móviles

BOTONES - EJEMPLO

• Los botones son los componentes más comunes

dentro de un entorno de desarrollo.
• disponemos de cuatro tipos de botones:
• button (botón común)
• toggle Button (botón activado)
• image button (botón con imagen)
Taller de programación de aplicaciones móviles

BOTONES - EJEMPLO
Taller de programación de aplicaciones móviles

IMAGENES

• Se agregan en la carpeta /res/drawable/

• Para agregar una imagen arrastrarla y soltarla en
la carpeta /res/drawable/imagen_vertical.jpg
• Seleccionamos un directorio de los mencionados
anteriormente
• aceptamos y la imagen se agregará a la carpeta
• Agregamos la imagen al ImageView con la
propiedad:
• app:srcCompat="@drawable/imagen_vertical"
Taller de programación de aplicaciones móviles

IMAGEVIEW - EJEMPLO
Taller de programación de aplicaciones móviles

ICONO DE LA APLICACIÓN

• el icono se va a utilizar en la tienda de

aplicaciones
• Los iconos se guardan en la carpeta res/mipmap
• Para agregar un icono, hacer clic derecho sobre
la carpeta res y selecciona New > Image
Asset>Path>Browse>
despertador.png>Next>Finish
• Ejecutar app para ver el cambio.
Taller de programación de aplicaciones móviles

RADIOBUTTON Y CHECKBOX

• se utilizan en programación para darle al usuario

la posibilidad de elegir entre una o varias
opciones.
• Si debe optar por una opción utilizaremos el
RadioButton dentro de un RadioGroup
• si el usuario puede elegir varias opciones utilizar
checkbox
• Con la selección de una opción usar la propiedad
• android:checked
Taller de programación de aplicaciones móviles

RADIOBUTTON Y CHECKBOX - EJEMPLO

Taller de programación de aplicaciones móviles

LISTVIEW

• se utilizan Para crear una lista

• tenemos que tener preparados los elementos
que mostraremos en la lista.
• usaremos strings.xml
Taller de programación de aplicaciones móviles

LISTVIEW - EJEMPLO
Taller de programación de aplicaciones móviles

Resumen

• Aprendimos sobre componentes para construir

nuestras interfaces gráficas
• Conocimos los componente y sus propiedades
principales.
• Aprendimos cambiar el icono de la aplicación y como
traducirla.
Taller de programación de aplicaciones móviles

TEST DE AUTOEVALUACIÓN

1. ¿Qué diferencia existe entre un EditText y un

TextView?
2. ¿Por que es importante realizar la traducción de
una app?
3. Por que para crear una lista se debe asociarla a
un array
Taller de programación de aplicaciones móviles

EJERCICIOS PRÁCTICOS 1

1. Cree un nuevo proyecto llamado “EJERCICIO_07_ui”

2. Utilizando un EditText y button construir una calculadora,
que sume, reste, multiplique y divida.
3. Realice una encuesta que solicite, nombre, apellido,
edad, fecha de nacimiento, sexo, idiomas y con un
ListView cargar la regiones de Chile para que se
seleccione.
4. Al hacer clic sobre un botón mostrar toda la información
ingresada y seleccionada en una segunda pantalla
usando solo un TextView