UNIVERSIDAD TECNOLOGICA DE EL SALVADOR

FACULTAD DE INFORMATICA Y CIENCIAS APLICADAS

ESCUELA DE INFORMATICA
GUÍA # 2

Asignatura: ETPS1 Ciclo: Tiempo:

Docente: Fecha:

Controles Android
Tema:

Introducción Teórica

Para crear un nuevo proyecto ejecutaremos Android Studio y desde la pantalla de

bienvenida pulsaremos la opción «Start a new Android Studio project» para iniciar el asistente
de creación de un nuevo proyecto.

Si ya habíamos abierto anteriormente Android Studio es posible que se abra directamente la

aplicación principal en vez de la pantalla de bienvenida. En ese caso accederemos al menú
«File / New project…» para crear el nuevo proyecto.

El asistente de creación del proyecto nos guiará por las distintas opciones de creación y
configuración de un nuevo proyecto Android.

En la primera pantalla del asistente elegiremos el tipo de actividad principal de la aplicación.

Entenderemos por ahora que una actividad es una “ventana” o “pantalla” de la aplicación. Para
empezar, seleccionaremos Empty Activity, que es el tipo más sencillo.

Universidad Tecnológica de El Salvador Página 1

En la siguiente pantalla indicaremos, por este orden, el nombre de la aplicación, el paquete java
para nuestras clases, y la ruta donde crear el proyecto. Para el segundo de los datos suele
utilizarse un valor del tipo domino.invertido.proyecto. En mi caso utilizaré por tanto
«sv.edu.usam.holausuario». En su caso puede utilizar cualquier otro valor. Adicionalmente
tendremos que indicar el lenguaje que utilizaremos para desarrollar (a partir de ahora utilizaré
siempre JAVA) y la API mínima (es decir, la versión mínima de Android) que soportará la
aplicación, nos centraremos en Android 8.0 como versión mínima (API 22). Por último, el check
de «Use legacy android.support libraries» lo dejaremos deshabilitado.

La versión mínima que seleccionemos en la pantalla anterior implicará que nuestra aplicación
se pueda ejecutar en más o menos dispositivos. De esta forma, cuanto menor sea ésta, a más
dispositivos podrá llegar nuestra aplicación, pero más complicado será conseguir que se ejecute
correctamente en todas las versiones de Android. Para hacernos una idea del número de
dispositivos que cubrimos con cada versión podemos pulsar sobre el enlace «Help me choose»,
que mostrará el porcentaje de dispositivos que ejecutan actualmente cada versión de Android.
Por ejemplo, en el momento de escribir este artículo, si seleccionamos como API mínima la 26
conseguiríamos cubrir un 60,8% de los dispositivos actuales. Como información adicional, si
pulsamos sobre cada versión de Android en esta pantalla podremos ver una lista de las
novedades introducidas por dicha versión.

Una vez configurado todo pulsamos el botón Finish y Android Studio creará por nosotros toda
la estructura del proyecto y los elementos indispensables que debe contener. Si todo va bien
aparecerá la pantalla principal de Android Studio con el nuevo proyecto creado.

Universidad Tecnológica de El Salvador Página 2

En la parte izquierda, podemos observar todos los elementos creados inicialmente para
el nuevo proyecto Android, sin embargo, por defecto los vemos de una forma un tanto peculiar
que inicialmente puede llevarnos a confusión. Para entender mejor la estructura del proyecto
vamos a cambiar momentáneamente la forma en la que Android Studio nos la muestra. Para
ello, pulsaremos sobre la lista desplegable situada en la parte superior izquierda, y cambiaremos
la vista de proyecto al modo «Project» (en cualquier momento podremos volver al modo
«Android» inicial).

Universidad Tecnológica de El Salvador Página 3

Tras hacer esto, la estructura del proyecto cambia un poco de aspecto y pasa a ser como se
observa en la siguiente imagen:

