El documento describe cómo resolver el problema de diseñar interfaces para múltiples resoluciones en Android. Recomienda generar imágenes para diferentes resoluciones y usar layouts distintos para diferentes dispositivos. Luego explica cómo crear una vista de inicio usando componentes visuales de Android en lugar de imágenes, preservando mejor las proporciones en diferentes pantallas.

1. Vistas impresionantes en Android
Resolviendo el problema de la múltiples resoluciones
http://yezika-butterfly.blogspot.mx

2. Dudas?
@Yezika_Ink
Android establece algunos perfiles de configuración de las interfaces de
acuerdo al tamaño del dispositivo
Y te recomienda que generes
imágenes para múltiples
resoluciones, y que seas
minimalista, y que uses
distintos layouts para distintos
tipos de dispositivo,
Etc etc etc etc ....
http://yezika-butterfly.blogspot.mx

3. El problema de la densidad y las dimensiones de las pantallas
El problema es que cada fabricante tiene libertad de diseñar su hardware como
quiera, por lo tanto tenemos distintas calidades de imagen, resolución, y
tamaños
http://yezika-butterfly.blogspot.mx

4. El ejemplo típico: La vista de inicio (alias SplashScreen)
Hagamos un diseño rápido usando GIMP: lienzo de 400x600 px
http://yezika-butterfly.blogspot.mx

5. El ejemplo típico: La vista de inicio (alias SplashScreen)
¡Genial! mi vista de inicio esta completa, ahora como se verá en la aplicación
Realmente no se ve bien, en términos de identidad corporativa deformar las
proporciones de un logotipo ES INCORRECTO
http://yezika-butterfly.blogspot.mx

6. El ejemplo típico: La vista de inicio (alias SplashScreen)
Hay muchas soluciones para este problema, una de ellas es diseñar el logotipo
en varias proporciones para tratar de equilibrar la deformación...
¿Cuántos gráficos tendremos que elaborar e incluir en el apk?
Hay una mejor solución: Recrear la vista desde cero usando los componentes
visuales de Android (Layouts y Widgets)
Por propiedades
● Simplicidad
● Vista previa al momento de diseñar la interfaz (ej. Eclipse IDE)
● Se necesita buen conocimiento de los elementos de la interfaz
Por código (Custom Views & Activities)
● Complejidad para visualizar la solución y se necesita mayor conocimiento de
la plataforma
● Posibilidad de incorporar efectos de transiciones
Veamos un ejemplo usando propiedades
http://yezika-butterfly.blogspot.mx

7. El ejemplo típico: La vista de inicio (alias SplashScreen)
Generamos los elementos gráficos en proporciones deseadas.
Tip: Podemos tomar algún teléfono popular como referencia y luego elaborar
versiones escaladas para las distintas resoluciones
600x800 px
600x400 px
http://yezika-butterfly.blogspot.mx

8. El ejemplo típico: La vista de inicio (alias SplashScreen)
Exportamos pensando en transparencias, detalles, etc...
http://yezika-butterfly.blogspot.mx

9. El ejemplo típico: La vista de inicio (alias SplashScreen)
Vamos a trabajar en un proyecto de prueba
Usaremos el layout default que se crea
Copiamos los elementos en sus respectivas carpetas
http://yezika-butterfly.blogspot.mx

10. El ejemplo típico: La vista de inicio (alias SplashScreen)
También tenemos que prepara la guía de colores, lo que sea sólido lo
agregamos a string.xml
http://yezika-butterfly.blogspot.mx

11. El ejemplo típico: La vista de inicio (alias SplashScreen)
No es conveniente asignar una imagen directamente como background si es
que vamos a necesitar que se preserve alguna forma o composición.
Nuestro layout padre será de tipo framelayout.
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/fondo_mariposa" />
La propiedad centerCrop hace
que una imagen se escale sin
perder su proporción hasta llenar
el espacio aunque algunas áreas
de la imagen ya no sean visibles.
http://yezika-butterfly.blogspot.mx

12. El ejemplo típico: La vista de inicio (alias SplashScreen)
A continuación pondremos otra imagen, la cual por propiedades del
framelayout, se colocará sobre la anterior
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="@drawable/degradado_patron" />
La propiedad fitCenter hace que
una imagen se escale sin perder
su proporción hasta llenar el
espacio en alguna de las
dimensiones.
http://yezika-butterfly.blogspot.mx

13. El ejemplo típico: La vista de inicio (alias SplashScreen)
Ahora para ajustar el logotipo al área de la imagen 2, envolveremos la imagen
un relativelayout y el logotipo centrado en medio y un texto alineado justo
debajo del logotipo
Un relativelayout usa un
lenguaje de
posicionamiento de sus
nodos hijos en base a
referencias: al lado de,
arriba de, abajo de,
centrado, etc...
http://yezika-butterfly.blogspot.mx

14. <RelativeLayout
android:id="@+id/wraper"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:src="@drawable/degradado_patron" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageView2"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="@drawable/mylogo" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView3"
android:layout_centerHorizontal="true"
android:text="Bienvenido a mi app"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@color/texto_blanco" />
</RelativeLayout>
http://yezika-butterfly.blogspot.mx

15. El ejemplo típico: La vista de inicio (alias SplashScreen)
Así es como se verá en múltiples dispositivos
http://yezika-butterfly.blogspot.mx

16. El ejemplo típico: La vista de inicio (alias SplashScreen)
Finalmente tenemos una vista muy distinta al primer resultado
Preserva de manera interesante las proporciones de todo el diseño en general
Hay muchas formas de jugar con las propiedades de los layouts, textos, e
imágenes
PROS
Es un diseño más conformado y que puede sacar provecho a la plataforma de
manera muy profesional
Se pueden resolver todos los problemas de deformación
Se pueden agregar transiciones
CONTRAS
Es más costoso en cuanto a procesamiento
Es más laborioso
Se necesitan personas con aptitud estética y con un buen conocimiento de
Android (una combinación muy peculiar en un desarrollador)
http://yezika-butterfly.blogspot.mx

17. Que tan bien funciona esta técnica?
¡Intenta preservar este diseño con el
menor grado de deformación!
Por ejemplo:
Sony Xperia Mini vs Samsung Galaxy
Tab
....
Cortesía de
http://congresouniversitariomovil.com
http://yezika-butterfly.blogspot.mx

18. ¿EN DONDE PUEDO APRENDER MAS?
Todo lo relacionado con diseño en Android
http://developer.android.com/design/index.html
La documentación completa de los elementos visuales y layouts
http://developer.android.com/guide/topics/ui/index.html
http://developer.android.com/reference/android/view/package-summary.html
¿Te interesa saber aun más?
Laboratorio de investigación, innovación y desarrollo en tecnologías móviles de
la Facultad de Ingeniería, UNAM
http://unam.mobi
@Yezika_Ink
(Ingeniera de Software, Arquitecto de sistemas web|iOS|Android y artista)
Y si vives en el DF no olvides asistir al Congreso Universitario Móvil en la
Facultad de ingeniería, UNAM la primera semana de septiembre :D
http://congresouniversitariomovil.com
http://yezika-butterfly.blogspot.mx