Dam M08 T02 PDF

TEM
A
Tema 2. Programación de aplicaciones para dispositivos
móviles
Autoría: Josep Maria Herrera

Tema 2: Programación de aplicaciones para
dispositivos móviles
¿Qué aprenderás?
• Crear proyectos en Android Studio y construir aplicaciones móviles.
• Usar recursos de tipo layout que permiten separar la capa de
presentación de la capa lógica.
• Distinguir entre los distintos tipos de almacenamiento y elegir el más
adecuado en cada situación.
• Utilizar distintas clases para establecer comunicaciones a través de
Internet con servidores de datos externos.
¿Sabías que…?
• Un layout es un contenedor pensado para controlar la distribución,
posición y tamaño de elementos gráficos que se colocan en su
interior.
• Los widgets o elementos gráficos se utilizan para crear una interfaz
gráfica que permita interactuar con el usuario, recogiendo datos y
mostrando información en la pantalla del dispositivo.
Programación multimedia y dispositivos móviles
Tema 2: Programación de aplicaciones para dispositivos móviles
2.1. Herramientas de programación

El primer paso para programar aplicaciones para dispositivos móviles que utilizan el sistema
operativo Android es instalar el Android SDK (Software Development Kit) y preparar el entorno de
desarrollo por primera vez.
Android Studio se ha convertido en el entorno de desarrollo integrado (IDE) oficial para el desarrollo
de aplicaciones para Android. Consta de un editor de código y diferentes herramientas para
desarrolladores pensadas para aumentar la productividad, un sistema de ayuda para la construcción
de interfaces gráficas de usuario (GUI), un editor de texto, un compilador y un depurador. Además,
entre sus características destacan:
1. Un entorno unificado donde es posible desarrollar para todos los dispositivos

Android.
2. Un sistema de compilación flexible basado en Gradle, herramienta que permite
automatizar la creación de proyectos.
3. Un emulador rápido con múltiples opciones.
4. Funcionalidad para insertar cambios en el código y los recursos de la aplicación en
ejecución sin reiniciar la aplicación.
5. Integración con GitHub.
6. Herramientas para identificar problemas de rendimiento, usabilidad y
compatibilidad de versiones.
7. Funcionalidades que facilitan la integración con otras herramientas Google, como
por ejemplo Google Cloud Messaging y App Engine.
2
2.2. Partes del Android Studio

Nada más abrir el Android Studio nos encontramos un entorno como el siguiente.
En él nos encontramos muchas funcionalidades.

En esta sección se tratará de realizar una visión genérica de los componentes que más vamos a
utilizar.
3
2.2.1. Project
Un proyecto de Android Studio incluye uno o más módulos con archivos de código fuente y
archivos de recursos.
Básicamente encontramos dos secciones:
• Aplicación, en donde están los principales componentes que definen mi proyecto.

• Gradle, en donde está la configuración del contructor (build), es decir del que me
generará el APK.
4
App
Por defecto, los archivos del proyecto se muestran en la vista de proyecto de Android, facilitando
el rápido acceso a los archivos del proyecto. En la siguiente imagen se puede ver las diferentes
posibles vistas de los ficheros/carpetas del proyecto.
La estructura típica de un proyecto contiene las siguientes carpetas:

• Carpeta manifests: contiene el archivo AndroidManifest.xml que contiene
información sobre la configuración del proyecto (número de versión, nombre de la
Actividad principal, permisos que requiere la aplicación, etcétera).
• Carpeta java: contiene los archivos de código fuente Java, incluido el código de
prueba de JUnit.
• Carpeta res: contiene todos los recursos sin código, como diseños XML, strings de IU
e imágenes de mapa de bits.
• Drawable: contiene los gif, jpg,…
• Layout: donde se localizan las vistas
• Mipmap: se encuentra el icono de nuestra aplicación. Aquí vemos que tenemos
un ic_launcher y después un ic_louncher_round porque en Android 7 es donde
necesitamos iconos redondos. En las versiones anteriores con nuestro icono
normal basta.
• Values:
§ Color
§ String
§ Styles
5
Gradle
A parte de la carpeta de aplicación del proyecto, Android Studio usa Gradle como base del sistema
de compilación. El archivo de compilación de Android Studio tiene el nombre build.gradle. Es un
archivo de texto que utiliza la sintaxis Groovy para configurar la compilación del proyecto, buscar
las dependencias y hacer que estén disponibles en tu compilación.
6
Dentro del Build.Gradle (Module) nos podemos encontrar, entre otros, los siguientes parámetros:
• compileSdkVersion: versión de SDK que usa para compilar.

• minSdkVersion: SDK mínimo compatible.
• targetSdkVersion: SDK máximo compatible.
• buildTypes: información de la reléase o firmar una aplicación u optimizarla para que
ocupe menos espacio.
• dependencies.
2.2.2. Ejecución
Android Studio también dispone de herramientas de ejecución y depuración que permiten revisar
el código en la vista del depurador y verificar referencias, expresiones y valores de variables.
2.2.3. Editor
El editor es la sección del IDE donde más usaremos ya que en ella modificaremos básicamente dos
tipos de ficheros:
• XML, en donde nos podemos encontrar:

• Configuraciones
o Manifest
o String
o …
• Layout o diseño
• Java o kotlin, dependiendo del lenguaje de programación escogido.
7
Manifest
Java
8
Layout
Es donde vamos a diseñar el entorno gráfico de nuestra aplicación.
Posee básicamente tres modos de diseño para trabajar con él:
• Code: se trata de trabajar directamente con código XML.