En los siguientes apartados describiremos los elementos principales de esta estructura.

Lo primero que debemos distinguir son los conceptos de proyecto y módulo. La
entidad proyecto es única, y engloba a todos los demás elementos. Dentro de un proyecto
podemos incluir varios módulos, que pueden representar aplicaciones distintas, versiones
diferentes de una misma aplicación, o distintos componentes de un sistema (aplicación móvil,
aplicación servidor, librerías, …). En la mayoría de los casos, trabajaremos con un proyecto que
contendrá un sólo módulo correspondiente a nuestra aplicación principal. Por ejemplo, en este
caso que estamos creando tenemos el proyecto «android-hola-usuario» que contiene un solo
módulo «app» que contendrá todo el software de la aplicación de ejemplo.

Universidad Tecnológica de El Salvador Página 4

A continuación, describiremos los contenidos principales de nuestro módulo principal.

Carpeta /app/src/main/java

Esta carpeta contendrá todo el código fuente de la aplicación, clases auxiliares, etc.
Inicialmente, Android Studio creará por nosotros el código básico de la pantalla
(actividad o activity) principal de la aplicación, que por defecto se llamará MainActivity, y
siempre bajo la estructura del paquete java definido durante la creación del proyecto.

Carpeta /app/src/main/res/
Contiene todos los ficheros de recursos necesarios para el proyecto: imágenes, layouts,
cadenas de texto, etc. Los diferentes tipos de recursos se pueden distribuir entre las
siguientes subcarpetas:

Carpeta Descripción

Contiene las imágenes y otros elementos gráficos usados por la

aplicación. Para poder definir diferentes recursos dependiendo de la
resolución y densidad de la pantalla del dispositivo se suele dividir en
varias subcarpetas:

/res/drawable/ * /drawable (recursos independientes de la densidad)

* /drawable-ldpi (densidad baja)
* /drawable-mdpi (densidad media)
* /drawable-hdpi (densidad alta)
* /drawable-xhdpi (densidad muy alta)
* /drawable-xxhdpi (densidad muy muy alta :)

Contiene los iconos de lanzamiento de la aplicación (el icono que

aparecerá en el menú de aplicaciones del dispositivo) para las distintas
densidades de pantalla existentes. Al igual que en el caso de las
carpetas /drawable, se dividirá en varias subcarpetas dependiendo de
la densidad de pantalla:
/res/mipmap/
* /mipmap-mdpi
* /mipmap-hdpi
* /mipmap-xhdpi
*…

Universidad Tecnológica de El Salvador Página 5

 Contiene los ficheros de definición XML de las diferentes pantallas de
la interfaz gráfica. Para definir distintos layouts dependiendo de la
orientación del dispositivo se puede dividir también en subcarpetas:
/res/layout/
* /layout (vertical)
* /layout-land (horizontal)

/res/anim/ Contienen la definición de las animaciones utilizadas por la

/res/animator/ aplicación.

Contiene ficheros XML de definición de listas de colores

/res/color/
según estado.

/res/menu/ Contiene la definición XML de los menús de la aplicación.

/res/xml/ Contiene otros ficheros XML de datos utilizados por la aplicación.

Contiene recursos adicionales, normalmente en formato distinto a

/res/raw/
XML, que no se incluyan en el resto de carpetas de recursos.

Contiene otros ficheros XML de recursos de la aplicación, como por

ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores
/res/values/
(colors.xml), arrays de valores (arrays.xml), tamaños (dimens.xml),
etc.

No todas estas carpetas tienen por qué aparecer en cada proyecto Android, tan sólo las que se
necesiten. Iremos viendo durante el curso qué tipo de elementos se pueden incluir en cada una
de ellas y cómo se utilizan.
Como ejemplo, para un proyecto nuevo Android como el que hemos creado, tendremos por
defecto los siguientes recursos para la aplicación:

Universidad Tecnológica de El Salvador Página 6

