Creación de Interfaz de Usuario

Creación de interfaz de usuario
Diplomado en desarrollo de aplicaciones móviles, nivel básico

Objetivo
El estudiante comprenderá los
conceptos básicos de creación de
interfaz de usuario con Android Studio
y Java, diseñando vistas y dando
navegabilidad entre actividades con
Java
Icebreaker
Da 5 minutos para que tus estudiantes puedan buscar
¿Consulta cómo se realiza la navegación

entre actividades con java?
Da 5 minutos para que tus estudiantes expresen sus hallazgos

Introducción
¿Qué es Android Studio?
Android Studio es el entorno de desarrollo integrado (IDE) oficial para el desarrollo de aplicaciones Android; fue lanzado por Google en
2013 como una alternativa más robusta y completa a Eclipse, que era el IDE utilizado anteriormente para el desarrollo de Android.
Android Studio proporciona una serie de características que facilitan el desarrollo de aplicaciones Android, entre ellas se incluyen un
editor de código fuente con funcionalidades avanzadas, como resaltado de sintaxis y autocompletado de código, un diseñador de
interfaces gráficas que permite a los desarrolladores crear layouts de forma visual, y herramientas para depurar y perfilar aplicaciones.
Además, Android Studio está integrado con el sistema de compilación Gradle, lo que permite una gran flexibilidad en la configuración
de la compilación de las aplicaciones; también proporciona soporte para el desarrollo de aplicaciones para una variedad de dispositivos
Android, incluyendo smartphones, tablets, TV y wearables.
Android Studio también facilita la integración con servicios de Google, como Firebase y Google Cloud Platform, lo que permite a los
desarrolladores añadir fácilmente funcionalidades como bases de datos en la nube, autenticación de usuarios, análisis de uso y mucho
más.
más.
más.
más.
¿Qué es JAVA?
Java es un lenguaje de programación de alto nivel desarrollado por Sun Microsystems en 1995. Es uno de los lenguajes de programación más
utilizados en el mundo, y ha sido la base para el desarrollo de aplicaciones Android desde su inicio hasta la introducción de Kotlin como lenguaje
alternativo.
Java es un lenguaje orientado a objetos, lo que significa que se basa en el concepto de "objetos" que contienen datos y métodos para manipular
esos datos; esto permite a los desarrolladores estructurar sus programas de una manera que puede ser más intuitiva y fácil de entender.
Una de las características más destacadas de Java es su portabilidad. Java fue diseñado con el lema "escribe una vez, ejecuta en cualquier lugar",
lo que significa que el código Java puede ser ejecutado en cualquier dispositivo que tenga instalada una Máquina Virtual Java (JVM), sin
necesidad de ser recompilado; esto ha sido especialmente útil en el desarrollo de aplicaciones Android, ya que hay una gran variedad de
dispositivos Android con diferentes características y capacidades.
Java también proporciona una amplia biblioteca estándar que incluye una gran cantidad de clases y métodos para realizar tareas comunes, como
manipulación de cadenas, gestión de archivos, trabajo con fechas y horas, y mucho más; además, hay una gran cantidad de bibliotecas de
terceros disponibles que proporcionan funcionalidades adicionales, desde el trabajo con imágenes y gráficos hasta la comunicación con bases de
datos y servicios web.
¿Qué es JAVA?
alternativo.
¿Qué es JAVA?
alternativo.
¿Qué es JAVA?
alternativo.
Diseño de la interfaz de
usuario
¿Qué es un layout?
Un layout en Android es un contenedor que controla cómo se posicionan los elementos de la interfaz de usuario
en la pantalla; existen varios tipos de layouts en Android, cada uno con sus propias reglas para la disposición de
los elementos. Algunos de los layouts más comunes incluyen:
● LinearLayout: Dispone los elementos en una única dirección, ya sea horizontal o vertical.
● RelativeLayout: Dispone los elementos en relación con otros elementos o con el contenedor padre.
● FrameLayout: Dispone los elementos uno encima del otro, útil para crear interfaces de usuario
superpuestas.
● ConstraintLayout: Dispone los elementos en base a restricciones relativas entre los elementos y el
contenedor padre, proporcionando una gran flexibilidad y permitiendo diseños más complejos.
Cada layout se define en un archivo XML. Dentro de este archivo, puedes definir los elementos de la interfaz de
usuario que forman parte del layout, así como sus propiedades, como su tamaño, posición y estilo
Uso de widgets
Los widgets son los componentes básicos de la interfaz de usuario en Android. Incluyen elementos como
botones, campos de texto, imágenes y listas desplegables. Cada widget se representa como una instancia de una
clase Java y se puede definir en el código Java de tu aplicación o en un archivo XML de layout.
Algunos de los widgets más comunes que puedes utilizar en tu aplicación incluyen:
● Button: Un botón que el usuario puede pulsar para realizar una acción.
● TextView: Un elemento que muestra texto al usuario.
● EditText: Un campo de texto que el usuario puede editar.
● ImageView: Un elemento que muestra una imagen.
● RecyclerView: Un contenedor que muestra una lista de elementos.
Cada widget tiene un conjunto de propiedades que puedes configurar para personalizar su apariencia y
comportamiento. Por ejemplo, puedes configurar el texto de un botón, el color de fondo de una vista de texto,
la imagen mostrada por una vista de imagen, y mucho más.
Programación básica en
Java para Android
Variables y tipos de datos
En Java, las variables se utilizan para almacenar y manipular datos en la memoria de un programa. Cada variable
tiene un tipo de dato que determina el tipo de valor que puede almacenar. Algunos tipos de datos comunes en Java
incluyen int (números enteros), double (números decimales), boolean (verdadero o falso) y String (texto).
Ejemplo de código:
int edad = 25;