• Split: es una mezcla de los otros dos modos.
• Design: consiste en realizar el diseño de la seguridad, el rendimiento,aplicación usando
un entorno más gráfico.
2.2.4. Trazas
Abajo del IDE nos podemos encontrar la sección de trazas que nos será realmente útiles para
solucionar errores.
Las 4 tipologías de trazas que nos podemos encontrar son:
• Errores de compilación
• Errores de construcción (build)
• Errores de instalación (run)
• Errores de ejecución (crash)
9
A continuación, se puede apreciar dónde localizar cada una de estas trazas:
Compilación
Construcción / Build
Instalación / run / deploy
10
Ejecución / crash
Trazas controladas y uso del filtro en las trazas. Además de las trazas debido a errores, también
podemos usar la sección de “logcat” para enviar mensajes del programador por consola y, de esta
forma, poder averiguar que sucede dentro del código sin necesidad de usar el debug, muy útil en
elementos como los hilos / threads.
Para lograrlo se ha de usar el siguiente comando:

Log.d("MiTag", "Branch created ");
Donde el primer parámetro (“MiTag” en este caso) es el Tag que usaremos en el filtro del “logcat”
y el segundo parámetro es el texto que queremos que aparezca por consola.
En la siguiente imagen se puede ver un ejemplo de cómo realizar la búsqueda del filtro “MiTag”:
Hay que comentar que en esta imagen no hay ningún emulador seleccionado y no aparece
ninguna traza.
11
2.2.5. Opciones de menú
En la parte del menú existen muchas opciones con las que, poco a poco, nos iremos
familiarizando. Intentar explicarlas todas ahora no posee demasiado sentido.
12
2.3. Creación de un nuevo proyecto

El siguiente video explica el proceso de creación de un proyecto y los primeros pasos en Android
Studio:
Video: Primeros pasos en Android Studio
2.3.1. Ejecutable Android
Una vez tenemos el proyecto acabado el Gradle se encarga de generar el ejecutable para ser
instalado en el emulador o en el móvil físico.
El Gradle realiza la construcción (build) y genera el APK (fichero ejecutable en el sistema Android),
una vez creado dicho ejecutable, se instala en el móvil y a esta acción se le llama deploy
(desplegar).
En Apple el ejecutable es el IPA.
13
2.3.2. Errores conocidos
Una vez tenemos el proyecto acabado, el Gradle se encarga de generar el ejecutable para ser
instalado y ejecutado en el emulador.
La primera recomendación si usamos el emulador de Android Studio es limpiar la cache cada vez
que abrimos el emulador por primera vez. Hay muchos errores provocados por este motivo. Para
ello tenemos que abrir el AVD manager y realizar un Wipe Data.
Para acceder al AVD manager tenemos varias formas.

Desde el menú:
Desde los botones de acceso rápido en la parte superior del Android Studio:
Desde el desplegable de los emuladores:
14
Una vez abierto el AVD manager desplegamos la flecha abajo y seleccionamos el “Wipe Data” para
limpiar el emulador. Si había APK ya instaladas desaparecerán, si había fotos, música o videos
añadidos también se borrarán.
2.3.3. Error Gradle Plugin vs Gradle version
Si al ejecutar el programa os aparece un error como el siguiente:

* What went wrong:
Execution failed for task ':app:compressDebugAssets'.
> A failure occurred while executing
com.android.build.gradle.internal.tasks.CompressAssetsWorkAction
> D:\EjerciciosAndroid\Prova2\app\build\intermediates\merged_assets\debug\out
Podría ser debido a la diferencia entre la versión del Plugin de Gradle instalado en el Android
Studio y la versión del Gradle que disponemos en nuestro ordenador.
Para modificarlo tenemos que irnos al “Project Structure”:
15
Y modificar las versiones del Plugin de Gradle y/o del Gradle para que sean compatibles.
A modo ejemplo en la versión del 2020 tuve que modificar la versión que tenía:
Y al cambiar a esta configuración se solucionó el problema:
Como referencia de compatibilidad de versiones nos tenemos que ir a la siguiente página oficial de
Android.
https://developer.android.com/studio/releases/gradle-plugin?hl=es-419
En el 2021 la combinación que no me dio errores fue:
16
2.4. Cómo importar los proyectos proporcionados

Para poder probar los programas proporcionados en el curso se han de seguir los siguientes pasos:
• Crear un proyecto nuevo en Android Studio.

• Localizar el directorio del proyecto (esto se define al crear el proyecto).
• Ir al subdirectorio “app\src\main”.
• Eliminar todo el contenido: AndroidManifest.xml, directorio Java y directorio res.
• Copiar los nuevos tres elementos previamente eliminados.
17
2.5. Ejecución en modo depuración (debug)

A la hora de detectar mejor los errores es altamente recomendable usar el modo debug.
Para ello tenemos que colocar “breakpoints”.
Y ejecutarlo en modo debug:
18
Os paso video con explicación del uso del modo debug:
19
2.6. Componentes básicos de una aplicación Android

Los componentes de una aplicación Android son los bloques esenciales que, combinados entre sí,
sirven para construir una aplicación. Estos componentes son además el punto de entrada a la
aplicación y son los siguientes:
• Actividades
• Fragmentos
• Servicios
• Proveedores de contenidos
• Receptores de emisiones
• Intents
Para mejorar el rendimiento del emulador, si nuestro microprocesador es compatible, se