Como se puede observar, existen algunas carpetas en cuyo nombre se incluye un sufijo
adicional, como por ejemplo «drawable-v24«. Éstos, y otros sufijos, se emplean para definir
recursos independientes para determinados dispositivos según sus características. De esta
forma, por ejemplo, los recursos incluidos en la carpeta «drawable-v24» se aplicarían tan sólo
a dispositivos cuya versión de Android sea la 7.0 (API 24) o superior, o por ejemplo los incluidos
en una carpeta llamada “values-w820dp” se aplicarían sólo a pantallas con más de 820dp de
ancho. Al igual que estos sufijos «-w» y «–v» existen otros muchos para referirse a otras
características del terminal.
Entre los recursos creados por defecto cabe destacar los layouts, en nuestro caso sólo
tendremos por ahora el llamado “activity_main.xml”, que contienen la definición de la interfaz
gráfica de la pantalla principal de la aplicación. Si hacemos doble clic sobre este fichero Android
Studio nos mostrará esta interfaz en su editor gráfico, y como podremos comprobar, ¡en principio
contiene tan sólo una etiqueta de texto con el mensaje “Hello World!”.

Pulsando sobre los tres botones de la esquina superior derecha (resaltados en rojo en la imagen
anterior) podemos alternar entre el editor gráfico (tipo arrastrar-y-soltar), mostrado en la imagen
anterior, el editor de código XML, o una vista compartida que permita visualizar ambas cosas
de forma simultánea, como en la imagen siguiente:

Universidad Tecnológica de El Salvador Página 7

Durante el curso no utilizaremos demasiado el editor gráfico, sino que modificaremos la
interfaz de nuestras pantallas manipulando directamente su fichero XML asociado. Esto en
principio esto puede parecer mucho más complicado que utilizar el editor gráfico (no es nada
complicado en realidad), pero nos permitirá comprender mucho mejor los elementos que
componen la interfaz de nuestras aplicaciones.

Fichero /app/src/main/AndroidManifest.xml

Contiene la definición en XML de muchos de los aspectos principales de la aplicación, como

por ejemplo su identificación (nombre, icono, …), sus componentes (pantallas, servicios,
…), o los permisos necesarios para su ejecución. Veremos más adelante más detalles de
este fichero.

Fichero /app/build.gradle

Contiene información necesaria para la compilación del proyecto, por ejemplo, la versión del
SDK de Android utilizada para compilar, la mínima versión de Android que soportará la
aplicación, referencias a las librerías externas utilizadas, etc. Más adelante veremos también
más detalles de este fichero.

En un proyecto pueden existir varios ficheros build.gradle, para definir determinados

parámetros a distintos niveles. Por ejemplo, en nuestro proyecto podemos ver que existe un
fichero build.gradle a nivel de proyecto, y otro a nivel de módulo dentro de la carpeta /app. El
primero de ellos definirá parámetros globales a todos los módulos del proyecto, y el segundo
sólo tendrá efecto para cada módulo en particular.

Carpeta /app/libs

Puede contener las librerías externas que utilice nuestra aplicación. Normalmente no
incluiremos directamente aquí ninguna librería, sino que haremos referencia a ellas en el

Universidad Tecnológica de El Salvador Página 8

fichero build.gradle descrito en el punto anterior, de forma que entren en el proceso de
compilación de nuestra aplicación. Veremos algún ejemplo más adelante.
Y con esto todos los elementos principales de un proyecto Android. No pierdas de vista este
proyecto de ejemplo que hemos creado ya que lo utilizaremos en breve como base para crear
nuestra primera aplicación.

Procedimiento

Controles RadioGroup y RadioButton

El objetivo de este concepto es practicar la implementación de un programa que requiera
controles de tipo RadioButton para seleccionar una actividad. Aprenderemos como agrupar un
conjunto de RadioButton y verificar cual está seleccionado.