double altura = 1.75;
boolean esEstudiante = true;
String nombre = "Juan";
Puedes pensar en una variable como una caja etiquetada donde puedes guardar diferentes tipos de objetos. Por
ejemplo, puedes tener una caja llamada "edad" en la que colocas el número 25, una caja llamada "altura" donde
colocas 1.75, y así sucesivamente.
Operadores
Los operadores en Java se utilizan para realizar operaciones como sumar, restar, multiplicar o comparar valores.
Algunos operadores comunes incluyen el operador de suma (+), el operador de resta (-), el operador de
multiplicación (*), el operador de división (/) y el operador de comparación (==).
Ejemplo de código:
int a = 10;
int b = 5;
int suma = a + b;
int multiplicacion = a * b;
boolean esIgual = (a == b);
Los operadores son como herramientas que te permiten realizar diferentes acciones con los valores almacenados en
las variables.
¿Qué es un layout?
Un layout en Android es un contenedor que controla cómo se posicionan los elementos de la interfaz de usuario
en la pantalla; existen varios tipos de layouts en Android, cada uno con sus propias reglas para la disposición de
los elementos. Algunos de los layouts más comunes incluyen:
● LinearLayout: Dispone los elementos en una única dirección, ya sea horizontal o vertical.
● RelativeLayout: Dispone los elementos en relación con otros elementos o con el contenedor padre.
● FrameLayout: Dispone los elementos uno encima del otro, útil para crear interfaces de usuario
superpuestas.
● ConstraintLayout: Dispone los elementos en base a restricciones relativas entre los elementos y el
contenedor padre, proporcionando una gran flexibilidad y permitiendo diseños más complejos.
Cada layout se define en un archivo XML. Dentro de este archivo, puedes definir los elementos de la interfaz de
usuario que forman parte del layout, así como sus propiedades, como su tamaño, posición y estilo
Condicional If
El condicional "if" se utiliza para ejecutar un bloque de código si se cumple una
determinada condición.
Puedes pensar en un int edad = 18;

condicional "if" como una
bifurcación en un camino. Si se if (edad >= 18) {
cumple una cierta condición, el //Enviar un mensaje
programa seguirá un camino } else {
específico; de lo contrario, //Enviar un mensaje
seguirá por otro camino. }
Estructuras de control (if, for)

Condicional If
El bucle "for" se utiliza para repetir un bloque de código un número específico
de veces.
Un bucle "for" es como una cinta

