Charla impartida en la DevCon 2012 organizada por Telefónica I+D sobre las causas de la fragmentación en Android y las soluciones existentes para minimizar su impacto

1. Patrones de Diseño en Android.
La lucha por la standarización
Jesús Gumiel (@jegumi) DevCon 2012

2. Índice
• Introducción
• Evolución de Android
• Fragmentación
• Patrones de diseño

3. Introducción

4. ¿Que es Android?

5. Los orígenes
• Andi Rubin, considerado el
Padre de Android.
• Vicepresidente de Ingeniería
supervisando el desarrollo de
Android

6. La dulce historia del nombrado
• Ejemplo de primera nomenclatura: M3-WB22-TC3.
• Nombrado alfabético.
• Basado en robots famosos: Astro boy, Bender.
• Un product manager goloso: Petit Four
• Los pastelitos ganan la batalla.
http://source.android.com/source/overview.html

7. Evolución

8. Versiones

9. Gráfica distribución (Noviembre 2012)

10. Tabla distribución (Noviembre 2012)
Versión Nombre Api Distribución
1.5 Cupcake 3 0,1%
1.6 Donut 4 0,3%
2.1 Éclair 7 3,1%
2.2 Froyo 8 12%
2.3 - 2.3.2 Ginberbread 9 0,3%,
2.3.3 – 2.3.7 10 53,9%
3.1 Honeycomb 12 0,4%
3.2 13 1,4%
4.0 ICS 15 25,8%
4.1 Jelly Bean 16 2,7%

11. Video
• Android Evolution

12. Fragmentación

13. ¿Cuál es el peor enemigo de Android?

14. ¿Cuál es el peor enemigo de Android?

15. ¿Cuál es el peor enemigo de Android?

16. ¿El porqué de la Fragmentación?
9 versiones en 5 años, 400
millones de dispositivos
activados, cientos de diferentes
modelos de terminales con
Android instalado, y más de 300
partners en diversos ámbitos,
hardware, software,
proveedores de telefonía…
• Evolución muy rápida

17. ¿El porqué de la Fragmentación?
• Perfil de usuarios de Android
A diferencia de los usuarios de Apple, que son
conocidos estar muy al día de los lanzamientos
de apps y tener una gran cantidad de las mismas
instaladas en sus iPhones, la mayoría de ellas de
pago, apenas un tercio de los usuarios Android
cuenta con aplicaciones de pago en su terminal.
Tampoco son fanáticos de descargar una gran
cantidad de apps: sobre un 13% de ellos tiene
más de 50 aplicaciones instaladas.
http://dattatecblog.com/2011/12/%C2%BFcomo-es-un-
usuario-de-android/

20. Todo tiene solución
• Librerías de Compatibilidad de Google:
• android-support-v4
• android-support-v13
• Librerías de Compatibilidad no oficiales:
• GreenDroid: http://greendroid.cyrilmottier.com/
• ActionBarSherlock: http://actionbarsherlock.com/
• Guías de diseño
• http://developer.android.com/intl/es/design/

21. Honeycomb, el punto de inflexión
• En el 2011 se liberó Honeycomb, versión específica
para tablets con muchas novedades.
• Ese mismo año Google lanza su librería de
compatibilidad.
• Empiezan a aparecer librerías no oficiales para
ofrecer compatibilidad a la ActionBar.

22. ICS, estandarizando el diseño
• En enero del 2012 Google lanza unas guías de estilo
para el desarrollo de Apps sobre ICS.
• Unos meses más tarde lavan la cara de la web de
android developers para seguir el estilo ICS
“Tu aplicación debe esforzarse por combinar la belleza, la
sencillez y la intención de crear una experiencia mágica, sin
esfuerzo y poderosa”

23. Android-support
• Proporciona a los desarrolladores una serie de
bibliotecas estáticas de apoyo.
• Desarrollar apps con compatibilidad para una versión de
la API, utilizando características de una versión superior.
• Android-support-v4  Compatibilidad API >=4
• Android-support-v13  Compatibilidad API >=13

24. ActionBarSherlock
• Extensión de la biblioteca de soporte diseñado para
facilitar el uso del patrón de diseño ActionBar a través
de todas las versiones de Android con una única API.
• La biblioteca utiliza automáticamente la barra nativa
cuando es posible (API >=11) o utiliza la
implementación de Sherlock en caso contrario.

25. Patrones de Diseño

26. http://developer.android.com/intl/es/design/index.html

27. Action Bar
• La Action Bar es una barra situada en la parte superior
de cada pantalla, que suele ser persistente a lo largo de
la aplicación

28. Action Bar
1. Main Action Bar
2. Top Bar
3. Bottom Bar

29. Action Bar
• Está dividida en 4 áreas funcionales que suelen ser
utilizadas en la mayoría de las aplicaciones
• Icono de la app
• Vista de control
• Action buttons
• Action overflow

30. Icono de la app
• Es la identidad de la aplicación, puede cambiarse por
un icono distinto del de la misma.
• Se encarga de la navegación, al pulsar sobre el icono
vuelves al home, muestras un drawer…, es aconsejable
activar la flecha de back, que actúa como el botón de
back.

31. Vista de Control
• Si la app muestra datos en diferentes vistas, este
segmento está pensado para permitir al usuario
cambiar de vistas.
• Tabs (fijas o scrollables)
• Spinners
• Drawers

