Recursos en Android 101

Fernando F. Gallego

@ferdy182

● Se encuentran en la carpeta /res● Se usan para almacenar imágenes, layouts, valores,

internacionalización, animaciones, menús, etc.● Provee diferentes versiones de los recursos según unos

calificadores● Nombrar las carpetas de la siguiente forma:

● <nombre_carpeta>-<calificador>● Puedes añadir más de uno pero respetando un orden.

Ejemplos● drawable-hdpi: versión de alta densidad (~240dpi)● drawable-land-xhdpi: versión de extra alta densidad para el

modo apaisado. (~320dpi)● values-es: Cadenas y valores cuando el locale es “es”

(Español)● layout-large-land-car-night-finger-v11: Adivínalo!

Más info: http://developer.android.com/guide/topics/resources/providing-resources.html

Carpetas de recursos

Pro tipExcluye recursos que empiecen por _

TipCarpetas sin calificadores se consideran "por defecto"

● La carpeta de recursos correcta se selecciona automáticamente.● Salvo que lo evites

● Las diferentes versiones del mismo recurso deben tener el mismo nombre de archivo.

● La misma view en distintas versiones del layout debe tener el mismo id.

● Si el recurso no encaja con ningún calificador, Android busca el que mejor encaje.

● Los recursos se acceden de dos formas:● En código: R.string.app_name● En XML: @string/app_name

Manejo automático de recursos

Pro tipAccede a los recursos de la plataforma con android.R.anim.fade_in o @android:anim/fade_in

● Píxeles independientes de la densidad (dp)● El píxel independiente de la densidad es equivalente a un

píxel físico en una pantalla de 160 dpi.● px = dp * (dpi / 160). Por ejemplo, en una pantall de 240 dpi, 1 dp

equivalen a 1.5 píxeles físicos● Nunca NUNCA uses píxeles, usa dp en su lugar(o sp para

tamaños de fuente).

Soporte a distintas densidades de pantalla

Tamaños relativos para bitmap drawables por densidad

http://developer.android.com/guide/practices/screens_support.html

● Los calificadores para layouts sirven para ofrecer diferentes layouts para diferentes dispositivos y "evitar" la fragmentación.

Dando soporte a múltiples tamaños de pantalla

● Screen madness:● Usa smallestWidth: sw<N>dp (sw480dp, sw600dp)● Calificadores de Android 3.2 para diferentes layouts

● 320dp: típica pantalla de teléfono (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).● 480dp: Tablet tipo Dell Streak (480x800 mdpi).● 600dp: tablet de 7” (600x1024 mdpi).● 720dp: tablet de 10”(720x1280 mdpi, 800x1280 mdpi, etc)

res/layout/main_activity.xml # Para móviles (smaller than 600dp available width) res/layout-sw600dp/main_activity.xml # Para tablets de 7” (desde 600dp de ancho y más grandes) res/layout-sw720dp/main_activity.xml # Para tablets de 10” (desde 720dp de ancho y más grandes)

● Los layouts se definen en archivos XML● Bajo: /res/layout

● Tipos de contenedores:● LinearLayout: El más fácil de aprender. Muestra todas las vistas en

horizontal o en vertical.● RelativeLayout: Posiciona las vistas relativas a otras vistas. Bueno

para crear layouts que se solapan con transparencias.● FrameLayout: Layout básico. Apila las vistas una encima de otra. No

muy útil.● También TableLayout y GridLayout

Layouts eficientes

● onMeasure: Cómo de grande quiere ser cada vista.● onLayout: Dibujado de cada vista.

Algoritmo de dibujo de Android

● Mantener la jerarquía de vistas plana acelera el dibujado de la interfaz

● (aka usa RelativeLayout)

● Reusa layouts● Puedes usar <include/> para

añadir otro layout

<include android:id="@+id/cell1" layout="@layout/workspace_screen" />

● Evita anidar contenedores del mismo tipo

● Usa <merge/>● "Engancha" sus descendientes

a su ancestro● Buen combo con <include/>

Layouts eficientes (II)

● No definas views que uses raramente

● Usa ViewStub para cargar vistas bajo demanda

Layouts eficientes(III)

<ViewStub android:id="@+id/stub_import" android:layout="@layout/progress_overlay" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" />