recomienda instalar el Intel® Hardware Accelerated Execution Manager siguiendo las instrucciones
del siguiente enlace: Intel HAXM.
2.6.1. Actividades
Una Actividad (de la clase Activity) es cada una de las "pantallas" de una aplicación. Una definición
más técnica, podría ser cada uno de los componentes de la aplicación que proveen al usuario una
pantalla con la que puede interactuar.
Por ejemplo, una aplicación de mensajería instantánea puede tener una actividad que muestre la
lista de contactos, otra para enviar mensajes y otra para leer mensajes recibidos. Si bien estas tres
actividades trabajan juntas dentro de la aplicación de mensajería, cada una de ellas es
independiente de las otras.
20
En Android, las aplicaciones pueden llamar a actividades de otras aplicaciones. Por ejemplo, la
aplicación de mensajería anterior podría abrir una actividad de la aplicación de fotografía para
enviar una foto junto con un mensaje. Del mismo modo, la aplicación de fotografía podría abrir la
actividad de una aplicación de correo electrónico para enviar la foto como adjunto de un correo.
Imagen. Actividades.
2.6.2. Fragmentos
Un fragmento es una porción de una actividad. Podremos tener varios fragmentos y modificarlos
durante la ejecución de la aplicación con el fin de combinarlos según las necesidades.
Los Fragmentos aparecieron por primera vez en la versión de Android 3.0 Honeycomb, una versión
de Android exclusiva para tabletas. Las mayores dimensiones de las pantallas en las tabletas
permiten mostrar más información que en un teléfono móvil y por tanto los Fragmentos fueron la
manera de poder combinar varias pantallas de información en una sola.
21
Imagen. Fragmentos.
2.6.3. Servicios
Un Servicio es un componente que se ejecuta en el segundo plano para realizar tareas para
trabajos remotos. Los servicios se ejecutan como cualquier otra aplicación, pero no tienen
componentes de interfaz de usuario. Son útiles para realizar tareas durante un tiempo
determinado como por ejemplo puede tomar datos del receptor GPS del teléfono.
Un servicio puede haber sido iniciado por otro componente, como por ejemplo una actividad, y
continúan en ejecución independientemente del componente que haya hecho la llamada.
El ciclo de vida de un Servicio es más sencillo que el de una Actividad y se implementa como clase
derivada de la clase Service.
Imagen. Servicio.
22
2.6.4. Proveedores de contenidos
Un Proveedor de contenidos (Content Provider) es una interfaz destinada a compartir datos entre
las aplicaciones. Por defecto, Android ejecuta las aplicaciones de forma independiente, por lo que
los datos de la aplicación están aislados del resto de aplicaciones del sistema. Si bien se pueden
traspasar pequeñas cantidades de información entre las aplicaciones a través de los intentos
(Intents), los Proveedores de contenidos están pensados para compartir un mayor volumen de
datos entre aplicaciones.
La información que se comparte se puede insertar, actualizar, borrar y consultar. Por ejemplo, el
Proveedor de contenidos de los Contactos proporciona la información de los contactos del
teléfono a las diferentes aplicaciones. De este modo, una aplicación como WhatsApp que posea
los permisos adecuados puede consultar los Contactos para leer y escribir información. Otro
ejemplo: el Almacén de Medios se encarga de almacenar y servir diferentes tipos de datos para
compartir, como fotos y música, entre las diferentes aplicaciones.
Un Proveedor de contenidos también puede ser útil en el caso de necesitar leer y escribir datos
que son privados y no están compartidos. Por ejemplo, una aplicación de tipo editor de texto
podría usar un Proveedor de contenidos para guardar notas.
Por otro lado, la separación entre el Almacén de Datos y la interfaz de usuario proporciona mucha
flexibilidad a Android. Por ejemplo, se podría instalar una aplicación alternativa para ver los
contactos, o una aplicación podría acceder desde el escritorio a algunos de los datos de
configuración del sistema (que también están almacenados en un proveedor de contenidos) para
modificar algunas funcionalidades, como la de activar y desactivar el WiFi. Los Proveedores de
contenidos tienen interfaces sencillas con métodos para insertar, actualizar, borrar y consultar la
información, de manera parecida a los métodos de acceso a bases de datos.
Un Proveedor de contenidos está implementado como una subclase de ContentProvider y debe

implementar una API que permita a otras aplicaciones interactuar.
23
Imagen. Proveedores de contenido.
2.6.5. Receptores de emisiones
Los Receptores de emisiones (Broadcast Rreceivers) son un tipo de componente que responde a
mensajes del sistema dirigidos a todas las aplicaciones del dispositivo. Podríamos considerarlo
como una especie de sistema de suscripción de eventos en Android, es decir, el receptor
simplemente se queda en estado latente esperando a activarse cuando ocurra un evento al que
está suscrito.
El sistema Android está emitiendo mensajes constantemente. Por ejemplo, cuando se recibe una
llamada, se apaga la pantalla o bien la batería tiene un nivel de carga bajo. Todos estos eventos
son controlados y emitidos por el sistema. Por su parte, también las aplicaciones pueden emitir
mensajes, por ejemplo, cuando una aplicación anuncia que se han terminado de descargar algunos
datos y que éstos ya están disponibles para ser usados.
Los Receptores de emisiones no tienen una interfaz visual, pero cuando se lanzan ejecutan una
parte de código (como poner en marcha una actividad o servicio) y pueden crear una notificación
en la barra de estado para alertar al usuario cuando ha ocurrido un evento.
Un Receptor de emisiones se implementa como una subclase de BroadcastReceiver y cada

