Learn how to use android resources efficiently on your apps

1. Recursos en Android 101
Fernando F. Gallego
@ferdy182

2. Carpetas de recursos
● 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) Pro tip
● values-es: Cadenas y valores cuando el locale es “es” Excluye recursos
(Español) que empiecen por
● layout-large-land-car-night-finger-v11: Adivínalo! _
Tip
Más info: http://developer.android. Carpetas sin
com/guide/topics/resources/providing-resources.html calificadores se
consideran "por
defecto"

3. Manejo automático de recursos
● 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
Pro tip
Accede a los recursos de la
plataforma con android.R.anim.
fade_in o @android:
anim/fade_in

4. Soporte a distintas densidades de pantalla
● 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).
Tamaños relativos para bitmap drawables por densidad
http://developer.android.com/guide/practices/screens_support.html

5. Dando soporte a múltiples tamaños de pantalla
● Los calificadores para layouts sirven para ofrecer diferentes layouts para
diferentes dispositivos y "evitar" la fragmentación.
● 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)

6. Layouts eficientes
● 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

7. Algoritmo de dibujo de Android
● onMeasure: Cómo de grande quiere ser cada vista.
● onLayout: Dibujado de cada vista.

8. Layouts eficientes (II)
● 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/>

9. Layouts eficientes(III)
● No definas views que uses
raramente
● Usa ViewStub para cargar
vistas bajo demanda
<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);
// or
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

10. Layouts eficientes (IV)
● Usa el menor número de views posible. Usa compound drawables.
<LinearLayout <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" android:layout_gravity="center_horizontal"
android:orientation="horizontal" > android:drawableLeft="@drawable/ic_launcher"
<ImageView android:gravity="center"
android:layout_width="wrap_content" android:text="@string/hello_world" />
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>
Más info:
http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/

11. Nine-patch Drawable
● 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.
● Arriba e izquierda
● Define las áreas que se estiran (pero no se
encogen!)
● Abajo y derecha
● Zona para el contenido, el resto es padding

12. State List Drawable
● 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
Disabled Default Pressed
<?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>
android:background="@drawable/btn_nav_bg_selector"

13. Shape Drawable
● Crea un drawable basado en una forma definida en XML (aún así requiere
dotes artísticas!)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.
Pro tip
com/apk/res/android" >
Combinar con state list drawable:
<gradient
<selector>
android:angle="270" <item android:
android:endColor="#2f6699" state_pressed="true" >
android:startColor="#449def" /> <shape>
...
<stroke </shape>
android:width="1dp" </item>
android:color="#2f6699" /> <item>
<shape>
<corners android:radius="4dp" /> ...
</shape>
<padding </item>
</selector>
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>

14. Clip Drawable
● Recorta una porción de un drawable
● Útil para personalizar barras de progreso
<?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

15. Inset Drawable
● 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

16. Otros drawables
● 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
Layer List
● drawable.startTransition(500);
● Clip drawable
● Recorta una porción de un drawable
● Útil para personalizar barras de progreso
● Scale drawable
● Escala un drawable
Más info:
http://developer.android.
com/guide/topics/resources/drawable-resource.html

17. Animaciones
<set xmlns:android="http://schemas.android.
com/apk/res/android" >
<scale
android:duration="5000"
android:fillAfter="false"
android:fromXScale="1.0"
● Por interpolación android:fromYScale="1.0"
● (tweening) 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>

18. Animaciones (II)
● Animaciones basadas en frames
● AnimationDrawable
<?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>

19. Animaciones (III)
● ValueAnimator
● Anima valores con un TypeEvaluator (Int, Float, ARGB, propio)
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
● Anima propiedades de objetos usando un ValueAnimator
ObjectAnimator anim = ObjectAnimator.ofFloat(foo, "alpha", 0f, 1f);
anim.setDuration(1000);
anim.start();
● Retrocompatibilidad con la librería NineOldAndroids (http:
//nineoldandroids.com/)

20. Estilos y temas
● 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

21. Temas
● Personaliza un tema predefinido
<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>
● Aplica temas a actividades concretas o a toda la aplicación
● <activity android:theme="@style/Theme.Junaio">
● <application android:theme="@style/Theme.Junaio">
Pro tip
Los temas predefinidos no están bien documentados y pueden ser liosos. No hay consistencia de
nombres
buttonStyle
buttonStyleToggle
radioButtonStyle
…

22. Soportando distintas versiones de la plataforma
● 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.xml
android:theme="@android:style/AppTheme"

23. Values
● 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>

24. Arrays
● Array de enteros o strings
● getIntArray(R.array.someintarray)
● Array tipado
● Distintos tipos

25. Gracias
¿Preguntas?
Fernando F. Gallego
twitter: @ferdy182