«

»

mar 14 2012

Introducción a ActionBarSherlock

 

 

En esta entrada veremos una introducción sobre la librería ActionBarSherlock. Para saber en qué consiste esta fantástica librería que mejor que ver la definición de su autor:

 

“ActionBarSherlock es una extensión de la librería de compatibilidad diseñada para facilitar el uso del patrón de diseño action bar en una única API a través de todas las versiones de Android.

La librería utilizará el action bar nativo cuando esté disponible o utilizará una implementación propia sobre vuestros layouts de una forma automática. Esto nos permite desarrollar de una forma fácil una aplicación con un action bar para todas las versiones de Android desde la 2.x para adelante”.

 

Las aplicaciones GitHub Gaug.es, Mentions y SeriesGuide Show Manager hacen uso de esta librería y pueden darnos una idea del resultado final

 

 

Paso 0 – Importar la librería (sólo si nuestro proyecto no es un proyecto Maven)

 

Lo primero que tenemos que hacer es descargar la librería desde la página oficial y descomprimir el fichero. Dentro de la carpeta descomprimida tendremos dos subcarpetas:

  • library: Es el proyecto librería
  • samples: Proyecto eclipse en el que podremos ver distintos usos de la librería

Lo que debemos hacer es importar el proyecto library en nuestro entorno de desarrollo. Desde eclipse podemos hacerlo creando un nuevo proyecto android y seleccionando la opción “Create project from existing source“, seleccionando la carpeta library como localización del código existente. Hay veces en el que el propio eclipse nos crea el proyecto pero no copia los ficheros, en este caso lo que debemos hacer es copiar el contenido de la carpeta library en la carpeta del proyecto recién creado y luego actualizar el proyecto (botón derecho sobre el mismo y “Refresh“).

Por último añadimos la librería de compatibilidad. Lo más fácil es buscar dentro de la carpeta libs del proyecto el jar android-support-v4.jar, pulsar con el botón derecho sobre el fichero y seleccionar “Build Path -> Add to Build Path“.

 

Paso 1 – Añadir a nuestro proyecto ActionBarSherlock

 

Lo siguiente es añadir la librería ActionBarSherlock a nuestro proyecto. Para ello tenemos dos alternativas:

Si estamos utilizando Eclipse con el plugin de ADT versión 0.9.7 o superior podemos incluir ActioBarSherlock como un proyecto de librería. Para ello simplemente accedemos a las propiedades del proyecto, vamos a la sección “Android” y añadimos el proyecto librería creado en el paso anterior en la sección “Libreries”.

Si nuestro proyecto es un proyecto Maven la cosa se simplifica. Simplemente añadimos la siguiente dependencia:

 

<dependency>
    <groupId>com.actionbarsherlock</groupId>
    <artifactId>library</artifactId>
    <version>4.0.0</version>
    <type>apklib</type>
</dependency>

 

Y nos aseguramos de que incluimos el repositorio http://r.jakewharton.com/maven/release/ en la sección “repositories” de nuestro pom.xml.

Recuerda que nuestro proyecto debe estar compilado contra la versión 4 de android, para verificarlo accede a las propiedades del proyecto y dentro de la sección “Android” verifica que esté marcado el checkbox de Android 4.0.

 

Paso 2 – Proyecto de Ejemplo

 

En este tutorial vamos a trabajar sobre un proyecto que tendrá el siguiente aspecto.

 

 

Para poder hacer uso del ActionBar de Sherlock debemos cumplir dos requisitos:

  • Hacer que nuestras Activity extiendan de alguna de las clases activity de ‘Sherlock’ (por ejemplo SherlockActivity o SherlockFragmentActivity).
    La interacción con el action bar la tendremos que hacer con el método getSupportActionBar() (en lugar de getActionBar()).
    La API del ActionBar es un duplicado exacto del action bar nativo. Por tanto, la documentación y los artículos oficiales son totalmente válidos. Puedes consultar la API oficial aquí.
  • Hacer uso de los temas de Sherlock como Theme.Sherlock, Theme.Sherlock.Light, Theme.Sherlock.Light.DarkActionBar o extender alguno de estos.

En nuestro ejemplo, hemos optado por la opción más sencilla que es la de extender de com.actionbarsherlock.app.SherlockActivity.

 

package es.androdoce.introactionbar;

import android.os.Bundle;

import com.actionbarsherlock.app.SherlockActivity;

public class MainActivity extends SherlockActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

 

Por otro lado, se ha creado un fichero background.xml en res/drawable que se usará para el fondo del Action Bar y un fichero themes.xml en res/values para crear nuestro propio tema que extienda de Theme.Sherlock.Light.DarkActionBar.

 

background.xml

 

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

    <gradient
        android:angle="90"
        android:endColor="#769327"
        android:startColor="#a3ca3a" />

</shape>

 

themes.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Styled"
           parent="Theme.Sherlock.Light.DarkActionBar">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>
    <style name="Widget.Styled.ActionBar"
           parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/background</item>
        <item name="android:background">@drawable/background</item>
    </style>
</resources>

 

Por último configuramos el AndroidManifest.xml para que utilice nuestro tema

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="es.androdoce.introactionbar"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Styled" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

Si ejecutamos tal cual el proyecto ya tendremos una aplicación, muy simple eso sí, con nuestro Action Bar.

 

 

Paso 3 – Añadiendo botones y modificando comportamiento

 

