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
 1. XML
Es un lenguaje de marcado
que permite estructurar
los datos a través de TAGS
y atributos

<TAG atributo = "valor">

Contenido
</TAG>
NAMESPACE
O bien puedes encontrar el TAG
acompañado de un namespace

<NAMESPACE:TAG atr= "valor">

Contenido
</NAMESPACE:TAG>

Un namespace permite
agregar contexto al TAG o
atributo
EJEMPLO de Namespace

Por ejemplo:
<Profesor: Glenda
trabajo:horario='1-4'
trabajo:id='@glenda.com
</Profesor:Glenda>
En android el namespace
mas usado es android:
< ... />
Origen de un namespace

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
 <... />
Cómo saber de donde proviene un
namespace?
Carpeta /res

Archivos de
recursos por
defecto
Carpeta /values
dimens

dp: Utilizado para

altos y anchos

sp: Para tamaños

de textos
strings
colors
View group y view

ViewGroup

Views
La vista de diseño
View group vs atributos
gravity "start" a la izquierda todo lo que contiene el view
Ejemplo de gravity a nivel de View
 Atributos importantes XML

width, height, id
Para incorporar los Archivos de recursos @
Otros atributos y el namespace tools
2. Layouts
ViewGroup
ConstraintLayout (Responsive)
LinearLayout
CoordinatorLayout (Capas)
RelativeLayout (Responsive)
FrameLayout
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout

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
Services
Procesos en segundo plano, tal
es el caso de los reproductores
de música.
Broadcast
receiver
Los eventos, son
receptores de cualquiera
de los mensajes o
eventos que ocurren en
el sistema
Content
providers
Proveedores de contenido, comparten
información con cualquier aplicación.
Por ejemplo:
Repositorios cloud, bases de datos
App artelista
Ciclo de Vida de
un Activity
Activities / manifest.xml
 Se convirtió en el patrón de
MVVM
arquitectura de desarrollo para
aplicaciones ANDROID
Pantalla de Login y
Crear Cuenta
Vector assets
Shapes
Themes (Actionbar y
NoActionBar)
AppToolbar
Splash Screen

Recursos / anim
Eventos de anim
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
Glide
Pantalla / fragmentArtista
Glide
Es una librería de código abierto, utilizada para: cargar imágenes, videos y
GIFs animados. Con Glide puedes cargar y mostrar medios de muchas
fuentes diferentes, tales como servidores remotos o el sistema local de
archivos.

Por defecto, Glide usa una implementación personalizada de

HttpURLConnection para cargar imágenes en internet. Sin embargo, Glide
también proporciona complementos para otras librerías populares de red
como Volley o OkHttp.

https://code.tutsplus.com/es/tutorials/code-an-image-gallery-android-app-
with-glide--cms-28207
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