Patrones de Diseo en Android.

La lucha por la standarizacin

Jess Gumiel (@jegumi) DevCon 2012

ndice
Introduccin Evolucin de Android Fragmentacin Patrones de diseo

Introduccin

Que es Android?

Los orgenes
Andi Rubin, considerado el Padre de Android.
Vicepresidente de Ingeniera supervisando el desarrollo de Android

La dulce historia del nombrado

Ejemplo de primera nomenclatura: M3-WB22-TC3. Nombrado alfabtico. 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

Evolucin

Versiones

Grfica distribucin (Noviembre 2012)

Tabla distribucin (Noviembre 2012)

Versin 1.5 1.6 2.1 2.2 2.3 - 2.3.2 2.3.3 2.3.7 3.1 3.2 Honeycomb Nombre Cupcake Donut clair Froyo Ginberbread Api 3 4 7 8 9 10 12 13 Distribucin 0,1% 0,3% 3,1% 12% 0,3%, 53,9% 0,4% 1,4%

4.0 4.1

ICS Jelly Bean

15 16

25,8% 2,7%

Video
Android Evolution

Fragmentacin

Cul es el peor enemigo de Android?

Cul es el peor enemigo de Android?

Cul es el peor enemigo de Android?

El porqu de la Fragmentacin?
Evolucin muy rpida
9 versiones en 5 aos, 400 millones de dispositivos activados, cientos de diferentes modelos de terminales con Android instalado, y ms de 300 partners en diversos mbitos, hardware, software, proveedores de telefona

El porqu de la Fragmentacin?
Perfil de usuarios de Android
A diferencia de los usuarios de Apple, que son conocidos estar muy al da de los lanzamientos de apps y tener una gran cantidad de las mismas instaladas en sus iPhones, la mayora de ellas de pago, apenas un tercio de los usuarios Android cuenta con aplicaciones de pago en su terminal. Tampoco son fanticos de descargar una gran cantidad de apps: sobre un 13% de ellos tiene ms de 50 aplicaciones instaladas.

http://dattatecblog.com/2011/12/%C2%BFcomo-es-unusuario-de-android/

Todo tiene solucin

Libreras de Compatibilidad de Google:
android-support-v4 android-support-v13

Libreras de Compatibilidad no oficiales:

GreenDroid: http://greendroid.cyrilmottier.com/ ActionBarSherlock: http://actionbarsherlock.com/

Guas de diseo
http://developer.android.com/intl/es/design/

Honeycomb, el punto de inflexin

En el 2011 se liber Honeycomb, versin especfica para tablets con muchas novedades.
Ese mismo ao Google lanza su librera de compatibilidad. Empiezan a aparecer libreras no oficiales para ofrecer compatibilidad a la ActionBar.

ICS, estandarizando el diseo

En enero del 2012 Google lanza unas guas de estilo para el desarrollo de Apps sobre ICS.
Tu aplicacin debe esforzarse por combinar la belleza, la sencillez y la intencin de crear una experiencia mgica, sin esfuerzo y poderosa

Unos meses ms tarde lavan la cara de la web de android developers para seguir el estilo ICS

Android-support
Proporciona a los desarrolladores una serie de bibliotecas estticas de apoyo. Desarrollar apps con compatibilidad para una versin de la API, utilizando caractersticas de una versin superior. Android-support-v4 Compatibilidad API >=4 Android-support-v13 Compatibilidad API >=13

ActionBarSherlock
Extensin de la biblioteca de soporte diseado para facilitar el uso del patrn de diseo ActionBar a travs de todas las versiones de Android con una nica API. La biblioteca utiliza automticamente la barra nativa cuando es posible (API >=11) o utiliza la implementacin de Sherlock en caso contrario.

Patrones de Diseo

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

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 aplicacin

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

Action Bar
Est dividida en 4 reas funcionales que suelen ser utilizadas en la mayora de las aplicaciones

Icono de la app Vista de control Action buttons Action overflow

Icono de la app
Es la identidad de la aplicacin, puede cambiarse por un icono distinto del de la misma. Se encarga de la navegacin, al pulsar sobre el icono vuelves al home, muestras un drawer, es aconsejable activar la flecha de back, que acta como el botn de back.

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

Action Buttons
Estn destinados a las acciones ms frecuentes de las actividades. Dependiendo del espacio disponible en la barra se muestran los ms importantes, y el resto van al overflow button. Aqu deberan ir las acciones frecuentes, importantes o tpicas.

Action Buttons
ifRoom: slo aparece si hay espacio. never: no aparecer nunca en la action bar. always: aparecer siempre en la action bar, aunque por el tamao del dispositivo y nmero de elementos mostrados no estuviera definido que apareciera. collapseActionView: indica que es posible mover esta accin al overflow button.

Action Overflow
Este botn est destinado a contener las opciones menos frecuentes de la pantalla. Es el equivalente al antiguo men HW, y slo aparece en dispositivos sin el mismo. Dependiendo del tamao del telfono y la orientacin el nmero de elementos que pueden mostrarse en la Action Bar varan.

Action Overflow

Ejemplos

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; }

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())); } }

Action Buttons con Sherlock

@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getSupportMenuInflater(); inflater.inflate(R.menu.activity_menu, menu); return true;

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" res/menu/activity_menu.xml 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>

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" /> ..

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>

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 accin

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); }

Aadir cada botn a la vista programaticamente desde el fragment o actividad que lo compone. Aadir directamente en el layout que har de action bar

Multi-Pane Layouts
Se introdujeron en Honeycomb para adaptar el contenido de las aplicaciones a los tamaos de pantalla de los tablets. Permiten combinar mltiples vistas o dividir estas en una nica en funcin del espacio disponible en la pantalla.

Multi-Pane Layouts

Multi-Pane Layouts

Multi-Pane Layouts
A nivel de implementacin cuando hablamos de MultiPane nos referimos a los fragments.

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

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" />

res/layout-large/activity.xml

<fragment android:id="@+id/detailFragment" android:layout_width="0dp" android:layout_weight="2" android:layout_height="match_parent" class="com.example.android.DetailFragment/ > </LinearLayout>

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

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 res/layout/list_fragment.xml android:layout_height="match_parent />

<?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

Preguntas?

Enlaces de Inters
Librera de Compatibilidad: http://developer.android.com/intl/es/tools/extras/support-library.html

Libreras 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 Cdigo con los ejemplos: https://github.com/jegumi/DevCon2012