Como utilizar elementos de Android ICS en Froyo: SherlockActionBar
Hay mucha gente contribuyendo para hacernos la vida más fácil, y ese es el caso de la Sherlock Action Bar, http://actionbarsherlock.com/. Es una librería que nos ayudará en el proceso de crear aplicaciones más fácilmente y con un aspecto muy bonito. Os recomiendo que os descargueis las aplicaciones con todos los ejemplos para que podáis ver más facilmente lo que se puede hacer.
El método para empezar a trabajar con ella es muy fácil, simplemente os descargáis la última versión. Yo la he descargado y guardado en una carpeta a parte de donde tengo todos los desarrollos. Ahora importamos el proyecto, para ello vamos a File > New Project > Android Project. Seleccionamos crear desde un proyecto existente y buscamos donde tenemos descargada la SherlockActionBar la carpeta library. Seleccionamos la versión 4.0 de Android y creamos el proyecto.
Ahora podemos incluir en cualquier proyecto esta librería y empezar a trabajar en ella. Para ello hacemos botón derecho sobre nuestro proyecto, vamos a Properties > Android. Abajo de todo, en la sección de librerías, añadimos una librería nueva y aparecerá la Sherlock Action Bar entre las disponibles. La añadís y aplicamos los cambios.
En el AndroidManifest.xml es muy importante añadir uno de los themes de la SherlockActionBar, debería quedar algo así:
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" android:theme="@style/Theme.Sherlock.Light">
El último cambio, como antes, es modificar el AndroidManifest.xml, indicando la versión mínima y la versión "target" o destino. Si todo va bien deberíais ejecutar simplemente la aplicación en una máquina con una versión 2.x y que funcione.
En el vídeo explicativo de la web de SherlockActionBar nos dice que tenemos que añadir la librería del Android Support en nuestro proyecto, pero no debéis hacerlo ya que la coge de la SherlockActionBar y os daría problemas.
Cómo utilizar la ActionBar de Sherlock en Android
La expansión de ActionBarSherlock está muy bien ya que nos va a permitir utilizar todo aquello que se fue implementando en HoneyComb y Ice Cream Sandwich en nuestras aplicaciones con Android 2.x.
Los que os decidáis a utilizar la librería de Sherlock, no vais a tener problemas en utilizar la librería que proporciona Google, ya que esta Sherlock contiene a la de Google.
La librería de Sherlock permite hacer bastantes cosas, los que os descargasteis e instalasteis las aplicaciones de ejemplo seguramente ya visteis algo. Tenéis a vuestra disposición Fragments, Loaders y sobre todo la Action Bar, hoy vamos a ver un ejemplo de como funciona. Yo he cogido varios ejemplos, los he simplificado, y alguna cosilla más que he buscado por internet que no encontré en la documentación y me he creado un menú. Vamos a ver como hacerlo.
Vamos a abrir un proyecto y siguiendo los pasos de la semana pasada vamos a añadir la librería ActionBarSherlock. Una vez hecho esto abriremos la activity donde queremos crear el menú y cambiamos el extends Activity por SherlockActivity o SherlockFragmentActivity, para nuestro ejemplo da igual cual escojáis.
Para que no tengáis que repetir el código del menú a través de todas vuestras activities, podéis crearos una clase que herede de activity donde tengáis el código común a todas, como puede ser este menú, y vuestras activities "de verdad", en vez de heredar de Activity, SherlockActivity o SherlockFragmenActivity que herede de esta clase. De esta forma, un cambio en el menú es muy fácil y rápido.
Bueno, vamos a ver como añadir el menú a nuestra aplicación:
public class ActivityManager extends SherlockFragmentActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().setDisplayShowCustomEnabled(true);
shareTitle = "Titulo de lo que compartimos por defecto";
shareUrl = "Url de lo que compartimos por defecto";
}
protected void setTitle(String title){
getSupportActionBar().setTitle(title);
}
protected void setSubTitle(String subtitle){
getSupportActionBar().setSubtitle(subtitle);
}
private String shareTitle;
private String shareUrl;
protected void setShare(String shareTitle, String shareUrl) {
this.shareTitle = shareTitle;
this.shareUrl = shareUrl;
actionProvider.setShareIntent(shareIntent(this.shareUrl, this.shareTitle));
}
ShareActionProvider actionProvider;
protected SubMenu subMenu;
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportMenuInflater().inflate(R.menu.share_action_provider, menu);
MenuItem actionItem = menu.findItem(R.id.menu_item_share_action_provider_action_bar);
actionProvider = (ShareActionProvider) actionItem.getActionProvider();
actionProvider.setShareHistoryFileName(ShareActionProvider.DEFAULT_SHARE_HISTORY_FILE_NAME);
actionProvider.setShareIntent(shareIntent(shareUrl, shareTitle));
subMenu = menu.addSubMenu("Opciones");
subMenu.add("Home")
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
//Implementar aquí la navegación necesaria
return false;
}
});
subMenu.add("Otro")
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
//Implementar aquí la navegación necesaria
return false;
}
});
subMenu.getItem().setIcon(R.drawable.abs__ic_menu_moreoverflow_holo_light);
subMenu.getItem().setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
return super.onCreateOptionsMenu(menu);
}
public void addSubMenu(String title, OnMenuItemClickListener l){
subMenu.add(title)
.setOnMenuItemClickListener(l);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
//Implementar aquí la navegación necesaria
return true;
default:
return super.onOptionsItemSelected(item);
}
}
private Intent shareIntent(String linkShare, String titleShare){
final Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/plain");
intent.putExtra(Intent.EXTRA_SUBJECT, titleShare);
intent.putExtra(Intent.EXTRA_TEXT, linkShare);
return intent;
}
}
Antes de explicar nada, si escribís este código, vais a notar que despues de añadir todos los import necesarios os dará un error en la línea donde aparece el menú R.menu.share_action_provider, esto es porque hay que crear una especie de layout para este menú. La forma de hacerlo es muy sencilla, simplemente en la carpeta res creais una subcarpeta llamada menu, y a continuación un archivo nuevo llamado share_action_provider.xml. En este archivo colocáis el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_item_share_action_provider_action_bar"
android:showAsAction="always"
android:title="@string/action_bar_share_with"
android:actionProviderClass="com.actionbarsherlock.widget.ShareActionProvider" />
</menu>
Como os decía, un menú es una especie de layout donde se ponen las opciones de un menú. En este caso estamos añadiendo un widget que ya está listo y preparado en la librería ActionBarSherlock y que nos va a permitir compartir en las diferentes redes sociales. El ejemplo de la ActionBarSherlock es un poco más elaborado y comparten una imagen, podéis echarle un ojo en los ejemplos que pone a disposición de todos.
Vamos ahora a ver el código que nos quedó pendiente por explicar. Empezamos por el onCreate, en el definimos el titulo y la url de lo que compartiremos en esta activity por defecto. También accedemos por primera vez a la action bar con getSupportActionBar. En este caso únicamente le decimos que muestre la barra. Echadle un ojo a todos los métodos de getSupportActionBar, tiene muchos métodos interesantes que por espacio no vamos a comentar aquí.
Con los métodos setTitle y setSubTitle podremos setear el título de la action bar en cualquier Activity que herede de esta, y con setShare vamos a cambiar el título y el enlace de lo que queremos compartir. Para compartir se utiliza el método shareIntent, está al final de todo, le pasamos el titulo y el enlace para crear un Intent que se le pasa al widget que se encarga del resto.
El siguiente método, onCreateOptionsMenu, es un evento asociado a una activity que se encarga de construir las opciones del menú. Aquí el menú como lo conocemos en las versiones 2.x de Android desaparece y se pasan a la Action Bar. Lo primero de todo, le decimos que el icono de la aplicación sea un botón para volver hacia la pantalla principal o hacia atrás, esto luego veremos como se hace.
Después hacemos un inflate, es decir, añadimos la plantilla del menú que creamos antes a nuestro menú. Luego se inicializa nuestro objeto ShareActionProvider, y seteamos dos cosas, por un lado, la última red social donde se compartió con setShareHistoryFileName y lo que vamos a compartir con setShareIntent.
Hasta aquí ya podríamos tener un menú, ahora añadiremos alguna opción más. Nosotros lo haremos a través de un submenú. Para ello definimos subMenu y la hacemos protected para poder utilizar en las clases que hereden de esta. Añadimos opciones con subMenu.add("titulo") y seteamos la acción que hará en el onClick, puede ser una navegación a otro sitio o una acción, aquí vais a poner lo que vosotros necesitéis. Al final de todo seteais el icono de este submenú, y como se verá, yo aquí solo quiero que se vea el icono, no el texto.
El icono que he seleccionado está incluido en la librería de ActionBarSherlock, y es el que se pone ahora en ICS en aplicaciones como GMail entre otras. Antes de poneros a buscar iconos por internet echadle un ojo a los que hay aquí.
Como no podía ser de otra forma, en cualquier aplicación siempre vais a tener excepciones y seguro que hay alguna activity que necesita alguna opción más que no son las de siempre, para ello tenéis el métodoaddSubmenu. Con este podéis incluir cualquier otra opción con su correspondiente acción sin tener que hacer nada raro en esta clase.
El último método que os voy a explicar es el onOptionsItemSelected, desde aquí podeis controlar cuando se hace click sobre una determinada opción del menú, esto no sería necesario ya que como visteis antes al crear cada una de las opciones también seteabamos el onClick. Aún así existe una excepción, el click de la imagen de la aplicación que antes dijimos que actuaría para volver hacia la home. En la documentación no encontré como hacerlo, pero buscando en internet vi que simplemente comparando el getItemId() del item que se ha pulsado con el integer que nos da android.R.id.home deben coincidir, y es aquí cuando podemos lanzar una llamada para navegar a la home o lo que vosotros queráis.
Bueno, hasta aquí por esta semana, ahora ya es cosa vuestra el investigar que más se puede hacer con esta librería. Desde mi punto de vista es muy útil y os ahorrará bastante trabajo. Os dejo dos pantallas sacadas desde mi HTC Desire con la versión 2.2 con algunos de los ejemplos.