transportadora que mueve un objeto for (int i = 1; i <= 5; i++) {
a través de un proceso //Enviar un mensaje
repetidamente hasta que se cumple }
una condición específica. Por
ejemplo, puedes usar un bucle "for"
para imprimir los números del 1 al 5,
uno a la vez.
Estructuras de control (if, for)

Interacción con la interfaz
de usuario
Manejo de eventos de
botones
En Android, los botones son elementos de la interfaz de

usuario (UI) que los usuarios pueden interactuar tocándolos. Button btnAceptar = findViewById(R.id.btnAceptar);
Para manejar los eventos de los botones, se utilizan listeners
(o "escuchadores") que están a la espera de la interacción btnAceptar.setOnClickListener(new View.OnClickListener() {
del usuario y realizan una acción específica cuando se @Override
public void onClick(View v) {
produce el evento.
// Acción a realizar cuando se hace clic en el botón
En este ejemplo, se asigna un listener al botón btnAceptar Toast.makeText(MainActivity.this, "¡Botón Aceptar
utilizando el método setOnClickListener(). presionado!", Toast.LENGTH_SHORT).show();
}
Cuando el usuario hace clic en el botón, se ejecuta el código dentro });
del método onClick(), que muestra un mensaje emergente
(Toast) diciendo "¡Botón Aceptar presionado!".
Cambio de pantallas
En una aplicación de Android, es común que haya múltiples

pantallas o actividades. El cambio de pantallas implica navegar Button btnCambiar = findViewById(R.id.btnCambiar);
de una actividad a otra para proporcionar una experiencia de
usuario fluida. Para lograr esto, se utiliza el concepto de btnCambiar.setOnClickListener(new
View.OnClickListener() {
"intents" (intenciones) en Android.
@Override
Ejemplo de código: Supongamos que tienes una actividad public void onClick(View v) {
llamada MainActivity y deseas cambiar a otra actividad llamada Intent intent = new Intent(MainActivity.this,
SecondActivity cuando se hace clic en un botón. SecondActivity.class);
startActivity(intent);
En este ejemplo, se crea un objeto Intent que especifica la transición desde }
MainActivity a SecondActivity.
});
Al hacer clic en el botón btnCambiar, se inicia la actividad SecondActivity
mediante el método startActivity().
import android.util.Log;
public class MainActivity extends AppCompatActivity {

Depuración de la aplicación private static final String TAG = "MiApp";
@Override
Uso del Logcat protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
El Logcat es una ventana en el entorno de desarrollo de Android Studio que
setContentView(R.layout.activity_main);
muestra los mensajes de registro generados por la aplicación. Estos mensajes
pueden ser de diferentes niveles de gravedad, como DEBUG, INFO, WARNING o
ERROR. Log.d(TAG, "Mensaje de depuración"); // Mensaje de
depuración
En este ejemplo, se importa la clase Log y se define una constante TAG con el
nombre de la aplicación, que se utilizará como etiqueta en los mensajes de Log.i(TAG, "Mensaje de información"); // Mensaje de
registro. Dentro del método onCreate(), se utilizan los métodos Log.d(), información
Log.i(), Log.w() y Log.e() para imprimir diferentes mensajes de registro Log.w(TAG, "Mensaje de advertencia"); // Mensaje de
en el Logcat. advertencia
Al ejecutar la aplicación y observar el Logcat en Android Studio, podrás ver los Log.e(TAG, "Mensaje de error"); // Mensaje de error
mensajes de registro y su nivel de gravedad. Esto puede ser útil para rastrear el }
flujo de ejecución de la aplicación, identificar problemas, controlar variables y más. }
Creación de un archivo APK para
compartir tu aplicación
El archivo APK es el paquete que contiene todos los recursos y el código de tu aplicación
Android. Puedes generar este archivo para compartir tu aplicación con otros usuarios o
para subirla a tiendas de aplicaciones como Google Play Store.
Aquí tienes los pasos para crear un archivo APK en Android Studio:
● Abre tu proyecto en Android Studio.

● En la barra de menú, selecciona "Build" y luego "Build Bundle(s) / APK(s)".
● A continuación, selecciona "Build APK(s)".
Android Studio comenzará a compilar tu proyecto y generará el archivo APK