mensaje que emite se envía como un objeto de la clase Intent.
24
Imagen. Receptores de emisiones.
2.6.6. Intents
La mayor parte de los componentes de las aplicaciones que acabamos de ver se comunican a
través de mensajes asíncronos llamados Intents. Estos mensajes se crean como objetos de la clase
Intent y su comportamiento depende del componente que lo utiliza.
En las Actividades y Servicios, un intent define una acción a realizar (por ejemplo, "ver" o "enviar"
algo) y puede especificar la URI de los datos sobre las que se debe actuar. Por ejemplo, un intent
puede enviar una petición de abrir una página web y especificar la dirección de la web, para que la
actividad correspondiente pueda abrir la página correctamente.
En otros casos se puede comenzar una actividad y esperar a recibir un resultado. Por ejemplo, se
podría iniciar una actividad para seleccionar una persona de la agenda de contactos del teléfono y
la actividad devolvería el resultado en un intent (éste incluiría la URI apuntando al contacto
seleccionado).
En el caso de los Receptores de emisiones, un intent simplemente define el mensaje que se está
emitiendo; por ejemplo, un mensaje para indicar que el nivel de batería del dispositivo es bajo
incluiría únicamente una cadena de texto con un mensaje.
25
2.7. Layouts
Los Layouts son la parte gráfica de Android Studio. El formato que poseen es XML. Se encuentran
en la sección de recursos del proyecto.
Podemos crear nuevos layouts situándonos sobre el item “layout” y apretar botón derecho, luego
new / “Layout Resource File”.
26
Tal y como se muestra en la siguiente pantalla, el nombre del layout no puede tener mayúsculas:
Tal y como el mensaje enmarcado pone, sólo permite minúsculas de la “a” a la “z” y valores
numéricos o guion bajo “_”.
También se pueden añadirle propiedades al layout en el momento de crearlo de una forma un

tanto gráfica.
27
28
Otra sección para analizar en la creación de un Layout es el “Root element”. Por defecto, nos viene
informado con un layout de tipo Constraint “androidx.constraintlayout.widget.ConstraintLayout“
(el cual se explicará con más detalle más abajo), pero se puede modificar y el asistente nos ayuda
a localizar los posibles tipos de layout que existen. En la siguiente imagen se puede apreciar como
el asistente nos ayuda a rellenar el valor de este campo.
Una vez creado, podemos observar todas las partes:
29
Si le ponemos el modo visualización “Split” vemos tanto el formato de texto (XML) como gráfico:
Veamos ahora los tipos de layout más comunes:
30
2.7.1. Constraint (antiguo Relative)
En un constraing layout, por mucho que se pongan valores absolutos

(tools:layout_editor_absoluteX="60dp"tools:layout_editor_absoluteY="49dp") en los objetos, se
necesitan las constraints (restricciones) para poder controlar dónde se desea colocar el item.
Si añadimos una sola constraint con respecto a uno de los lados y a arriba, entonces podemos
controlar la posición.
Con el layout_constraint… define las restricciones
Con el layout_margin… defino las distancias en relación a …
El problema de realizarlo de esta forma es que depende del tamaño de la pantalla del móvil se
verá diferente. Para logar que no dependa de la pantalla tendremos que poner restricciones en
ambos lados e indicar el % de la posición.
31
El layout_marginStart desaparece y aparece el layout_constraintHorizontal_bias, siempre y

cuando se mueva del centro.
Si añadimos otro elemento vemos que aparece una propiedad layout_constraintStart_toEndOf

con referencia la primer elemento.
Si muevo el segundo elemento nos aparece de nuevo la propiedad

layout_constraintHorizontal_bias con el % correspondiente entre el primer elemento y la pared
derecha.
32
33
Ahora podemos añadir guías para tomarlas como los objetos como referencias:
De esta forma podemos referenciar el objeto con relación a la guía:
34
La guía la puedo poner también como porcentaje de la pantalla. He de modificar la propiedad

layout_constraintGuide_end por layout_constraintGuide_percent.
Chain Mode. Cuando tenemos varios elementos que estén encadenados entre sí usamos el modo
“chain”, el cual posee varias opciones que se muestran a continuación:
35
Layout_width = “0dp”
36
Podemos realizar dependencias de horizontales y verticales con otros elementos.

La de abajo es dependencia vertical entre dos objectos con layout_constraintStart_toStartOf.
Para lograr distribuir elementos en fracciones (2/3; 4/8; …) se necesita:

Spread Chain
layout_width=0dp
layout_constraintHorizontal_weight en el peso que corresponda
El ejemplo de debajo es de 1/5 y 4/5
37
2.7.2. Linear
Al crear un nuevo layout me aparece el siguiente error ya que el nombre del layout no puede
empezar en mayúsculas.
Modifico también la llamada en el java para que use ese layout al probarlo:
38
Por defecto el linear es horizontal, por eso aparece error algunas veces:
Horizontal
Vertical
39
2.7.3. Frame
Tener dos botones uno encima de otro con dos funcionalidades diferentes y que necesite que se
muestre uno u otro según el momento:
2.7.4. Table
Depende siempre de otro layout y no puede ser el layout base. Es una forma de poder representar
los elementos en formato de tabla.
40
Si se necesita añadir más filas:
2.7.5. Combinar Layouts
La mejor forma de visualizarlo es usando el ComponentTree:
41
Una vez se puede visualizar, vemos la estructura de árbol.

Si sólo hay un elemento no se puede eliminar con la tecla “supr”, sólo se puede convertir:
42
Arrastrando objetos de tipo layout hacia el ComponentTree se puede generar la estructura que se
desee:
43
Podemos convertir el tipo de layout:
A continuación, se muestra un ejemplo para ir viendo los componentes comentados:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="240dp"
android:layout_height="122dp"
<Button
android:id="@+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
44
<Button
<Button
</LinearLayout>
<LinearLayout
android:orientation="vertical">
<Button
<Button
<Button
</LinearLayout>
</LinearLayout>
45
Ahora el realizamos un layout linear vertical:
2.7.6. Coordinator layout
El coordinator layout nos permite realizar animaciones básicas con una gran variedad de efectos y
opciones configurables. En el ejemplo que se muestra a continuación se aprecia cómo la plantilla
“Scrolling Activity” usa este tipos de layouts.
46
47
48
2.7.7. Prácticas con Layouts

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<TextView
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
49
android:layout_width="match_parent" // se ajusta al padre

