Universidad Nacional de Ingeniería

ANDROID STUDIO

DISEÑO DE INTERFACES
GRAFICAS EN ANDROID
Objetivos
1. Mostrar las distintas formas de
generar interfaces de usuario
2. Entender los distintos layouts que
ofrece Android
3. Desarrollar la interfaz de una
aplicación móvil real
2. Layouts
ViewGroup
ConstraintLayout (Responsive)
LinearLayout
CoordinatorLayout (Capas)
RelativeLayout (Responsive)
FrameLayout
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout

Coordinator Layout
Es un frameLayout
superpotente
Permite acoplamiento entre
vistas secundarias
Coordina las animaciones y
transiciones de las vistas
secundarias entre sí
Coordinator Layout

https://developer.android.com/reference/android
x/coordinatorlayout/widget/CoordinatorLayout
Coordinator Layout

https://developer.android.com/reference/android
x/coordinatorlayout/widget/CoordinatorLayout
NestedScrollView
Admite actuar como padre e hijo
de desplazamiento anidado. Está
habilitado por defecto.
NestedScrollView. Se utiliza
cuando se necesita una vista de
desplazamiento dentro de otra
vista de desplazamiento
CardView
Es una manera sencilla de
mostrar información en
tarjetas. Tienen una elevación
predeterminada por encima del
grupo de vistas que las
contiene. Ofrecen una forma
simple de incluir un grupo de
vistas.
3. Componentes de una
aplicación móvil
Activities
Fragment
Services
Broadcast receivers
Contents Providers
Activities Todas las pantallas de nuestra
aplicación son Activities, simples o
activities que contienen fragmentos
Activities
Desde código JAVA
Activities
Desde código KOTLIN
fragment
Activities El view Fragment

fragment
content
Fragments
Una porción de la activity
Activity fragment
puede ser un fragmento
App artelista
Ciclo de Vida de
un Activity
Activities / manifest.xml
Menu y fragments
Navigation
Navigation
Android JetPack
Navigation
La navegación permite a los usuarios
navegar entre las distintas pantallas de
la app.
Componentes
Gráfico de navegación
NavHost
NavController
Navigation
Gráfico de navegación
Es un recurso XML que
contiene la información
de navegación tal como:
destinos, rutas
Navigation
NavHost
Es un contenedor vacío donde
se mostrarán cada uno de los
destinos definidos en el
diagrama. En nuestra app, el
contenedor vacío es
fragcontent y hacemos uso de
la implementación por default
NavHostFragment
NavController
Es un objeto que
administra la navegación
de un NavHost. Es el
encargado de orquestar el
intercambio de contenido.
Ventajas de Navigation
Administrar transacciones de fragmentos
Administrar correctamente las acciones
predeterminadas Arriba y Atrás
Proporcionar recursos estandarizados para animaciones
y transiciones
Implementar y administrar vínculos directo
Safe Args, un complemento de Gradle que proporciona
seguridad
Compatibilidad con ViewModel

https://developer.android.com/guide/navigation
Pantalla / fragmentHome
ViewGroup / FrameLayout
CardView
FrameLayout está diseñado para bloquear un
área en la pantalla para mostrar un solo
elemento. Generalmente, FrameLayout debe
usarse para contener una sola vista secundaria

https://developer.android.com/reference/android/widget/F
rameLayout
https://developer.android.com/guide/topics/ui/layout/ca
rdview
Pantalla /
fragmentHome
CardView
Con frecuencia, las apps deben
mostrar datos en contenedores
con estilo similar. Se usan a
menudo en listas para retener la
información de cada elemento.
Los cardview permiten mostrar
información en forma de
tarjetitas
Pantalla /
fragmentArtista
Constraint Layout
View /
Atributo de Visibilidad
Pantalla / fragment Evento
Recycler View
Item diseño plano XML
Shapes
Pantalla / fragment Evento
Recycler View
Permite mostrar de manera eficiente
grandes conjuntos de datos.
Crea de forma dinámica los elementos
No destruye la vista de los elementos
desplazados
https://developer.android.com/guide/topics/ui/layout/recyclerview?
gclid=Cj0KCQjwse-DBhC7ARIsAI8YcWKcm-

TWtYSLOOcG8BXe975M5bwTJQ_Eq3W4Ud2wdBwYxODinPzRriIaAg94EALw_wcB&gclsr
c=aw.ds
Recycler View / Componentes
ViewGroup que contiene las
vistas correspondiente a los
datos
ViewHolder correspondiente al
elemento individual a mostrar,
debe estar vinculado a la vista
Adapter relaciona la vista y la
vincula con los datos
Administrador de diseño
(Linear Layout, Grid Layout)
Pantalla /
fragment Arte
Recycler View y
evento click
Transiciones
AppBarLayout