correspondiente. El archivo APK se guardará en una ubicación específica en tu proyecto.
Práctica lo aprendido
HidroTrack: Tu aliado para el consumo
responsable de agua
El agua es un recurso esencial para la vida en nuestro

planeta y es vital para nuestro bienestar diario.
Enfrentamos desafíos crecientes en cuanto a la
disponibilidad y conservación del agua, y es por eso que
hemos desarrollado HidroTrack, una aplicación que te
ayudará a llevar un registro de tu consumo de agua diario y
fomentar hábitos más responsables.
responsable de agua
HidroTrack ha sido diseñada para concienciarte sobre la

importancia del agua y brindarte herramientas prácticas para
reducir tu consumo. Con nuestra aplicación, podrás ingresar
fácilmente la cantidad de agua que consumes en tus
actividades cotidianas, como bañarse, lavar platos o regar el
jardín. Al registrar tu consumo, HidroTrack te proporcionará
valiosos consejos personalizados para reducir tu consumo de
agua y te guiará hacia una vida más sostenible.
responsable de agua
A través de gráficos y estadísticas claras, podrás visualizar tu

progreso a lo largo del tiempo y evaluar tus hábitos de
consumo. HidroTrack te mostrará de forma intuitiva cómo tus
acciones diarias afectan el consumo total de agua, lo que te
permitirá identificar áreas en las que puedes mejorar y
realizar cambios positivos en tu rutina.
responsable de agua
Además de ayudarte a reducir tu consumo de agua,

HidroTrack te brindará información relevante sobre la
conservación del agua y los desafíos relacionados con su
disponibilidad a nivel mundial.
Aprenderás sobre prácticas de uso eficiente del agua,
tecnologías sostenibles y formas de contribuir al cuidado de
este valioso recurso.
Vistas Requeridas
Pantalla de inicio: Esta será la primera pantalla que los usuarios verán al abrir la aplicación.
Puede incluir el logotipo y el nombre de la aplicación, así como una breve introducción o
mensaje de bienvenida.
Pantalla de registro de consumo de agua: Aquí es donde los usuarios ingresarán la cantidad
de agua que han consumido en una determinada actividad. Puede incluir un campo de entrada
numérica y opciones predefinidas para actividades comunes, como ducharse, lavar platos, etc.
También puede proporcionar botones o controles para seleccionar la unidad de medida (litros,
galones, etc.) y una opción para agregar comentarios o notas adicionales.
Vistas Requeridas
Pantalla de consejos para reducir el consumo: Después de registrar el consumo de

agua, los usuarios serán dirigidos a esta pantalla que les brindará consejos
personalizados para reducir su consumo de agua. Puede mostrar una lista de consejos
desplazable, con descripciones y sugerencias prácticas para cada uno. También puede
incluir imágenes ilustrativas relacionadas con cada consejo.
Pantalla de seguimiento y progreso: Esta vista permitirá a los usuarios ver un resumen
de su consumo de agua a lo largo del tiempo. Puede mostrar gráficos o diagramas que
representen el consumo diario, semanal o mensual, y resaltar patrones o tendencias.
También puede incluir estadísticas adicionales, como el promedio de consumo, el total
acumulado, etc.
Vistas Requeridas
Pantalla de información sobre conservación del agua: Esta vista proporcionará

información educativa sobre la importancia de la conservación del agua y consejos
generales para un uso más eficiente. Puede incluir texto descriptivo, imágenes
ilustrativas y quizás enlaces a recursos externos relacionados con la conservación del
agua.
Pantalla de configuración: Aquí, los usuarios podrán personalizar la aplicación según

sus preferencias. Pueden ajustar la unidad de medida predeterminada, configurar
recordatorios o notificaciones para registrar el consumo de agua, y realizar otras
configuraciones relacionadas con la aplicación.
Sugerencia nombres de los
Activity
● activity_main.xml: Esta sería la vista principal de la pantalla de