android:layout_height="wrap_content" // se ajusta al contenido

<RelativeLayout
android:background="#f00">
<TextView
android:id="@+id/tvSaludo"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/button"
50
android:text="Button"
android:layout_alignRight="@id/tvSaludo"
android:layout_below="@id/tvSaludo"/>
</RelativeLayout>

<RelativeLayout
<TextView
51
<Button
<LinearLayout
android:id="@+id/llMain"
android:background="#0f0"
android:layout_below="@id/button"
<TextView
android:text="Hello World!"/>
<Button
android:text="Button"/>
<Button
<Button
</LinearLayout>
</RelativeLayout>
52
Si cambio el linear layout la orientación a vertical me aparece:
53
En la sección verde, modifico el segundo botón para ponerlo al centro y añado un “Framelayout”.

<RelativeLayout
<TextView
<Button
<LinearLayout
<TextView
<Button
<Button
54
android:layout_gravity="center"/>
<Button
</LinearLayout>
<FrameLayout
android:id="@+id/flMain"
android:background="#00f"
android:layout_below="@id/llMain">
<TextView
android:textColor="#fff"
android:layout_gravity="bottom|right"/>
<Button
android:layout_gravity="center_horizontal"/>
</FrameLayout>
</RelativeLayout>
55
Añadimos más elementos:

<RelativeLayout
tools:ignore="MissingConstraints"
<TextView
<Button
<LinearLayout
<TextView
<Button
<Button
56
android:layout_gravity="center"/>
<Button
</LinearLayout>
<FrameLayout
android:id="@+id/flMain"
android:background="#00f"
android:layout_below="@id/llMain">
<TextView
android:textColor="#fff"
android:layout_gravity="bottom|right"/>
<Button
android:layout_gravity="center_horizontal"/>
</FrameLayout>
<LinearLayout
android:orientation="vertical"
android:background="#fff"
android:gravity="center"
android:layout_below="@id/flMain">
<TextView
android:text="Texto de prueba"
android:textColor="@android:color/holo_blue_light"
android:textAllCaps="true"
android:gravity="center_horizontal"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<EditText
android:hint="introduce tu nombre"/>
<Button
57
android:text="Guardar"
android:textAllCaps="false"/>
<ImageButton
android:src="@mipmap/ic_launcher"
android:background="?attr/selectableItemBackgroundBorderless"/>
<Switch
android:text="Estado:"
tools:ignore="UseSwitchCompatOrMaterialXml" />
<CheckBox
android:text="Acepta Terminos y Condiciones"/>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</RelativeLayout>
58
Los colores en hexadecimal se pueden encontrar en: https://encycolorpedia.es/a4c639
59
2.8. Interfaz de usuario y clases asociadas
2.8.1. Conexión Java - Layout
La programación de una intefície gráfica de usuario (GUI) en el lenguaje de programación Java se

realiza utilizando librerías especializadas: se programa íntegramente usando las clases de la API
correspondiente. Es un proceso tedioso que dificulta además la separación entre el diseño gráfico y
la programación de la interfaz.
En Android, si bien es posible mantener este enfoque a la hora de trabajar con interfaces gráficas,
se recomienda definir totalmente la interfaz de una Actividad a partir de lo que se conoce como
Layout. Un Layout es un archivo XML que utiliza una estructura predefinida para definir cómo se
verá la aplicación en pantalla.
Desde el código fuente en Java podemos decirle a una Actividad que utilice un Layout concreto, y
de forma automática se visualizarán los elementos gráficos necesarios respetando la disposición
definida en el Layout. De este modo, la Actividad sólo debe responsabilizarse de gestionar los
eventos (es decir, la interacción con el usuario) y no la creación de la interfaz.
Un ejemplo del código fuente Java que asigna un Layout a una Actividad sería el siguiente:
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.miActivityLayout);
}
}
En el ejemplo anterior, el método setContentView acepta como parámetro un identificador de
recurso correspondiente a un archivo XML con una descripción de interfaz gráfica. El Layout actúa
como contenedor de los elementos gráficos que son la base del desarrollo de interfaces gráficas en
Android. Todos los elementos gráficos, llamados widgets, son subclases de View.
60
Usar recursos de tipo Layout permite separar la capa de presentación de la capa lógica,
proporcionando flexibilidad para cambiar la interfaz gráfica sin necesidad líneas de código. En el
ejemplo anterior, el mismo código podría cargar cualquier Layout que hayamos previamente creado
en el lugar de miActivityLayout y la aplicación ofrecería una interfaz de usuario diferente.
2.8.2. Widgets
La interfaz de usuario de una aplicación Android se construye utilizando objetos del tipo ViewGroup
y View. Por un lado, la clase android.view.ViewGroup sirve de clase base para las subclases de tipo
layout, que proporcionan los diferentes tipos de disposiciones de los elementos. Por otro lado, los
objetos de tipo vista son la unidad básica de una interfaz de usuario ya que heredan de la clase
android.view.View que sirve de clase base para todas las subclases llamadas widgets, que como ya
hemos visto son objetos de interfaz de usuario totalmente implementados, como por ejemplo
campos de texto y botones.
61
La siguiente tabla muestra algunos de los widgets de uso más habitual en las aplicaciones Android.
Todos estos widgets están disponibles para arrastrar y soltar desde la Paleta del editor gráfico de
layouts.
Componente Descripción
Clase Button. Este es uno de los widgets más utilizados. Puede

