Menú Navegación Páginas

El blog de Antonio Leiva sobre diseño y desarrollo de interfaces en Android

ActionBarCompat (Parte 1): aprende cómo usarla

ActionBarCompat (Parte 1): aprende cómo usarla
  • Twitter
  • Facebook
  • Google Plus
  • LinkedIn

Google ha liberado una nueva versión de su Support Library y finalmente incluye ActionBarCompat. No sabemos si los días de gloria de ActionBarSherlock han terminado, pero lo que es cierto es que el equipo de Android ha trabajado tanto en ActionBarCompat que merece al menos una oportunidad.

ActionBarCompat: el código

Crea un nuevo proyecto usando el API 18 y añade el proyecto de la carpeta sdk\extras\android\support\v7\appcompat. Este proyecto es el que contiene ActionBarCompat. También es posible que necesites añadir las librerías bajo la carpeta libs al proyecto principal. Estableceré a la App el tema Light con Dark Action Bar. Es tan fácil como siempre:

<application
        android:label="@string/app_name"
        android:icon="@drawable/ic_launcher"
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

Ahora tu actividad necesita extender ActionBarActivity. Esta activdad está basada en FragmentActivity, por lo que podrás usar fragments sin ningún esfuerzo extra.

public class MainActivity extends ActionBarActivity {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Y aquí tienes el resultado:

ActionBarCompat

¿Pero qué pasa si queremos añadir algunos elementos al menú de opciones? Es prácticamente igual, salvo porque algunos atributos requieren un namespace especial:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      >
    <item
        android:id="@+id/action_refresh"
        android:title="@string/action_refresh"
        android:icon="@drawable/ic_action_refresh"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_action_search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

Este es el caso de showAsAction, o actionViewClass, que será explicado en el siguiente tutorial. Sencillo, ¿verdad?

Ahora ya puedes inflar el menú:

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

ActionBarCompat

Si necesitas acceder a la Action Bar mediante código, tendrás que usar getSupportActionBar().

Conclusión

Usar ActionBarCompat es casi tan fácil como la barra nativa, y muy similar a ActionBArSherlock, pero hay algunas pequeñas diferencias que debes conocer. En este primer tutorial expliqué cómo realizar una integración ismple. Puedes encontrar el código completo en Github.

En los próximos episodios, explicaré cómo incluir una action view, cambiar el action mode o incluso integrar el Navigation Drawer. ¡No te los pierdas!

ActionBarCompat (Parte 2): Action Views >

¿Te ha gustado? Compártelo

6 Comentarios

  1. Muy interesante, ya era hora de que lo sacaran con tanto dispositivo con 2.3 suelto por el mundo sin action bar.

    Igual lo integro en el nuevo proyecto que voy a crear ahora mismo xD

  2. Buen tutorial como siempre :)

    La gran pelea la he tenido con Android Studio y las nuevas dependencias, pero siguiendo esto ningún problema (aunque marque en rojo los estilos)

    http://stackoverflow.com/questions/16580586/add-support-library-to-android-studio-project

  3. excelente

  4. Como siempre tus tutoriales son de gran ayuda, ¡Gracias!

  5. Muy buena Antonio!

  6. Hola soy nuevo en esto de android, alguien me puede decir cómo le hago para que mi MainActivity haga extends de Activity y no de ActionBarActivity?? Saludos.

Trackbacks/Pingbacks

  1. ActionBarCompat (Parte 2): Action Views - […] la primera parte de esta serie de tutoriales os conté cómo usar ActionBarCompat en nuestros proyectos. Una vez que …

Deja tus comentarios