inicio.
● activity_water_consumption.xml: Esta sería la vista para registrar el
consumo de agua.
● activity_tips.xml: Esta sería la vista que muestra los consejos para
reducir el consumo de agua.
● activity_progress.xml: Esta sería la vista para mostrar el
seguimiento y progreso del consumo de agua a lo largo del tiempo.
● activity_info.xml: Esta sería la vista que muestra la información
sobre la conservación del agua.
● activity_settings.xml: Esta sería la vista para configurar las
preferencias de la aplicación.
Elementos mínimos que
debe tener cada vista
activity_main.xml:
● Un TextView para mostrar el título de la vista.
● Un botón para acceder a la vista de registro de
consumo de agua.
● Un botón para acceder a la vista de consejos.
● Un botón para acceder a la vista de seguimiento de
progreso.
● Un botón para acceder a la vista de información.
● Un botón para acceder a la vista de configuración.
activity_water_consumption.xml:
● Un TextView para mostrar el título de la
vista.
● Un EditText para ingresar la cantidad de agua
consumida.
● Un botón para guardar el registro de
consumo.
● Un botón para volver a la vista principal.
activity_tips.xml:
vista.
● Un TextView para mostrar los consejos para
reducir el consumo de agua.
activity_progress.xml:
● Un gráfico o diagrama que muestre el progreso
del consumo de agua a lo largo del tiempo.
● Un botón para volver a la vista principal
activity_info.xml:
vista.
● Un TextView para mostrar información
sobre la conservación del agua.
activity_settings.xml:
● Opciones para configurar las preferencias de la
aplicación, como unidades de medida,
notificaciones, etc.
● Un botón para guardar los cambios realizados.
Crear el proyecto
Ingresa a file/new/new
project y selecciona la
opción
Configurar el proyecto
Configura el nombre del

proyecto, el package, SDK y el
lenguaje de programación
Configura los títulos de las vistas
Para definir los nombres de los títulos de cada vista en el archivo

strings.xml ubicado en la carpeta res/values/, puedes seguir los
siguientes pasos:
● Abre el proyecto de Android Studio.

● Navega hasta la carpeta res/values/ en la estructura de
carpetas de tu proyecto.
● Haz clic derecho en la carpeta values y selecciona "New" (Nuevo)
y luego "Values resource file" (Archivo de recursos de valores).
● En el cuadro de diálogo que aparece, ingresa el nombre del archivo
como "strings" y asegúrate de seleccionar el tipo de archivo "XML".
● Haz clic en "OK" para crear el archivo strings.xml.
Una vez creado el archivo strings.xml, puedes agregar los nombres

de los títulos de cada vista utilizando etiquetas <string> dentro del
archivo.
A continuación, te mostraré cómo colocar los títulos correspondientes en

el strings.xml para cada vista que mencionaste.
Configura los
títulos de las
vistas
Creación de los Activity
Para crear cada una de las Activity y

los archivos XML correspondientes en
Android Studio, puedes seguir los
siguientes pasos:
➔ Haz clic derecho en la carpeta

"res" en la estructura de
carpetas de tu proyecto en
Android Studio.
➔ Selecciona "New" (Nuevo) y
luego "Activity" (Actividad).
➔ Aparecerá un menú desplegable
con varias opciones. Para cada
una de las Activity mencionadas,
elige "Empty ViewsActivity"
(Actividad vacía).
A continuación, te muestro el
nombre que podrías utilizar
para cada Activity:
Para la Activity de registro de

consumo de agua:
WaterConsumptionActivity
para cada Activity:
Para la Activity de consejos

para reducir el consumo de
agua: TipsActivity
para cada Activity:
Para la Activity de seguimiento

y progreso del consumo de
agua: ProgressActivity
para cada Activity:
Para la Activity de información

sobre la conservación del agua:
InfoActivity
para cada Activity:
Para la Activity de
configuración de preferencias
de la aplicación:
SettingsActivity
Después de crear cada Activity, se generará automáticamente el archivo XML
correspondiente en la carpeta res/layout. Estos archivos XML tendrán el mismo nombre
que la Activity, seguido de .xml. Por ejemplo:
● Para la Activity de registro de consumo de agua: activity_water_consumption.xml
● Para la Activity de consejos para reducir el consumo de agua: activity_tips.xml
● Para la Activity de seguimiento y progreso del consumo de agua:
activity_progress.xml
● Para la Activity de información sobre la conservación del agua: activity_info.xml
● Para la Activity de configuración de preferencias de la aplicación:
activity_settings.xml
Crea las vistas como en el manual
Coloca navegación entre las vistas
Ejecuta la aplicación
Repositorio de la
aplicación
https://github.com/lidertecnico/hidrotra
ck.git
Cierre
Da 5 minutos para que tus estudiantes escriban en el chat
Dos cosas que aprendí hoy en clase
Da 5 minutos para que leer los mensajes del chat