Botón
ser pulsado por el usuario y lanzar una determinada acción.
Clase EditText. Es un campo de texto editable que permite al

Caja de texto
usuario introducir datos.
Clase CheckBox. Widget que ofrece dos estados

Casilla de verificación (marcado/desmarcado) y permite al usuario seleccionar una o
más opciones.
Clase RadioButton. Similar a una casilla de verificación, con la

Casilla de selección diferencia de que el usuario únicamente puede seleccionar una
opción.
Lista desplegable Clase ListView. Muestra verticalmente una lista de opciones.
Tabla: Widgets más habituales en Android Studio
2.8.3. Enlaces de datos
El Data Binding o enlace de datos es un mecanismo que permite enlazar los elementos de la interfaz
de usuario con el código de una aplicación. Podemos decir que es el enlace entre el frontend y el
backend de una aplicación, independientemente del lenguaje de programación que se esté usando.
En Android, el método findViewById() se utiliza para buscar un componente gráfico (objetos que
heredan de la clase View) por su identificador dentro del layout. Como ya se ha dicho, todos los
controles se encuentran en el fichero R.java generado automáticamente por el compilador.
62
2.8.4. Etiquetas de texto (TextView)
Una etiqueta de texto es un componente gráfico que permite

mostrar un texto en la interfaz de usuario. Por lo general, el
texto a mostrar se define en tiempo de diseño asignando un
valor al atributo text. También es posible definir el valor del
texto a mostrar en tiempo de ejecución mediante el método
setText().
En el siguiente ejemplo, en primer lugar se define la variable

tvMensaje del tipo TextView. A continuación, se utiliza el método findViewById() para enlazar con
un TextView; una vez se ha enlazado con el componente, se utiliza el método setText() para asignar
un valor y que muestre un mensaje en pantalla.

// 1. declaración de variables
private TextView tvMensaje;
@Override
setContentView(R.layout.activity_main);
//2. Data binding: enlace de datos
tvMensaje = findViewById(R.id.textView);
//3. Uso del componente gráfico
tvMensaje.setText("Hola");
}
}
2.8.5. Campos de texto editables (EditText/Plain Text)
Los campos de texto editables se utilizan principalmente para recoger una entrada de datos por
parte del usuario. Existen diversos tipos de campo de texto, en función del tipo de datos que se
espera que entre el usuario. Los tipos de entrada de datos más habituales están especificados en la
Paleta del modo Diseño de Android Studio: texto plano, contraseña, correo electrónico, teléfono,
dirección postal, campo con varias líneas de texto, hora y fecha.
63
También puede utilizarse un tipo genérico para recoger un dato de tipo String, que posteriormente
puede ser analizado y convertido a un tipo de datos diferente.
En el siguiente ejemplo, se solicita el nombre al usuario, se recoge el valor de entrada en un campo

de texto y a continuación ese valor se asigna a una variable.

private EditText etNombre;
@Override
etNombre = findViewById(R.id.etCampoNombre);
//3. Uso del valor recogido en el componente gráfico
String nombre = etNombre.getText().toString();
}
}
64
2.8.6. Botones (Button)
La clase Button es la encargada de representar botones

en la interfaz de usuario. El principal método de un
componente Button es el método OnClick() que permite
capturar el evento cuando el usuario pulsa sobre el
botón.
Antes de usar el método OnClick() del Button es
necesario tener definido en el java correspondiente una función pública que reciba un elemento de
tipo “View” y que devuelva un “Void”.
Android Studio permite asociar de manera sencilla un método Java al evento onClick(): simplemente
hay que seleccionar el nombre del método en el desplegable del atributo onClick. El método
seleccionado debe declararse como public y tener como parámetro un objeto de la clase View.
Otra forma de capturar la pulsación de un botón consiste en asociar al botón una interfaz del tipo
OnClickListener. A través del método setOnClickListener() asociamos la interfaz OnClickListener que
debe implementar el método onClick() tal y como se muestra a continuación.

private Button miBoton;
@Override
miBoton = findViewById(R.id.button);
//3. Añadir onClickListener al botón
miBoton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// llamada a un método
respoderPulsacion();
}
});
}
public void respoderPulsacion() {
Toast.makeText(MainActivity.this,
"Botón pulsado", Toast.LENGTH_LONG).show();
}
}
65
2.8.7. Control de selección (Spinner)
El control Spinner permite al usuario seleccionar un valor de

entre una lista de valores propuestos. Los valores del Spinner
se definen en el fichero strings.xmlReceptores de emisiones
(Broadcast Rreceivers) son un tipo de componente que
responde a mensajes del sistema dirigidos a todas las
aplicaciones del dispositivo.
Los valores que muestra el control de selección provienen de un adaptador. Un adaptador

representa el modelo de datos: el conjunto de datos que el control de selección mostrará. Además,
el adaptador proporciona la vista: la manera en la que se presentarán los datos dentro del control
de selección. Esta vista puede ser una simple lista de cadenas de texto, imágenes o una combinación
de las dos anteriores.
Android proporciona varios tipos de adaptadores. El ArrayAdapter es un adaptador sencillo que

provee de datos a un control de selección a partir de un array de objetos de cualquier tipo. A
continuación, se muestra un ejemplo de su uso.