32. Action Buttons
• Están destinados a las acciones más frecuentes de las
actividades.
• Dependiendo del espacio disponible en la barra se
muestran los más importantes, y el resto van al
overflow button.
• Aquí deberían ir las acciones frecuentes, importantes o
típicas.

33. Action Buttons
• ifRoom: sólo aparece si hay espacio.
• never: no aparecerá nunca en la action bar.
• always: aparecerá siempre en la action bar, aunque por
el tamaño del dispositivo y número de elementos
mostrados no estuviera definido que apareciera.
• collapseActionView: indica que es posible mover esta
acción al overflow button.

34. Action Overflow
• Este botón está destinado a contener las opciones
menos frecuentes de la pantalla.
• Es el equivalente al antiguo menú HW, y sólo aparece
en dispositivos sin el mismo.
• Dependiendo del tamaño del teléfono y la orientación
el número de elementos que pueden mostrarse en la
Action Bar varían.

35. Action Overflow

36. Ejemplos

37. ActionBar con Sherlock
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getSupportActionBar() != null) {
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
startMain(false);
}
return true;
}

38. Tabs con Sherlock
private void initTabs() {
String[] tabsTitleArray = getResources().getStringArray(R.array.main_tab);
ActionBar actionbar = getSupportActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (int i = 0; i < NUM_TABS; i++) {
actionbar.addTab(actionbar.newTab().setText(
tabsTitleArray[i]).setTabListener(new MyTabsListener()));
}
}

39. Action Buttons con Sherlock
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.activity_menu, menu);
return true;
}

40. Action Buttons con Sherlock
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/add_element"
android:icon="@drawable/ic_action_add"
android:showAsAction="always"
android:title="@string/add"/>
<item
android:id="@+id/delete_element"
android:icon="@drawable/ic_action_delete"
android:showAsAction="always"
android:title="@string/delete"/>
<item
android:id="@+id/edit_element"
android:icon="@drawable/ic_action_edit"
android:showAsAction="always"
android:title="@string/edit"/>
</menu>
res/menu/activity_menu.xml

41. PseudoActionBar (basada en layouts)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/topbar_1" >
<ImageView
android:id="@+id/topbar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/topbar_shadow" />
<TextView
android:id="@+id/header_title_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
……..

42. PseudoActionBar (basada en layouts)
<LinearLayout
android:id="@+id/header_right_buttons"
android:layout_width="wrap_content"
android:layout_height="33.33dp"
android:layout_alignParentRight="true"
android:layout_marginTop="8.67dp"
android:layout_marginBottom="8.67dp"
android:layout_marginRight="13.33dp" />
<LinearLayout
android:id="@+id/header_left_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp" />
</RelativeLayout>

43. Tabs con PseudoActionBar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/timeline_header_content"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/header_right_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp" />
……..
En la actividad, o el
fragment encargado de
actuar como “ActionBar”
una vista con un
onClickListener por cada
acción…

44. ActionButtons con PseudoActionBar
public void addButton(boolean right, int buttonResource, final Runnable event) {
ButtonAndIcon headerButton = new ButtonAndIcon(getActivity());
headerButton.setBackgroundButton(buttonResource);
headerButton.setAction(event);
if (right) {
rightButtons.addView(headerButton);
} else {
leftButtons.addView(headerButton);
}
}
Añadir cada botón a la vista
programaticamente desde
el fragment o actividad que
lo compone.
ó
Añadir directamente en el
layout que hará de action
bar

45. Multi-Pane Layouts
• Se introdujeron en Honeycomb para adaptar el
contenido de las aplicaciones a los tamaños de pantalla
de los tablets.
• Permiten combinar múltiples vistas o dividir estas en
una única en función del espacio disponible en la
pantalla.

46. Multi-Pane Layouts

47. Multi-Pane Layouts

48. Multi-Pane Layouts
• A nivel de implementación cuando hablamos de Multi-
Pane nos referimos a los fragments.

49. Fragments
• Fragmentos de interfaz
de usuario que se
pueden colocar en una
actividad.
• Se podrían considerar
mini actividades, tienen
su propio ciclo de vida,
aunque asociado a la
actividad que los
contienen.

50. Multi-Pane Layouts
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
android:id="@+id/listFragment"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent”
class="com.example.android.ListFragment" />
<fragment
android:id="@+id/detailFragment"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
class="com.example.android.DetailFragment”/ >
</LinearLayout>
res/layout-large/activity.xml

51. Multi-Pane Layouts
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
android:id="@+id/listFragment"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent”
class="com.example.android.ListFragment" />
</LinearLayout>
res/layout/activity.xml

52. Multi-Pane Layouts
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android”
android:id="@+id/list"
android:layout_width=”match_parent”
android:layout_height="match_parent” /> res/layout/list_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android”
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="@+id/name_edit_text"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:hint="@string/name”/>
……
</LinearLayout>
res/layout/details_fragment.xml

53. ¿Preguntas?

54. Enlaces de Interés
Librería de Compatibilidad:
http://developer.android.com/intl/es/tools/extras/support-library.html
Librerías de soporte de la Action Bar:
http://actionbarsherlock.com/
https://github.com/cyrilmottier/GreenDroid
Personalizando la Action Bar:
http://android-developers.blogspot.com.es/2011/04/customizing-action-bar.html
Código con los ejemplos:
https://github.com/jegumi/DevCon2012