((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);// orView importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

● Usa el menor número de views posible. Usa compound drawables.

Layouts eficientes (IV)

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/hello_world"/></LinearLayout>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:drawableLeft="@drawable/ic_launcher" android:gravity="center" android:text="@string/hello_world" />

Más info:http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/

● Archivos de imagen que se estiran selectivamente.● Define áreas para estirar y áreas donde irá el

contenido.● La imagen se expande para albergar el contenido

manteniendo formas complejas de la imagen como son esquinas o adornos.

Nine-patch Drawable

● Arriba e izquierda● Define las áreas que se estiran (pero no se

encogen!)

● Abajo y derecha● Zona para el contenido, el resto es padding

● Se usan para ofrecer distintos drawables o colores según los diferentes estados de la vista.

● El orden es importante. El primero que encaje.● Independientes de la densidad. Almacenar en

/res/drawable/btn_nav_bg_selector.xml

State List Drawable

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"

android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"

android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"

android:state_window_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_enabled="true"

android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default"/></selector>

Disabled PressedDefault

android:background="@drawable/btn_nav_bg_selector"

● Crea un drawable basado en una forma definida en XML (aún así requiere dotes artísticas!)

Shape Drawable

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >

<gradient android:angle="270" android:endColor="#2f6699" android:startColor="#449def" />

<stroke android:width="1dp" android:color="#2f6699" />

<corners android:radius="4dp" />

<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /></shape>

Pro tipCombinar con state list drawable:

<selector> <item android:state_pressed="true" > <shape> ... </shape> </item> <item> <shape> ... </shape> </item></selector>

● Recorta una porción de un drawable● Útil para personalizar barras de progreso

Clip Drawable

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="20dip"/> <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF" android:centerY="0.75" android:endColor="#ffffff" android:angle="90"/> <stroke android:width="1dp" android:color="#00aa00"/> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="20dip"/> <gradient android:startColor="#CaCaC0" android:centerColor="#2828FF" android:centerY="0.75" android:endColor="#325423" android:angle="270"/> </shape> </clip> </item> </layer-list>

Más info:http://vnamashko.blogspot.de/2012/05/customize-your-progress-bar.html

● Estira un drawable en las direcciones indicadas

● Útil para efectos biselados o pestañas tipo Holo

<?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetBottom="0dp" android:insetLeft="-5dp" android:insetRight="-5dp" android:insetTop="-5dp" > <shape> <solid android:color="@color/stacked_green" /> <stroke android:width="3dp" android:color="@color/accent_green" /> </shape></inset>

Más info:http://blog.stylingandroid.com/archives/1329

Inset Drawable

● Layer List● Pinta diferentes drawables uno encima de otro en un solo drawable.● Útil para componer.

● Level List● Similar al anterior pero solo muestra uno a la vez● Útil para estados no estándar (ej. un semáforo)

● Transition drawable● Hace una transición con fundido entre dos drawables● drawable.startTransition(500);

● Clip drawable● Recorta una porción de un drawable● Útil para personalizar barras de progreso

● Scale drawable● Escala un drawable

Otros drawables

Más info:http://developer.android.com/guide/topics/resources/drawable-resource.html

Layer List

● Por interpolación● (tweening)

Animaciones

<set xmlns:android="http://schemas.android.com/apk/res/android" > <scale android:duration="5000" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="3.0" android:toYScale="3.0" /> <set>

<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fromAlpha="0.2" android:toAlpha="1.0" /> <rotate android:duration="4000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:toDegrees="-360" android:toYScale="0.0" /> <translate android:duration="3000" android:fromXDelta="100%" android:fromYDelta="60%" android:toXDelta="-20%" android:toYDelta="-30%" android:zAdjustment="bottom" /> </set></set>

● Animaciones basadas en frames● AnimationDrawable

Animaciones (II)

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"> <item android:drawable="@drawable/android_1“ android:duration="100"/> <item android:drawable="@drawable/android_2“ android:duration="100"/> <item android:drawable="@drawable/android_3“ android:duration="100"/> <item android:drawable="@drawable/android_4“ android:duration="100"/> <item android:drawable="@drawable/android_5“ android:duration="100"/> <item android:drawable="@drawable/android_6“ android:duration="100"/> <item android:drawable="@drawable/android_7“ android:duration="100"/></animation-list>

● ValueAnimator● Anima valores con un TypeEvaluator (Int, Float, ARGB, propio)

● ObjectAnimator● Anima propiedades de objetos usando un ValueAnimator

● Retrocompatibilidad con la librería NineOldAndroids (http://nineoldandroids.com/)

Animaciones (III)

ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);animation.setDuration(1000);animation.start();

ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);animation.setDuration(1000);animation.start();

ObjectAnimator anim = ObjectAnimator.ofFloat(foo, "alpha", 0f, 1f);anim.setDuration(1000);anim.start();

● Estilos● Similar a CSS● Herencia con parent=“…”● Usar el atributo style en XML: style="@style/CodeFont"

● Hereda tus propios styles con .

● Guardar en /res/values/styles.xml

Estilos y temas

● Personaliza un tema predefinido

● Aplica temas a actividades concretas o a toda la aplicación● <activity android:theme="@style/Theme.Junaio">● <application android:theme="@style/Theme.Junaio">

Temas

<style name="Theme.Junaio" parent="android:Theme"> <item name="android:windowBackground">@null</item> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">false</item> <item name="android:buttonStyleToggle">@style/Topbar.Button</item> </style>

Pro tipLos temas predefinidos no están bien documentados y pueden ser liosos. No hay consistencia de nombresbuttonStylebuttonStyleToggleradioButtonStyle

…

● Hasta Android 11:● Theme.Black● Theme.Light

● De Android 11 al 13:● Theme.Holo● Theme.Holo.Light

● Desde Android 14:● Theme.Holo● Theme.Holo.Light.DarkActionBar

● Crea 3 carpetas para estilos:/res/values/styles.xml

<style name="AppTheme" parent="android:Theme.Light" />/res/values-v11/styles.xml

<style name="AppTheme" parent="android:Theme.Holo.Light" />/res/values-v14/styles.xml

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />

● AndroidManifest.xmlandroid:theme="@android:style/AppTheme"

Soportando distintas versiones de la plataforma

● Valores que puedes definir en carpetas de recursos:● Booleanos (true | false)<boolean name=“someboolean”>true</boolean>getResources().getBoolean(R.bool.someboolean) / @bool/someboolean

● Color (#RGB | #RRGGBB | #ARGB | #AARRGGBB)<color name=“somecolor”>#FF898989</color>getResources().getColor(R.color.somecolor) / @color/somecolor

● Dimensión (dp | sp | pt | px | mm | in)<dimen name=“somedimension”>15dp</dimen>getResources().getDimension(R.dimen.somesimension) / @dimen/somedimension

● ID<item type=“id” name=“someid” />findViewById(R.id.someid) / @id/someid

● Enteros<integer name=“someint”>42</integer>

Values

● Array de enteros o strings● getIntArray(R.array.someintarray)

● Array tipado● Distintos tipos

Arrays

¿Preguntas?

Gracias

Fernando F. Gallego

twitter: @ferdy182