Una de las formas más sencillas de añadir botones a nuestro action bar es crear un menú estándar de android. Si especificamos que el menú debe mostrarse siempre como un action, los elementos del menú aparecerán en la barra. Para hacer el menú, lo primero es crear un fichero XML en res/menu. En nuestro caso lo hemos llamado main.xml y el contenido es el siguiente:

 

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

    <item
        android:id="@+id/favoritos"
        android:icon="@drawable/ic_menu_star"
        android:showAsAction="always"
        android:title="@string/favoritos"/>

    <item
        android:id="@+id/configuracion"
        android:icon="@drawable/ic_menu_preferences"
        android:showAsAction="always"
        android:title="@string/configuracion"/>

</menu>

 

Aquí hay varias cuestiones importantes:

  1. Los iconos se han copiado del SDK de android (android-sdk-/platforms/android-15/data/res/drawable) a nuestro proyecto
  2. Se ha incluido el atributo showAsAction con valor always para que los elementos aparezcan en el Action Bar
  3. Se han definido los strings ‘favoritos’ y ‘configuracion’ en res/values.xml

Una vez creado el fichero del menú, veamos como quedaría finalmente la clase MainActivity, que muestra las opciones en el action bar

 

package es.androdoce.introactionbar;

import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;

public class MainActivity extends SherlockActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.favoritos) {
            startActivity(new Intent(this, FavoritosActivity.class));
        } else if (item.getItemId() == R.id.configuracion) {
            Toast.makeText(this, "configuración pulsado", Toast.LENGTH_SHORT).show();
        }
        return true;
    }
}

 

Vamos a repasar los puntos conflictivos de este código:

  1. Los imports deben ser los de sherlock, por ejemplo se ha utilizado com.actionbarsherlock.view.Menu en lugar de android.view.Menu
  2. Se crea el menú a partir del fichero XML de la forma estándar, con la salvedad de que recuperamos el objeto MenuInflater con el método getSupportMenuInflater()
  3. Si se pulsa en favoritos iniciamos la actividad FavoritosActivity que veremos a continuación. Si se pulsa configuración se muestra un mensaje emergente que puede ser fácilmente sustituido por una acción cualquiera (iniciar una activity, ejecutar otro método, etc.)

El aspecto ahora sería el siguiente:

 

 

Ahora vamos a ver la clase FavoritosActivity:

 

package es.androdoce.introactionbar;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ArrayAdapter;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.SherlockListActivity;
import com.actionbarsherlock.view.MenuItem;

public class FavoritosActivity extends SherlockListActivity {

    private static final int NUM_FAVORITOS = 30;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActionBar ab = getSupportActionBar();
        ab.setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE|ActionBar.DISPLAY_SHOW_HOME|ActionBar.DISPLAY_HOME_AS_UP);
        ab.setTitle(getString(R.string.favoritos));

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, android.R.id.text1, valores());
        setListAdapter(adapter);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            Intent intent = new Intent(this, MainActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP|Intent.FLAG_ACTIVITY_NEW_TASK);
            startActivity(intent);
            return true;
        }
        return true;
    }

    private String[] valores() {
        String[] valores = new String[NUM_FAVORITOS];
        for (int i = 1 ; i <= NUM_FAVORITOS ; i++) {
            valores[i-1] = "Favorito " + i;
        }
        return valores;
    }

}

 

En esta clase se ha optado por no incluir ninguna acción. Por el contrario se muestra cómo modificar las opciones del ActionBar a través del menú setDisplayOptions y especificar un título a nuestra elección. Podemos pasar al método el número de opciones que queramos, siempre separadas por el símbolo |. En el ejemplo se han pasado las siguientes:

  1. ActionBar.DISPLAY_SHOW_TITLE -> Para que muestre el título en el action bar
  2. ActionBar.DISPLAY_SHOW_HOME -> Para que muestre el botón del icono
  3. ActionBar.DISPLAY_HOME_AS_UP -> Para que muestre la flecha junto al icono

Puedes ver las opciones aceptadas en la API oficial del Action Bar.

El método onOptionsItemSelected se sobreescribe para capturar la pulsación sobre el icono y así volver a ejecutar la actividad principal.

 

 

Ahora sólo nos queda añadir la actividad FavoritosActivity al fichero AndroidManifest.xml

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="es.androdoce.introactionbar"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Styled" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".FavoritosActivity" />
    </application>
</manifest>

 

Y aquí acaba nuestra introducción a la ActionBar de Sherlock. Si quieres más información puedes visitar la página oficial en la que encontrarás muchos recursos, soporte y cómo apoyar a este gran proyecto.

Puedes descargar el código fuente del proyecto a través del Intro-ActionBar.

 

Acerca del autor

FedeProEx