private Spinner listaValores;
@Override
listaValores = findViewById(R.id.spinner);
//3. Adaptador (datos) del Spinner
String[] ciudades = {"París","Londres","Berlín"};
ArrayAdapter<String> adaptador = new ArrayAdapter<String>
(this,android.R.layout.simple_spinner_item, ciudades);
listaValores.setAdapter(adaptador);
}
}
En este ejemplo, se utiliza un array de objetos del tipo String llamado ciudades con los valores que
mostrará el control de selección. El adaptador carga los valores del array anterior. El método
setAdapter() asigna el adaptador al control de selección.
66
2.8.8. wrap_content y match_parent
Para evitar usar tamaños de diseño fijos (hard coded) se usan las propiedades wrap_content y
match_parent.
Estas dos propiedades son muy usadas en los elementos, tanto en los layouts como en los widgets:
• "wrap_content" indica a la vista que coloque el tamaño necesario para ajustar el

contenido dentro de dicha vista.
• "match_parent" logra que la vista se expanda lo máximo posible dentro de la vista
principal.
<TextView
android:text="@string/lorem_ipsum" />
67
2.8.9. Recursos adicionales de un proyecto
Además del código de la aplicación y los layouts que conforman la interfaz de usuario, un proyecto
Android también puede constar de una serie de recursos como imágenes, iconos y archivos
multimedia (principalmente archivos de audio y vídeo). Estos recursos adicionales facilitan la
actualización de numerosas características de la aplicación sin cambiar el código y permiten
optimizar una aplicación para diferentes idiomas y tamaños de pantalla.
Cada recurso de un proyecto de Android tiene asignado un ID con número entero único que se
puede usar para hacer referencia al recurso desde el código Java de la aplicación. Por ejemplo, si la
aplicación contiene un archivo de imagen denominado icono.jpg en el directorio del proyecto
res/drawable/, este recurso puede ser referenciado en el código como R.drawable.icono.
Entre los recursos más habituales se encuentran las cadenas de texto utilizadas en la interfaz de
usuario. De esta forma, estas cadenas de texto se pueden traducir a otros idiomas y guardarlas en
archivos independientes. En tiempo de ejecución, Android utilizará las cadenas de idioma
apropiadas según la configuración de idioma del usuario, en función de un calificador de idioma
anexado al nombre del directorio de recursos; por ejemplo, el directorio res/values-es/ hace
referencia a los valores de las cadenas de texto español.
Los componentes gráficos de la aplicación se guardan en el fichero R.java junto al resto de recursos
del proyecto; mediante un identificador único, se accederá a esos componentes gráficos para
recoger entradas de datos o bien mostrar información al usuario.
68
2.8.10. Videos ejemplos
El siguiente video explica (divido en dos partes) el proceso de creación de una aplicación en
Android Studio.
La partes que se explican en los videos son:
• Parte1:
• Java que llama al Layout.
• Creación de un Plain Text (campo editable) y ver analizar sus propiedades.
• Usar el editor gráfico del Layout y el fichero XML.
• Explicación del String.xml.
• Parte2:
• Añadir botón y explicar propiedades.
• Incluir TextView y comentar propiedades.
• Usar dichos Widges dentro del Java.
• Definir el listener en el botón.
• Modificar el TextView según el valor del Plain Text al apretar el botón.
Video: Primera App en Android Studio parte 1
Video: Primera App en Android Studio parte 2
69
2.8.11. Cómo preparar a analizar un programa nuevo
Si nos encontramos con un nuevo programa y nos interesa saber por dónde empieza tendremos
que analizar el fichero AndroidManifest.xml. Veámoslo con un ejemplo:
En el código podemos apreciar que la “activity” que realiza la acción “android.intent.action.MAIN”

es la que ejecuta el java “MainActivity”.
70
2.9. Trucos
Localizar elementos dependientes entre diferentes ficheros:
71
Recursos y enlaces
• Guías para desarrolladores de Android
• Diseña para Android
• Principios de diseño de las aplicaciones para dispositivos móviles
72
Conceptos clave
• Actividad: una Actividad representa una pantalla individual con una
interfaz de usuario.
• Archivo de manifiesto: una aplicación debe declarar todos sus
componentes en este archivo, que debe encontrarse en la raíz de
directorios del proyecto de la aplicación.
• Componentes: los componentes de una aplicación son puntos de entrada
por los que el sistema o un usuario entran en una aplicación. Las
Actividades son el tipo de componente más habitual.
• Layout: elemento no visual destinado a controlar la distribución, posición y
dimensiones de los controles que se insertan en su interior.
• Proyecto: jerarquía donde se ubican todos los archivos de código fuente
Java, los recursos, los ficheros de configuración y los ficheros de
construcción Gradle.
• Servicio: componente que permite mantener la ejecución de la aplicación
en segundo plano.
73
Test autoevaluativo
1. ¿Cómo podríamos definir un layout?

a) Un contenedor pensado para controlar la distribución, posición y tamaño de elementos
gráficos.
b) Una herramienta utilizada en el diseño de una interfaz gráfica.
c) El conjunto de recursos gráficos y multimedia de una aplicación móvil.
d) Todas las anteriores son correctas.
2. ¿De qué clase hereda un objeto de tipo Button?

a) android.view.Widget.
b) android.view.Graphics.
c) android.view.ViewGroup.
d) android.view.View.
3. ¿En qué carpeta del proyecto se guardan los recursos adicionales como imágenes y vídeos?
a) media
b) misc
c) res
d) Ninguna de las respuestas anteriores es correcta
4. ¿Qué herramienta utiliza Android Studio para buscar dependencias y facilitar la