Crear un proyecto llamado Guia3_radio.

Problema:
Realizar la carga de dos números en controles de tipo EditText. Mostrar mensajes que
soliciten la carga de los valores dentro de los mismos EditText (propiedad hint). Disponer dos
controles de tipo RadioButton para seleccionar si queremos sumar o restar dichos valores.
Finalmente, mediante un control de tipo Button efectuamos la operación respectiva.
Mostramos el resultado en un TextView.

El problema es similar al anterior. Disponemos dos controles EditText (Number) y

configuramos sus propiedades id y hint. Para disponer los controles de tipo RadioButton
debemos en realidad primero insertar un control de tipo RadioGroup (este control se encuentra
en la paleta de componentes en la pestaña Buttons de la "Palette"):

Universidad Tecnológica de El Salvador Página 9

Ahora debemos arrastrar dos controles de la clase RadioButton de la pestaña "Buttons" dentro
del RadioGroup, la forma más sencilla es arratrar dichos objetos a la ventana "Component Tree"
en lugar de la vista de diseño:

Nuestro problema solo requiere dos controles de tipo RadioButton.

Ahora a los dos controles de tipo RadioButton definimos sus id (los llamaremos r1 y
r2 respectivamente)
Cambiamos sus propiedades text por los textos "sumar" y "restar".
No olvidemos también cambiar los id de los controles EditText por et1 y et2 (igual
que en el problema anterior)
Por último agreguemos un botón y un TextView para mostrar el resultado
Inicializamos las propiedades del botón con los valores:
id : button
text : operar

Y el TextView con los valores:

id : tv1
text : resultado

Podemos controlar en la ventana "Component Tree" el id definido para cada

control (et1, et2, grupo1, r1, r2, tv1)

Universidad Tecnológica de El Salvador Página 10

También podemos observar de que clase es cada control visual y el texto de la
propiedad text para aquellos controles que tienen sentido su inicialización.

Captura del evento clic del button e identificación del RadioButton

seleccionado.

El código fuente de la clase MaintActivity es:

Universidad Tecnológica de El Salvador Página 11

Primero debemos enlazar el objeto button con el método operar. Para esto similar
al problema anterior seleccionamos el control button y cambiamos la propiedad
onClick por el valor operar (si no hacemos esto nunca se ejecutará el método operar
de la clase MainActivity):

Como podemos ver el código fuente es igual al problema anterior. Tenemos dos
objetos más que debemos inicializar en el método onCreate:

r1=findViewById(R.id.r1);
r2=findViewById(R.id.r2);

Universidad Tecnológica de El Salvador Página 12

Las variables r1 y r2 son de la clase RadioButton y son necesarios en el método
operar para verificar cual de los dos RadioButton están seleccionados. La clase
RadioButton tiene un método llamado isChecked que retorna true si dicho elemento
está seleccionado:

Control CheckBox
El objetivo de este concepto es seguir practicando lo visto hasta ahora para la
creación de un proyecto con Android Studio e incorporar el control visual CheckBox
Crear un proyecto llamado Guia3_Checkbox.

Problema:

Realizar la carga de dos números en controles de tipo EditText ("Number"). Mostrar

en las propiedades "hint" de cada componente un mensaje que solicite la carga de
los valores. Disponer dos controles de tipo CheckBox para seleccionar si queremos
sumar y/o restar dichos valores. Finalmente mediante un control de tipo Button
efectuamos la operación respectiva. Mostramos el o los resultados en un TextView.
Lo nuevo en este problema es la inserción de dos objetos de la clase CheckBox que
se encuentra en la pestaña "Buttons":

Universidad Tecnológica de El Salvador Página 13

Debemos iniciar las propiedades "text" para mostrar un texto y la propiedad "id" para
poder hacer referencia al CheckBox en el programa java.
El primer CheckBox definimos su "id" con el valor check1 y el segundo con el valor
check2.
Luego la interfaz gráfica final para este problema y los nombres de los controles o
componentes visuales los podemos ver en la ventana "Component Tree":