Ingeniero Informático en la Universidad de Sevilla, programador Java y amante del Heavy Metal. Soy desarrollador android fuera del horario de trabajo con algunas aplicaciones en el market como Tiempo AEMET o aconTags

  • jvier

    Estupendo! , haz probado greendroid? si es asi que opinión tienes de ambas?. Hasta ahora solo he utilizado gd para mis pequeñas apps

    • FedeProEx | Redactor

      Muchas gracias!, si que he probado Greendroid y tengo que decir que es fantástica. Sin embargo el desarrollo está muy parado y ActionBarSherlock no sólo te permite implementar un action bar en tus aplicaciones sino que lo hace de una forma estándar, todo lo que aprendas con esta librería puedes aplicarlo directamente al action bar de la API de android.

  • http://dimogdroid.wordpress.com/ dimogaru

    Muy buen trabajo. Tiene muy buena pinta. Habrá que incorporarla a futuras apps ;)
    Un abrazo.

  • Fran

    ¿Como puedo importar los samples que te viene en eclipse para así compilarlos y ver los ejemplos?
    Un abrazo.

    • FedeProEx | Redactor

      Buenas, tienes que hacer la misma operación que al importar la librería. Es decir, crear un nuevo proyecto android con fuentes existentes, marcando “Create project from existing source“ y elegir la carpeta “demos”, “fragments” o “roboguice” (cada una es un proyecto). Al igual que la librería es posible que eclipse no te copie todos los ficheros y tengas que hacerlo tu a mano tras crear el proyecto.

      Saludos

      • Fran

        Muchísimas gracias seguid así fantásticos tutoriales, un saludo

    • https://www.facebook.com/benny.alonso2 Benny Roberto Rubio Alonso

      hola, me parece un trabajo excelente, tengo una duda al importar el codigo me marca muchos errores y no lo puedo correr me podrian ayudar por favor?

  • Leonel

    Hola que tal el tutorial me parece excelente ya que estoy aprendiendo a usar esta libreria.
    Quisiera ver si hay la posibilidad de tener otro tutoriales un poco más avanzados con esta libreria ya que no hay mucho material de donde aprender.
    @leon_androide.

    • FedeProEx | Redactor

      Muchas gracias!. De momento puedes descargarte los proyectos de ejemplo de la web de ActionBar Sherlock. Están muy completos y te dan una idea de cómo personalizar los estilos o hacer uso de funciones más avanzadas. Saludos

  • http://www.eusebit.com Eusebio

    Hola!!

    Primero de todo felicitarte por el post, está muy bien hecho y da luz a otros posts más escuetos que hay por ahí sobre la librería Sherlock.

    Ahora mismo estoy pasando una aplicación que he hecho para tablet Honeycomb (Api 11+) a móvil y me gustaría seguir usando fragments y Action Bar ya que seguí el esqueleto de una sample de honeycomb y partir de ahí la monté.

    Crees que esta librería me puede llegar a permitir hacer un solo apk que sirva para todos los dispositivos de Android? (adaptando drawables para cada densidad de pantalla)… Android es un poco infiernillo para esto y la verdad estoy buscando una fórmula que pueda aplicar a otras apps futuras.

    Gracias de antemano!!!

    • FedeProEx | Redactor

      Hola!, muchas gracias por las felicitaciones, me alegro que sea útil.

      Lo que pides es la idea de programar con fragments, hacer un único apk para todos los dispositivos. El único problema es que en la realidad puede volverse un poco engorroso si tu aplicación es demasiado compleja. No obstante la idea es esa y en el blog de android (http://android-developers.blogspot.com.es/2011/02/android-30-fragments-api.html) puedes encontrar un ejemplo de cómo variar una interfaz en función si se está mostrando horizontal o vertical.

      Saludos

  • Leandro

    ¿Que ventaja tiene usar esta librería hoy en día teniendo “android compatibility helper” que hace lo mismo y ademas es de google?

    • FedeProEx | Redactor

      Buenas

      Si no te he entendido mal te refieres a la compatibility library (support package), no?. Realmente la librería ActionBar Sherlock no reemplaza dicha librería sino que la utiliza y complementa añadiendo el ActionBar, que no está presente en la compatibility library. Esa es su función principal, de ahí el nombre. Espero haber respondido a tu duda.

      Saludos

  • Pingback: Denty – Cliente de Identi.ca para Android (beta) « Nunc Id Vides, Nunc Ne Vides()

  • Ivan

    Enhorabuena por el tutorial FedeProEx!
    Esta todo muy bien explicado pero yo tengo una duda inicial q no me deja continuar: tengo el Eclipse Juno y en esta versión no está la opción “Create project from existing source“ para integrar la librería ActionBarSherlock. He leído en algún foro que también se puede hacer con File/Import/Existing Projects into workspace pero me sale el aspa roja cuando importo la carpeta library de ActionBarSherlock. Si intento añadir la librería me sale un exclamación roja en el proyecto al que la quiero integrar.
    He leido muchos tutoriales pero ninguno me soluciona el problema, he probado con otras versiones de Eclipse y nada de nada.

    Muchas gracias por tu ayuda de antemano.

    Un saludo

    • ronald

      Ya tuve problemas en instalar la libreria pero al fin pude. Que tuve que hacer:
      *Tener instalada la API version 14 que es android 4.0
      *Tener instalada la API version 15 que es android 4.0.3

      Cuando no tenia esas API no me aceptaba la libreria.

      Cuando ya tenia instaladas las SDK aun importanto me salian errores en la carpeta src, todos eran por el @Override, para solucionarlo hay que modificar el compilador java. Te vas a Windows -> Preferences -> Java -> Compiler ahi cambias el level del compilador, por ejemplo el mio estaba en version 1.7, tienes que cambiarlo a 1.6 y retrocompatibilidad en 1.5, aplicas los cambios y listo.

      De esa manera ya no me daba errores pero la libreria aun no está añadida, para eso hay que darle click derecho sobre la carpeta de la libreria, buscamos Android tools -> Add support library

      Ojala te sirva y les sirva a otros que tambien tengan problemas en instalar el actionbarsherlock

      PD, saludos desde Nicaragua :D ..
      PD 2 Gracias por compartir sus conocimientos al autor de la nota.

    • FedeProEx | Redactor

      Hola Ivan,

      Debes buscar una opción parecida. Lo de importar proyectos (File/Import/Existing Projects) es para importar proyectos de eclipse mientras lo otro es para crear un proyecto a partir de un código existente. Son dos cosas distintas por lo que debe estar presente. Creo recordar que en Juno tienes que seleccionar nuevo proyecto android y luego hay un radio button que te permite seleccionar si es un proyecto nuevo o hay código existente, pero no estoy muy seguro pues yo uso la versión Indigo.

      Espero que se solucione el problema. Saludos

  • http://www.wanderlustguides.com Jorge

    Hola, he estado intentando meter el actionbar sherlock. Tengo una duda, mi app la he hecho sobre versión 2.1 para que tenga la mayor compatibilidad con los dispositivos. Es posible meter el actionbar en una version android 2.1? ?

    • Jorge

      Lo pregunto, porque al meter la libreria, parece que se me pierde la referncia de mi .R. sabeis por qué?

    • Ivan

      Hola Jorge, por lo q yo he leido con ActionBarSherlock hay q compliar en API 4 o superior pero es compatible con el resto de versiones inferiores
      Espero q te sirva
      Un saludo

  • Carlos

    Hola amigo,
    Solo paso para agradecerte. Esta muy bien explicado sin dejar nada al azar.
    Excelente trabajo. Saludos desde Uruguay

    • FedeProEx | Redactor

      Muchas gracias Carlos. Un saludo

  • Jose

    No tienes un tutorial o un ejemplo de como usar los Fragment con los TabHost con sherlock ?

    • FedeProEx | Redactor

      De momento no, pero es posible que se haga próximamente algún artículo relacionado en el blog.

      Saludos

  • Fran

    Hola FedeProEx,

    Estoy siguiendo el tutorial y he agregado sin problema la librería con los ejemplos (no da error), pero creo un proyecto nuevo y simplemente cuando agrego la librería me dice lo siguiente:

    [2012-09-14 02:49:36 - exemple] Path: C:\workspace\exemple\libs\android-support-v4.jar
    [2012-09-14 02:49:36 - exemple] Length: 349252
    [2012-09-14 02:49:36 - exemple] SHA-1: 612846c9857077a039b533718f72db3bc041d389
    [2012-09-14 02:49:36 - exemple] Jar mismatch! Fix your dependencies

    Estoy probando de todo, creando de nuevo los proyectos, quitando y poniendo la librería y casí todo lo que estoy leyendo por ahí pero por ahora nada… ¿Alguna idea?

    saludos y gracias!

    • Fran

      Por si alguien más se encuentra con el mismo problema:

      He conseguido solucionarlo, era necesario reemplazar manualmente el fichero “libs/android-support-v4.jar” que trae por defecto ABS por el que contiene el nuevo proyecto de eclipse.

      Resulta que el fichero “android-support-v4.jar” que contiene ABS está desactualizado.

      Por cierto tengo una duda sobre el tutorial cuando dices cosas como:
      “Los iconos se han copiado del SDK de android (android-sdk-/platforms/android-15/data/res/drawable) a nuestro proyecto”

      ¿Te refieres hacerlo manualmente no?

      • FedeProEx | Redactor

        Me alegro que se solucionara!.

        Efectivamente, los iconos los he copiado manualmente a través del explorador de archivos al proyecto en eclipse.

  • Laura

    Hola, quería preguntaros cómo puedo desde cualquier Activity modificar por ejemplo la imagen que tiene Favoritos:

    Es decir, modificar esa ic_menu_star y personalizar según quiera en cada momento, para que esa imagen no sea siemopre esa.

    Gracias!!!

    • FedeProEx | Redactor

      Hola!,

      Es fácil, una vez creado el menú puedes recuperar el elemento en cuestión a través del id y luego cambiar su icono mediante el método setIcon:

      1
      2
      3
      4
      5
      6
      7
      8
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
          MenuInflater inflater = getSupportMenuInflater();
          inflater.inflate(R.menu.main, menu);
          MenuItem item = menu.findItem(R.id.favoritos);
          item.setIcon(R.drawable.ic_menu_star);
          return true;
      }

      Saludos!

  • ronald
    • ronald

      Soy yo de nuevo, parece que no cerré la etiqueta <a href con el link al video XD ..

      • ronald

        Pude resolver el inconveniente, en realidad era un error tonto, cuando añadía la librería también marcaba la casilla “it’s library” y por eso no podía compilar la aplicación

  • Pablo

    Hola FedeProEx,

    muchas gracias por el artículo, está genial!! Tengo un par de dudas. Se podría desactivar lo de que aparezca un Toast con el string del item, cuando se hace una pulsación larga sobre los elementos del BarTab?

    Y la otra duda: si se configurar un item en el XML como: android:showAsAction=”never”
    Luego se puede hacer desde código en tiempo de ejecución para que se vea? O viceversa? Y también lo que preguntaban más arriba, se le podría cambiar la imagen al item en tiempo de ejecución?

    Muchas gracias, un saludo.

    • FedeProEx | Redactor

      Hola,

      Me alegro que os sea útil. Te contesto a tus dudas según lo que yo entiendio:

      * Lo del toast es el nombre de la opción, es tema del action bar de android y permite dar más información además del icono. En su día miré como quitarlo pero no encontré una solución fácil y al fin y al cabo no merece la pena, es algo estándar.

      * Puedes hacerlo, como he puesto más arriba (en la duda del icono) puedes recuperar el elemento del menú y luego modificarlo mediante métodos. En el caso del showAsAction puedes utilizar el método setShowAsAction

      Saludos!

      • Pablo

        Muchisimas gracias FedeProEx, va perfecto.

  • Angeles

    Buenas FedeProEx!
    Estoy intentando incluir la librería en mi proyecto y en el proyecto library me da el siguiente error:

    R cannot be resolved to a variable ActionBarView.java /library/src/com/actionbarsherlock/internal/widget line 828 Java Problem

    The import com.actionbarsherlock.R cannot be resolved ActionBarView.java /library/src/com/actionbarsherlock/internal/widget line 49 Java Problem

    Muchas gracias de antemano, un saludo.

    • FedeProEx | Redactor

      Hola!,

      Comprueba que las librerías de todos los proyectos estén bien importadas (botón derecho sobre cada proyecto, Propiedades -> Android y comprueba que tienen un check verde y no rojo). Luego haz un Project -> Clean… -> Clean all projects a ver si se soluciona.

      Algo que siempre puede dar pistas es la venta de errores (Window -> Show view -> Problems).

      Ya nos cuentas

      • Angeles

        Ya lo he solucionado, parece ser que había problema con los override de la libreria, el caso es que ya me ha generado la clase R. y no aparecen problemas.

        Muchas gracias por la atención, un saludo

  • Fernando

    +1

  • Jorge

    Muy bueno Fede. Muchas gracias.

  • Fran

    Buenas,

    primeramente felicitarte por el trabajo que has hecho para que otros podamos aprender.
    Y lo segundo comentarte que soy principiante en Android y trabajo con netbeans, ya que lo había usado en otros proyectos. Aún así no encuentro la forma de Importar la librería de forma correcta para que el proyecto la detecte y compile.

    ¿Me podrías echar una mano con eso?

    Muchas gracias de antemano.
    Y felicitarte nuevamente.

    • FedeProEx

      Hola!,
      La verdad es que aunque he usado y uso NetBeans para muchos desarrollos nunca lo he probado para trabajar con android. Sinceramente creo que la mejor opción es trabajar con Maven, NetBeans tiene un gran soporte para esta herramienta por lo que no vas a tener ningún tipo de problema. Si necesitas un ejemplo, la propia librería de ActionBarSherlock está organizada con Maven.
      Espero haberte ayudado.
      Saludos

  • Elias

    Hola FedeProEx.

    quería felicitarte por lo excelente del articulo, me ha servido de mucho. pero quería hacerte la siguiente pregunta.
    como puedo alinear los item del actionBar a la izquierda, o a ambos lados? espero tu respuesta Saludos desde Chile.

    • FedeProEx

      Gracias!, me alegro que sea útil el artículo. Lo primero que has de tener en cuenta es que ActionBarSherlock es una librería para utilizar el ActionBar en versiones 2.x en adelante. Esto quiere decir que para buscar cómo hacer algo debemos hacerlo como si estuviéramos utilizando el ActionBar nativo.

      Dicho esto, creo que no es una buena práctica. Ten en cuenta que la filosofía es similar al menú normal de android, añades elementos y eliges el orden, texto e icono de cada uno pero no tiene mucho sentido modificar la estructura del menú. Con el ActionBar pasa algo similar, la idea es tener un aspecto y funcionamiento común entre todas las aplicaciones.

      No obstante si aun así necesitaras forzosamente cambiar el aspecto tendrías que hacerlo creando una vista personalizada y asignarla con setCustomView. Aquí, aquí y aquí tienes algunas respuestas a tu pregunta.

      Saludos

  • Pingback: Diseño Android: Dashboard UI con LinearLayout « danielme.com()

  • Jesús López Morales

    Muchas gracias, me ha servido mucho y está muy bien explicado.

    Ahora a ver si consigo implementar fragments junto con esto y ya.. puf!

    Un saludo!

  • Pingback: Implementación del menú lateral (SlidingMenu) | Androcode()

  • Andres

    Hola tengo un problema con action bar . Necesito ubicar 2 botones en la parte superior derecha del menu, un boton de facebook y uno de twitter, el asunto es que ya lo logre, pero necesito las acciones de los botones.
    “abrir facebook y abrir twitter dependiendo del onclick.

    este es el codigo donde creo los 2 botones.

    te agradeceria montones tu ayuda !!

    public class MainActivity extends SherlockActivity implements ISideNavigationCallback {

    public static final String EXTRA_TITLE = “com.devspark.sidenavigation.sample.extra.MTGOBJECT”;
    public static final String EXTRA_RESOURCE_ID = “com.devspark.sidenavigation.sample.extra.RESOURCE_ID”;
    private static final String SHARED_FILE_NAME = “shared.png”;

    private ImageView icon;
    private SideNavigationView sideNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    icon = (ImageView) findViewById(android.R.id.icon);

    sideNavigationView = (SideNavigationView) findViewById(R.id.side_navigation_view);
    sideNavigationView.setMenuItems(R.menu.side_navigation_menu);
    sideNavigationView.setMenuClickCallback(this);

    if (getIntent().hasExtra(EXTRA_TITLE)) {
    String title = getIntent().getStringExtra(EXTRA_TITLE);
    int resId = getIntent().getIntExtra(EXTRA_RESOURCE_ID, 0);
    setTitle(title);
    icon.setImageResource(resId);

    }

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    }

    /**
    * Metodo que agrega REDES SOCIALES EN LA ESQUINA SUPERIOR DERECHA
    *
    * @param menu
    */
    public boolean onCreateOptionsMenu(Menu menu) {

    boolean isLight = SampleList.THEME == R.style.Theme_Sherlock_Light;

    onPrepareActionMode(menu);

    menu.add(“Facebook”).setIcon(isLight ? R.drawable.fb : R.drawable.fb)
    .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

    menu.add(“Twitter”).setIcon(isLight ? R.drawable.tw : R.drawable.tw)
    .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

    return true;
    }

    /**
    * Creates a sharing {@link Intent}.
    *
    * @return The sharing intent.
    */
    private Intent createShareIntent()
    {
    Intent shareIntent = new Intent(Intent.ACTION_SEND);
    shareIntent.setType(“image/*”);
    Uri uri = Uri.fromFile(getFileStreamPath(“shared.png”));
    shareIntent.putExtra(Intent.EXTRA_STREAM, uri);
    return shareIntent;

    }

    /**
    * Copies a private raw resource content to a publicly readable file such
    * that the latter can be shared with other applications.
    */
    private void copyPrivateRawResuorceToPubliclyAccessibleFile() {
    InputStream inputStream = null;
    FileOutputStream outputStream = null;
    try {
    // /inputStream = getResources().openRawResource(R.raw.robot);
    outputStream = openFileOutput(SHARED_FILE_NAME,
    Context.MODE_WORLD_READABLE | Context.MODE_APPEND);
    byte[] buffer = new byte[1024];
    int length = 0;
    try {
    while ((length = inputStream.read(buffer)) > 0) {
    outputStream.write(buffer, 0, length);
    }
    } catch (IOException ioe) {
    /* ignore */
    }
    } catch (FileNotFoundException fnfe) {
    /* ignore */
    } finally {
    try {
    inputStream.close();
    } catch (IOException ioe) {
    /* ignore */
    }
    try {
    outputStream.close();
    } catch (IOException ioe) {
    /* ignore */
    }
    }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case android.R.id.home:
    sideNavigationView.toggleMenu();
    break;
    default:
    return super.onOptionsItemSelected(item);
    }
    return true;
    }

    }

    • FedeProEx

      Ten en cuenta que los iconos del ActionBar corresponen al menú. Por tanto, cuando se pulse sobre algún elemento del menú (en tu caso los iconos de facebook y twitter) se llamará al método onOptionsItemSelected pasándote como argumento el elemento pulsado. Es ahí donde tienes que abrir facebook o twitter en función del elemento pulsado.

  • Pingback: Implementación del menú lateral (SlidingMenu) | AndroidDevMx()

  • David

    Hola, disculpa podrias hacer un tutorial para utilizar actionbarcompat el cual tambien da soporte para las versiones de android 2.3. Gracias

    • FedeProEx

      Buenas, ActionBarSherlock es compatible para todas las versiones a partir de la 2.1 (Eclair). Saludos

  • http://www.aprendiendodeandroidymas.com Gabriel

    Me gusto el post, muy sencilla la explicación ;) saludos

  • Pingback: Cómo hacer más cómodo el trabajo con Eclipse | Androcode()

  • Jose María

    Hola FedeProEx.
    Enuhorabuena por el manual.
    Me he encontrado con un problema al visulizar los iconos. Si le decimos a las opciones de menú que visualize iconos del SDK no hay ningún problema, lo hace perfectamente. El problema lo he tenido al susituir estos iconos por otros. Aquí me he encontrado que hay iconos que visualiza y otros que no lo hace. ¿Sabes que tienen de especial los iconos que no llegan a visualizarse? En concreto los que no me visualiza estan obtenidos de un ejemplo de utilización de ActionBar. (No es que los haya creado yo)
    Un saludo y gracias por todo.

    • FedeProEx

      Hola,

      La verdad es que no se muy bien cuál puede ser el problema, pero revisa la documentación para el parámetro android:showAsAction por si fuera eso.

      Saludos

  • Angel

    Felicidades a toda la gente de Androcode. Haceis un trabajo extraordinario!

  • Mercedes

    Fabuloso el tutorial, solo con una consulta, yo tengo inconveniente a la hora de aplicar los estilos

    @style/Widget.Styled.ActionBar

    siempre me saca error de que solo aplica desde la versión 11, he buscado que diferencias significativas tengo con el ejemplo y no logro encontrar el motivo.

    Si pudiesen ayudarme, agradecería.

    • FedeProEx

      Hola Mercedes, en primer lugar muchas gracias por los ánimos. Te comento, el estilo Widget.Styled.ActionBar lo defines tú, es decir, en la configuración de los estilos debe ir:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
          <style name="Theme.Styled"
                 parent="Theme.Sherlock.Light.DarkActionBar">
              <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
              <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
          </style>
          <style name="Widget.Styled.ActionBar"
                 parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">;
              <item name="background">@drawable/background</item>
              <item name="android:background">@drawable/background</item>
          </style>

      Por tanto, comprueba que tienes puestos ambos estilos e incluidos en un fichero xml dentro de la carpeta values.

      Espero que se solucione el problema, saludos.

      • Guillermo

        Esos estilos parece que no los encuentra:
        error: Error: No resource found that matches the given name: attr ‘actionBarStyle’.
        error: Error retrieving parent for item: No resource found that matches the given name ‘Widget.Sherlock.Light.ActionBar.Solid.Inverse’.

  • Pingback: 10 herramientas fuera de Eclipse para trabajar con Android (1/2) | Androcode()

  • Pingback: Eclipse: Cómo hacer más cómodo el trabajo con Eclipse | Base de Datos de Conocimiento()

  • Martin

    Excelente ayuda! MOSTRO’

  • Ollie

    Hola excelente tutorial!!
    Me preguntaba si existe alguna manera de utilizar ActionBarSherlock para colocar una barra de herramientas en la parte de abajo, es decir como si fueran botones

    Gracias :D

    • FedeProEx

      Claro, puedes hacerlo de forma estándar, ya que ActionBarSherlock es compatible. Simplemente utilízalo como si estuvieras en API level 14 y la librería de Sherlock hará el resto del trabajo.

      El nombre oficial es split ActionBar, puedes encontrar más información en los siguientes enlaces:

      Guía android
      Referencia xml

      Saludos

  • Javi

    Buenas,

    enhorabuena por el tutorial, me sirvió de mucho. Una vez visto es simple y se va investigando y se van sacando cosas, pero para empezar de primeras es una guía perfecta.

    Gracias, un saludo.

  • Nacho

    Buenas FedeProEx, lo primero enhorabuena por el excelente post!! Muy bien explicado y estucturado.

    Tengo algún problema al intentar usar la ActionBarSherlock en mi aplicación. Yo antes implementaba la ActionBar de Google pero cuando arrancaba la app en una versión 2.3.3 me petaba, por tanto, me decidí a cambiar a la Actionbar Sherlock.
    He seguido todos los pasos y después de solventar algunos errores, arranco la app pero no se me ve la ActionBar, es como si no hubiera modificado nada…quizás debido a algo que no he hecho bien.
    Cuando digo algunos errores, me refiero a que por ejemplo, yo ya tenía importada la librería “android_support_v4.jar” y al incluir en mi proyecto la librería “library” como mencionas al principio me sale el siguiente error:

    “Found 2 versions of android-support-v4.jar in the dependency list,
    - but not all the versions are identical (check is based on SHA-1 only at this time).
    – All versions of the libraries must be the same at this time.
    – Versions found are:
    – Path: C:\Users\MyName\Downloads\ActionBar\JakeWharton-ActionBarSherlock-88fc341\library\libs\android-support-v4.jar
    – Length: 271754
    – SHA-1: 53307dc2bd…5807de4b
    – Path: C:\Users\MyName\workspace\MiApp\libs\android-support-v4.jar
    – Length: 385685
    – SHA-1: 48c94ae70f…5909bb096e
    – Jar mismatch! Fix your dependencies”

    Entiendo que no es compatible el tener dos librerías “android_spupport_v4.jar” (la de mi proyecto y la que incluye la librería “library”, por lo que he probado a eliminar una de ellas, se me quita el error pero no me aparece al ejecutar mi aplicación.
    He seguido todos los pasos para definir un nuevo estilo, y demás configuración pero nada.
    Espero me puedas ayudar.

    Saludos y gracias!

    • FedeProEx

      Buenas Nacho,

      Efectivamente el problema que incluyes sobre las librerías es que ambas están añadidas pero son distintas. La solución si no usas Maven es que las dos coincidan, bien copiando el jar de tu proyecto en el de actionbar o viceversa. Con respecto a que no aparezca el actionbar no te sabría decir, pero podría estar relacionado con el tema que utilizas. Asegúrate de que tu tema extiende alguno de los de ActioBar Sherlock (http://actionbarsherlock.com/theming.html).

      Saludos

      • Nacho

        Muchas gracias FedeProEx, ya lo solucioné volviendo a importar de nuevo la librería, y corrigiendo algunos ajustes.

        - Por cierto, si en mi aplicación tengo una pantalla de presentación de la aplicación con el logotipo y poco más, ¿cómo puedo hacer para que me aparezca la Actionbar Sherlock en todas las activities menos en esa? Esa clase sigue heredada de ‘Activity’ y sin embargo me sale tmb la ActionBarSherlock, con lo que queda un poco feo.

        - Una última cosa, si configuro mi proyecto con un Target Google APIs 16 (v 4.1.2) y mi Manifest con:
        android:minSdkVersion=”7″
        android:targetSdkVersion=”16″
        ¿Cómo puedo hacer para probar mi aplicación en un emulador versión 2.3.3?
        Tengo creados un emulador de la v 2.3.3 y otro de la v 4.1.2, pero únicamente me deja seleccionar éste úlitmo.

        Muchas gracias, saludos!

        • FedeProEx

          - Deja que la activity herede de SherlockActiviy y en el AndroidManifest.xml pon el theme de dicha activity a Theme.Sherlock.NoActionBar

          – Debería dejarte ejecutarlo sobre el emulador 2.3.3, no te sabría decir. Intenta buscar información por internet.

          Saludos!

          • Nacho

            Correcto, solucionada la primera cuestión.
            Gracias.

  • David (@d4vidom)

    Hola que tal, ante que nada gracias porque tu tutorial me ha servido mucho, te quiero preguntar lo siguiente; cómo le puedo hacer para que tambien al pulsar el botón fisico del menu de mi telefono tambien se despliegue el menu que hice con actionbarsherlock espero me puedas ayudar gracias!!!

    • FedeProEx

      Bueno en teoría debería de hacerlo de forma automática, no tienes que configurar nada.

  • Pingback: La vida después del Google I/O | Androcode()

  • Nacho

    Hola FedeProEx, ¿sabes si el icono de la aplicación que aparece en el ActionBar tiene que ser el mismo icono que aparece en el menú de aplicaciones de tu móvil?
    En caso de que no, como cambiar uno y otro.
    Gracias, saludos.

    • FedeProEx

      Lo más fácil es usar el logo. Te creas la imagen que quieres que aparezca en el ActionBar y en el AndroidManifest especificas el atributo logo para cada activity que quieras personalizar:

      1
      2
      3
      4
      <activity>
          android:logo="@drawable/my_custom_logo"
          ...
      </activity>

      Esta es la forma estándar, el icono define la imagen del menú de aplicaciones y el logo el que aparece en el ActionBar.

      • Nacho

        OK, perfecto. Comprobado y solucionado.
        Gracias por la ayuda, y sobre todo, por la pronta respuesta.
        Un saludo ;D

  • Nacho

    Hola de nuevo FedeProEx, disculpa que te vuelva a preguntar pero es que estoy trabajando con el ActionBar y me surgen dudas de vez en cuando.
    En esta ocasión, ejecuto mi app en emuladores de versiones 2.3.3 y 4.1, y tengo varios iconos en dicha barra de acciones. En la versión 4.1 me aparece en el ActionBar un icono de éstos y el resto justo al lado al pulsar el menú overflow, pero en la versión 2.3.3 únicamente me aparece el icono suelto, es decir, no me aparece el menú overflow con el resto de iconos. He comprobado que el único icono que aparece es el que tiene puesta la opción ‘android:showAsAction=”always”‘, pero si se la pongo al resto de iconos del menu se muestran en el ActionBar ocultándome el título de la app que tengo en ella…por tanto, ¿por qué no me aparece el menú overflow con el resto de acciones en la versión 2.3.3?¿cómo puedo hacer para que aparezca y no tener que mostrarlos en la barra?

    Saludos, y gracias de nuevo.

    • FedeProEx

      Eso es porque en teléfonos antiguos, si tienen tecla física de menú, no se muestra el “menú overflow” sino que el resto de iconos aparecerán al pulsar la tecla. Si no tiene tecla física si se muestra. En tu caso, el emulador 2.3.3 simula tecla física de menú.

      Échale un vistazo a esta página: http://developer.android.com/design/patterns/compatibility.html

      Como recomendación, evita siempre que puedas el ‘android:showAsAction=”always”‘

      Saludos!

      • Nacho

        Ya, ya me había dado cuenta que no aparecían los iconos en el menú overflow y si en un menú situado en la parte inferior de la pantalla al pulsar sobre la tecla menú, mi pregunta era por si se podía simular en la versión 2.3.3 un menú overflow para que la app tuviera el mismo aspecto que en la versión 4.1.
        Si evito la opción: ‘android:showAsAction=”always”‘, ¿cómo hago para que algún icono se muestre en el ActionBar? ¿Con la opción: ‘android:showAsAction=”ifRoom”‘?

        Gracias.

        • FedeProEx

          Sobre la primera pregunta todo puede hacerse pero no se recomienda, simplemente en teléfonos antiguos ese debe ser el comportamiento porque es a lo que están acostumbrados sus usuarios. Tienes más información aquí: http://stackoverflow.com/questions/13179620/force-overflow-menu-in-actionbarsherlock

          Sobre la segunda pregunta puedes utilizar el always, simplemente que si se puede evitar mejor. Pero por ejemplo si quieres que cierto icono siempre esté arriba, como el refresh para que cambie por un progress por ejemplo pues no hay problema por usarlo.

          Saludos

  • Nacho

    Hola, en mi aplicación cuando paso de una activity a otra hay unos segundos de espera para cargar datos, y quiero mostrar un ProgressBar circular que de vueltas situado en la ActionBar mientras tanto.
    He conseguido situar el ProgressBar en la ActionBar y que empiece a girar al pulsar sobre un icono de la ActionBar con este código:

    “if(item.getItemId() == R.id.MenuProgress) {
    item.setActionView(new ProgressBar(this, null, android.R.attr.progressBarStyle));
    item.expandActionView();
    return true;
    }”

    pero lo que realmente quiero es que se ejecute al lanzar la nueva activity, es decir, invocarlo desde el método ‘onPreExecute()’ del AsyncTask que lanza la nueva clase.

    ¿Cómo puedo hacerlo?
    Gracias.

    • FedeProEx

      Puedes echarle un vistazo a la librería de Manuel Peinado RefreshActionItem. Quizás te resulte más fácil hacerlo.

      Saludos!

  • Nacho

    FedeProEx, ¿sabes cómo cambiar el color de texto de los iconos que aparecen en el ActionBarSherlock?

    Gracias.

    • FedeProEx

      Hola Nacho, si te refieres al mensaje toast no te sabría decir y te aconsejaría que no te molestaras en cambiarlo, es algo estándar donde lo importante es el nombre de la acción y no la apariencia. Si te refieres al título del elemento del menú cuando aparece junto al icono o sin él quizás esta pregunta de stackoverflow o esta otra puedan ayudarte.

      Saludos

  • http://johanmoncada.wordpress.com johanjmoncada

    Muchas Gracias! Excelente tutorial!

  • http://twitter.com/ranceis ranceis (@ranceis)

    me funciona bien pero tengo un problema, cuando intento le doy clic derecho a propiedades del proyecto android tools, export … para generar el apk sigo los pasos para empaquetar apenas le doy finish mi eclipse se cierra. alguna idea de que puede ser?

  • Gonzalo

    GRacias

  • Alejandro Espejo

    excelente tutorial felicidades, esto de la customizacion de un action bar es mucho mejor de lo que pensaba me sera muy util sin embargo puedes subir algunos tutoriales sobre otras funcionalidades que ofrece el actionbarsherlock? te lo agradeceria mucho la forma que explicas es muy biena.

    • FedeProEx

      Hola!, gracias por los ánimos. Ten en cuenta que actionbarsherlock no implementa funcionalidades nuevas sino que nos lleva la funcionalidad de la ActionBar a las versiones anteriores de Android. Puedes ver la funcionalidad del ActionBar en la guía de android:

      http://developer.android.com/guide/topics/ui/actionbar.html

      Saludos!

  • Adrian

    Gracias por el tutorial de verdad. Estoy empezando con Android y todavía tengo todo muy verde :-D

    Me gustaría hacer lo siguiente:
    En vez de que aparezca Favorito 1…2..3… podría poner otro texto y que al pinchar en la opcion se me abriera otra clase?

    No se como hacerlo.
    Gracias

  • José

    Tengo una duda como puedo hacer para importar la librea en Android Studio …

    Eso por un lado por otro lado he buscado como loco como hacer para podes personalizar el estilo de los tabHost no se si me puden ayudar con eso se los agradecería mucho …

    Saludos,

  • alonso

    hola, me parece un trabajo excelente, tengo una duda al importar el codigo me marca muchos errores y no lo puedo correr me podrian ayudar por favor?

  • Jose juan

    Amigo , copie el codigo tal cual y me crashea al presionar el icono de favoritos