construcción del proyecto?
a) CMake
b) SCons
c) Rake
d) Gradle
74
Ponlo en práctica
Crea un nuevo proyecto en Android Studio que muestre el mensaje “¡Hola caracola!” en la pantalla
del dispositivo tal y como se muestra en la imagen siguiente.
75
Solucionarios
Test autoevaluativo
1. ¿Cómo podríamos definir un layout?

a) Un contenedor pensado para controlar la distribución, posición y tamaño de elementos
gráficos.
b) Una herramienta utilizada en el diseño de una interfaz gráfica.
c) El conjunto de recursos gráficos y multimedia de una aplicación móvil.
d) Todas las anteriores son correctas.
2. ¿De qué clase hereda un objeto de tipo Button?

a) android.view.Widget.
b) android.view.Graphics.
c) android.view.ViewGroup.
d) android.view.View.
3. ¿En qué carpeta del proyecto se guardan los recursos adicionales como imágenes y vídeos?
a) media
b) misc
c) res
d) Ninguna de las respuestas anteriores es correcta
4. ¿Qué herramienta utiliza Android Studio para buscar dependencias y facilitar la construcción
del proyecto?
a) CMake
b) SCons
c) Rake
d) Gradle
76
Ponlo en práctica
Crea un nuevo proyecto en Android Studio que muestre el mensaje “¡Hola caracola!” en la pantalla
del dispositivo tal y como se muestra en la imagen siguiente.
Solución:
Una vez descargado e instalado Android Studio (consulta la documentación del Tema 1
para realizar estos pasos), inicia un nuevo proyecto en blanco. El nuevo proyecto requiere
un nombre y una versión de la API de Android; puedes utilizar la información de la imagen.
Una vez se ha creado el proyecto, utiliza el Editor de Diseños para modificar el valor del
atributo text del widget TextView del layout; los atributos se encuentran en la parte
derecha del editor.
77
1. Haz doble clic sobre el valor del atributo text

2. Teclea el texto ¡Hola caracola! y a continuación pulsa Intro.
3. El nuevo valor del atributo quedará reflejado en el TextView del layout.
Finalmente, ejecuta el proyecto en un emulador o en tu propio dispositivo.
78

Dam M08 T02 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dam M08 T02 PDF

Cargado por

Copyright:

Formatos disponibles

TEM

Autoría: Josep Maria Herrera

2.1. Herramientas de programación

1. Un entorno unificado donde es posible desarrollar para todos los dispositivos

2.2. Partes del Android Studio

En él nos encontramos muchas funcionalidades.

Básicamente encontramos dos secciones:

• Aplicación, en donde están los principales componentes que definen mi proyecto.

La estructura típica de un proyecto contiene las siguientes carpetas:

• compileSdkVersion: versión de SDK que usa para compilar.

• XML, en donde nos podemos encontrar:

• Code: se trata de trabajar directamente con código XML.

A continuación, se puede apreciar dónde localizar cada una de estas trazas:

Instalación / run / deploy

Para lograrlo se ha de usar el siguiente comando:

2.2.5. Opciones de menú

2.3. Creación de un nuevo proyecto

Video: Primeros pasos en Android Studio

2.3.1. Ejecutable Android

En Apple el ejecutable es el IPA.

2.3.2. Errores conocidos

Para acceder al AVD manager tenemos varias formas.

Desde el desplegable de los emuladores:

2.3.3. Error Gradle Plugin vs Gradle version

Si al ejecutar el programa os aparece un error como el siguiente:

Para modificarlo tenemos que irnos al “Project Structure”:

Y al cambiar a esta configuración se solucionó el problema:

2.4. Cómo importar los proyectos proporcionados

• Crear un proyecto nuevo en Android Studio.

2.5. Ejecución en modo depuración (debug)

Y ejecutarlo en modo debug:

Os paso video con explicación del uso del modo debug:

2.6. Componentes básicos de una aplicación Android

Para mejorar el rendimiento del emulador, si nuestro microprocesador es compatible, se

2.6.4. Proveedores de contenidos

Un Proveedor de contenidos está implementado como una subclase de ContentProvider y debe

Imagen. Proveedores de contenido.

2.6.5. Receptores de emisiones

Un Receptor de emisiones se implementa como una subclase de BroadcastReceiver y cada

Imagen. Receptores de emisiones.

También se pueden añadirle propiedades al layout en el momento de crearlo de una forma un

Una vez creado, podemos observar todas las partes:

Veamos ahora los tipos de layout más comunes:

2.7.1. Constraint (antiguo Relative)

En un constraing layout, por mucho que se pongan valores absolutos

El layout_marginStart desaparece y aparece el layout_constraintHorizontal_bias, siempre y

Si añadimos otro elemento vemos que aparece una propiedad layout_constraintStart_toEndOf

Si muevo el segundo elemento nos aparece de nuevo la propiedad

De esta forma podemos referenciar el objeto con relación a la guía:

La guía la puedo poner también como porcentaje de la pantalla. He de modificar la propiedad

Podemos realizar dependencias de horizontales y verticales con otros elementos.

Para lograr distribuir elementos en fracciones (2/3; 4/8; …) se necesita:

Si se necesita añadir más filas:

2.7.5. Combinar Layouts

La mejor forma de visualizarlo es usando el ComponentTree:

Una vez se puede visualizar, vemos la estructura de árbol.

Podemos convertir el tipo de layout:

A continuación, se muestra un ejemplo para ir viendo los componentes comentados:

Ahora el realizamos un layout linear vertical:

2.7.6. Coordinator layout

2.7.7. Prácticas con Layouts

<?xml version="1.0" encoding="utf-8"?>

android:layout_width="match_parent" // se ajusta al padre