Referencias
• Introducción al desarrollo de aplicaciones móviles - U1 V3 - ScreenPal:
https://screenpal.com/watch/c36berVt7UK
• Guía de introducción para el desarrollo de aplicaciones móviles o aplicaciones web:
https://medium.com/@salvadorhm/gu%C3%ADa-de-introducci%C3%B3n-para-el-desarrollo
-de-una-aplicaci%C3%B3n-m%C3%B3vil-o-una-aplicaci%C3%B3n-web-1c1681f2a598
• ¿Qué es un mockup? | KeepCoding Bootcamps: https://keepcoding.io/blog/que-es-mockup/
• 32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup - Slideshare:
https://es.slideshare.net/pavillalta/32-android-desarrollo-de-aplicaciones-moviles-importan
cia-del-mockup
• Desarrollo de una App Android para facilitar la comunicación entre organizaciones y
estudiantes - RiuNet:
https://riunet.upv.es/bitstream/handle/10251/186329/Valls%20-%20Desarrollo%20de%20
una%20App%20Android%20para%20facilitar%20la%20comunicacion%20entre%20organiza
ciones%20y%20estud....pdf?sequence=1&isAllowed=y
• Flujo de trabajo habitual en el diseño web y apps:
https://perio.unlp.edu.ar/catedras/iddi/wp-content/uploads/sites/125/2020/06/Flujo-de-tr
abajo-habitual-en-el-dise%C3%B1o-web-y-apps.pdf
• DESARROLLO DE UN PROTOTIPO FUNCIONAL DEL APLICATIVO “PEREIRA CIRCULA”:
https://repositorio.ucp.edu.co/bitstream/10785/4146/3/DDMIST7.pdf
Gracias por su esfuerzo y
dedicación en esta
actividad, y espero verlos en
la próxima sesión. ¡Buen
trabajo!

Creación de Interfaz de Usuario

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

Creación de Interfaz de Usuario

Cargado por

Copyright:

Formatos disponibles

Creación de interfaz de usuario

Diplomado en desarrollo de aplicaciones móviles, nivel básico

¿Consulta cómo se realiza la navegación

Da 5 minutos para que tus estudiantes expresen sus hallazgos

int edad = 25;

Puedes pensar en un int edad = 18;

Estructuras de control (if, for)

Un bucle "for" es como una cinta

Estructuras de control (if, for)

En Android, los botones son elementos de la interfaz de

En una aplicación de Android, es común que haya múltiples

public class MainActivity extends AppCompatActivity {

● Abre tu proyecto en Android Studio.

Android Studio comenzará a compilar tu proyecto y generará el archivo APK

El agua es un recurso esencial para la vida en nuestro

HidroTrack ha sido diseñada para concienciarte sobre la

A través de gráficos y estadísticas claras, podrás visualizar tu

Además de ayudarte a reducir tu consumo de agua,

Pantalla de consejos para reducir el consumo: Después de registrar el consumo de

Pantalla de información sobre conservación del agua: Esta vista proporcionará

Pantalla de configuración: Aquí, los usuarios podrán personalizar la aplicación según

● activity_main.xml: Esta sería la vista principal de la pantalla de

Configura el nombre del

Para definir los nombres de los títulos de cada vista en el archivo

● Abre el proyecto de Android Studio.

Una vez creado el archivo strings.xml, puedes agregar los nombres

A continuación, te mostraré cómo colocar los títulos correspondientes en

Para crear cada una de las Activity y

➔ Haz clic derecho en la carpeta

Para la Activity de registro de

Para la Activity de consejos

Para la Activity de seguimiento

Para la Activity de información

Dos cosas que aprendí hoy en clase

Da 5 minutos para que leer los mensajes del chat

También podría gustarte