Universidad Tecnológica de El Salvador Página 14

Controlar que fijamos los valores de las propiedades "id" de cada objeto: et1, et2,
check1, check2 y tv1.
No olvidemos inicializar la propiedad onClick del objeto button con el valor "operar"
(es el nombre del método a ejecutarse cuando se presione el botón y lo implementa
la clase que hacemos)
Código fuente:

Universidad Tecnológica de El Salvador Página 15

Definimos dos objetos de la clase CheckBox como atributos de la clase:
private CheckBox check1,check2;
En el método onCreate los inicializamos con los objetos definidos en el archivo XML:

En el método operar debemos definir dos if a la misma altura ya que

los dos controles de tipo CheckBox pueden estar seleccionados
simultáneamente. Definimos una variable de tipo String y la
inicializamos con cadena vacía para el caso en que los dos CheckBox
no estén seleccionados:

Cuando ejecutamos el programa en el emulador tenemos como

resultado:

Universidad Tecnológica de El Salvador Página 16

 UNIVERSIDAD TECNOLÓGICA DE EL SALVADOR
FACULTAD DE INFORMATICA Y CIENCIAS APLICADAS
ESCUELA DE INFORMATICA
Conclusiones PC No._____ Fecha: _____________

Nombres: _______________________________________ Carnet: _____________

Asignatura: GUÍA # 2 NOTA:

_____

Instrucciones

• La guía se desarrollará en forma individual, copia o trabajos similares con la misma id de compilación anulará la
presente.

• La entrega se realizará en la carpeta compartida

• Desarrollar los ejemplos y esta actividad de trabajo y guardar en una sola carpeta rotulada con su numero de
carnet y el texto “operaciones”. Ej. 2510342008-operaciones

• NO SE RECIBIRAN trabajo en el correo electrónico o Microsoft Teams.

• Fecha establecida como cierre será respetada

• Se entregarán en su carpeta los siguientes archivos:

o Proyectos desarrollados

o Un documento con los siguientes elementos:

▪ Portada como el encabezado de esta misma página

▪ Código desarrollado por Layout

▪ Captura de pantalla de cada ejercicio desarrollado funcionando (en la captura se debe ver
todo su equipo incluso barra de tareas)

Evaluación

• Declara un String que contenga tu nombre, después muestra un mensaje de bienvenida

por consola. Por ejemplo: si introduzco “Roberto”, me aparezca “Bienvenido Roberto”,
utilizar TextView para mostrar el resultado.

• Crear una pantalla de bienvenida que muestre el saludo de bienvenida y botones para
navegar hacia las demás pantallas solicitadas

• Crear una aplicación que leerá un número solicitando el precio de un producto (puede
tener decimales) y calcule el precio final con IVA. El IVA será una constante del 13.4%”,
utilizar TextView para mostrar el resultado.

Universidad Tecnológica de El Salvador Página 17

 • Crea un Layaout llamada CalculadoraPolacaInversaApp, nos pedirá 2 operandos (int) y
un signo aritmético (String), según este último se realizará la operación correspondiente.
Al final mostrara el resultado en un TextView.

Los signos aritméticos disponibles son:

• +: suma los dos operandos.

• -: resta los operandos.

• *: multiplica los operandos.

• /: divide los operandos, este debe dar un resultado con decimales (double)

• Escribe un programa que declare una variable entera N y asígnale un valor. A

continuación, escribe las instrucciones que realicen los siguientes:

• Incrementar N en 77.

• Decrementarla en 3.

• Duplicar su valor.

Si por ejemplo N = 1 la salida del programa será:

Valor inicial de N = 1

• N + 77 = 78

• N - 3 = 75

• N * 2 = 150

Universidad Tecnológica de El Salvador Página 18