«

»

oct 07 2011

Primeros pasos con GreenDroid, ActionBar y QuickActions

Actualmente me encuentro empezando un nuevo proyecto en Android  y como en otros muchos que ya existen en el mercado me he visto en la necesidad de incluir la ActionBar, elemento que dará un aspecto mucho mas profesional a nuestras aplicaciones y hará nuestras interfaces muchos mas usables. Despues de pedir consejo y ojear el blog de javielinux me decidi a usar la libreria GreenDroid ya que facilita bastante nuestra labor. Si aun no sabeis de que hablo os dejo una captura:
 

 

Para empezar nos bajamos la libreria y añadirla a nuestro workspace para poder usarla en nuestros proyectos. Para ello accedemos a la siguiente direccion https://github.com/cyrilmottier/GreenDroid y pulsamos en Downloads:

 

 
Una vez descargado el archivo ZIP lo descomprimimos en nuestro workspace y comprobaremos como existen tres carpetas en su interior:

  • GreenDroid, la libreria en cuestion.
  • GreenDroid-GoogleAPIS, GreenDroid con funcionalidades añadidas para trabajar con Google Maps.
  • GDCatalog, el codigo fuente de la aplicacion de demostracion disponible en el market.

Para poder usarlas en nuestros proyecto deberemos importarla como proyecto dentro de eclipse, en nuestro caso usaremos GreenDroid sin las funcionalidades añadidas. En e l caso de querer usar la segunda habria que importar tambien la primera puesto que depende de ella.

Una vez hecho esto deberemos indicar a nuestro proyecto que vamos a usar esta libreria. Para ello accedemos a las propiedades de nuestro proyecto a la seccion Android y se lo indicamos:
 


 
Con esto ya tendriamos el proyecto preparado para su uso y pasariamos al codigo. Antes que nada deberemos crear un objeto application, para ser mas precisos que herede de GDApplication y que implemente el metodo getHomeActivityClass() que servirá a la aplicacion para ver cuando tiene que mostrar el boton de home:

 


 

1
2
3
4
5
6
7
8
9
import greendroid.app.GDApplication;
 
public class NomadApplication extends GDApplication {
     
    @Override
    public Class<?> getHomeActivityClass() {
        return MainActivity.class;
    }
}

 

MainActivity será la Activity que elegiremos como Main y a la que volveremos pulsando la casita. Para que nuestra aplicacion use esta clase deberemos indicarselo en el AndroidManifest.xml. anañadiendo la propiedad name a la etiqueta application.

 


 
Tendremos que indicar a nuestras actividades que usen el style Theme.GreenDroid para que la ActionBar aparezca en ellas. Si hacemos esto la ActionBar aparecerá con un estilo predeterminado y es por eso que si queremos modificar el aspecto nos crearemos nuestro propio Theme sobreescrbiendo las caracteristicas a modificar. A continuacion os dejo un ejemplo en el que modificamos cosas como los colores, el separador, añadirmos un drawable de titulo para la pantalla de main o cambiamos el icono de home. Si quereis modificar mas cosas bastará con ir al codigo fuente de la libreria y comprobar cuales son las propiedades disponibles.

 

 

Pasando a la clase Java para que nuestras clases operen con ActionBar deberan heredar de GDActivity y desde aqui bastara con usar el metodo addActionBarItem(type, itemId); para añadir elementos a la barra. GreenDroid cuenta con una libreria de tipos de botones para la barra con lo cual no nos tendremos que preocupar ni por los iconos, tan solo tendremos que seleccionar uno de estos tipos de la clase Type y el lo hara todo solo. Hay que tener en cuenta que la barra no admite mas de tres iconos, si necesitamos mas deberemos recurrir a las QuickActions que explicaremos mas adelante. A continuacion os dejo un ejemplo:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class NomadActivity extends GDActivity {
    private final int CHECKING = 0;
    private final int TIMELINE = 1;
     
    private QuickActionWidget quickActions;
         
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setActionBarContentView(R.layout.main);
 
        initActionBar();
    }
     
     
    private void initActionBar() {
            addActionBarItem(Type.Edit, CHECKING);
            addActionBarItem(Type.List, TIMELINE);
    }
 
    @Override
    public boolean onHandleActionBarItemClick(ActionBarItem item, int pos) {
        switch (pos) {
            case CHECKING:
                Toast.makeText(getApplicationContext(), "Has pulsado el boton CHECKING", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onHandleActionBarItemClick(item, pos);
    }
     
}

 

Como vemos en el ejemplo de codigo luego deberemos de implementar el metodo onHandleActionBarItemClick para añadir funcionalidad a nuestros botones. Con esto ya seriamos capaces de usar la ActionBar en nuestras primeras aplicaciones pero ¿y si queremos añadir mas de tres botones?, la solucion es QuickActions que paso a explicar.

 

         

 

Para crearnos las QuickAction lo primero que haremos es declarar una variable que las almacenara y luego desde el onCreate del Activity las inicializamos a nuestro gusto, añadiendo mas o menos elementos. Como podemos ver hay dos tipos de manera de presentar las QuickAction, una barra con scroll horizontal (QuickActionBar) o mediante un grid (QuickActionGrid). Para mostrar una u otra bastara con crear un objeto de un tipo u otro respectivamente como veremos en el ejemplo:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//quickActions = new QuickActionBar(this);
quickActions = new QuickActionGrid(this);
 
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 1"));
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 2"));
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 3"));
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 4"));
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 5"));
quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 6"));
 
quickActions.setOnQuickActionClickListener(new OnQuickActionClickListener() {
    public void onQuickActionClicked(QuickActionWidget widget, int position) {
        Toast.makeText(NomadActivity.this, "Item " + position + " pulsado", Toast.LENGTH_SHORT).show();
    }
});

 

Como vemos cada vez que añadimos un elemento podemos indicar el icono que usara y el nombre que llevara y luego mediante setOnQuickActionListener daremos funcionalidad al elemento en la posicion position.

Y con esto hemos terminado, espero que os sirva de ayuda.
 

Acerca del autor

JMPergar

Mobile Developer at @BeRepublic & Founder of @AndroCode. Silver Speaker & Member of Core Team at @GDGBarcelona.

  • Francisco Lopez Montoya

    Perfectamente documentado¡¡¡ Ya tenía ganas de introducir un ActionBar trabajando con Froyo.

  • IGNACIO HERNANDEZ MORENO

    Muy bueno el articulo,aprovecho para felicitaros y agradeceros al equipo,este magnifico blog,para los que estamos intentando aprender a desarrollar aplicaciones para Android.

  • Jesús

    Yo tengo una pequeña duda, ¿cómo podría utilizar el actionbar o los quickactions de greendroid en una clase en la que ya estoy heredando de otra clase (en mi caso FragmentActivity)?

  • Percy Soria

    Que bueno encontrar algo que uno está buscando. Solo una pregunta, ¿existe alguna restricción con alguna versión de Android?

    • http://hackedbrain.blogspot.com/ JMPergar | Editor Jefe

      de la version 1.6 en adelante

  • Daniel

    Hola, no consigo meter la librería GreenDay en mi proyecto. Accedo a las propiedades de este, a la parte de Android, pero donde pone Library no me aparece nada, y al darle a Add tampoco. ¿Qué hago mal?

    • http://hackedbrain.blogspot.com/ JMPergar | Editor Jefe

      ¿tienes incluido GreenDroid como un proyecto mas dentro de tu workspace y de eclipse?

  • Eduardo

    Muchas gracias!! solo tengo una duda, como puedo eliminar el titulo de la aplicación que se ubica sobre el actionBar?

    • http://hackedbrain.blogspot.com/ JMPergar | Editor Jefe

      Añade esta sentencia en el metodo onCreate de tu activity:

      requestWindowFeature(Window.FEATURE_NO_TITLE);

  • Juanjo

    Todo entendido!, pero como hago para mostrar otra pantalla conservando el actionbar?, Gracias!

    • http://hackedbrain.blogspot.com/ JMPergar | Editor Jefe

      Tendrás que realizar el mismo proceso en cada pantalla donde quieras mostrar el ActionBar

    • http://lokalizo.com Yair Carreno

      Hola ,,,, usa la herencia…es buena practica crear una clase de actividad base que herede de una de las clases bases del framework ..por ejemplo GDActivity ….. de alli se desprende los demás activities de tu diseño……

  • Pingback: ActionBar. GreenDroid para Dummies. « Alexrs95()

  • vicente

    Está todo claro. Pero tengo un problema a la hora de mostrar en mi proyecto la GreenDroid, junto con una Activity que reproduce un video externo. Muestro fragmentos de código:

    public class GreenDroidActivity extends GDActivity {
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //Quitamos barra de titulo
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    //Quitar barra de notificaciones
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setActionBarContentView(R.layout.activity_reproduce_video);
    }
    }

    • vicente

      Perdón por el doble post. Decir que el GreenDroid se muestra pero no aparece el video.

      • http://www.linkedin.com/in/jmpergar JMPergar | Editor Jefe

        ¿Doble post? Creo que no ha llegado la totalidad de lo que has publicado. Si solo es lo que aparece aquí necesitarías mas info para poderte contestar ya que no veo nada relacionado con la reproducción de video.

  • Vicente

    OK vamos a ver si me explico bien XD.

    En el proyecto que estoy desarrollando, una de las actividades consiste en mostrar un vídeo utilizando la clase pública MediaPlayer que se encuentra en la sdcard. Lo que quiero es mostrar la GreenDroid mientras se reproduce el video (esto lo realizo mediante el método setActionBarContentView(layout_del_reproductor)), ya que pretendo realizar mediante QuickActions un tipo de menú en el que se puedan seleccionar opciones y realizar ciertas acciones sobre el vídeo (traking).

    El tema es que se muestra la GreenDroid pero el video no se reproduce. (sin la GreenDroid si se reproduce) .

    Muestro códico:
    public class ReproduceVideo extends Activity implements OnBufferingUpdateListener, OnCompletionListener, MediaPlayer.OnPreparedListener, SurfaceHolder.Callback {
    private MediaPlayer mPlayer;
    private SurfaceView sView;
    private SurfaceHolder sHolder;
    private int guardarPos = 0;
    private Boolean pausado = false;
    private String ruta;
    private ViewGrafi viewGrafi;

    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //Quitamos barra de titulo
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    //Quitar barra de notificaciones
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_reproduce_video);

    sView = (SurfaceView) findViewById(R.id.videoViewFilm);
    sHolder = sView.getHolder();
    sHolder.addCallback(this);
    sHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

    File sD = Environment.getExternalStorageDirectory();
    File file = new File(sD.getAbsolutePath(), "videos");

    Intent intent = getIntent();
    ruta = file.toString() + File.separator + intent.getStringExtra("fichero");
    ......
    //tengo una funcion que se encarga de crear el objeto MediaPlayer y preparar el Dysplay mediante
    //el Holder generado, esta funcion es VideoPlay(), que la invoco con el método ;
    public void surfaceCreated(SurfaceHolder holder) {

    VideoPlay();
    }

    Bien ésta Activity tiene su layout el cual se muestra un VideoView. Éste layout es el que utilizo en :
    public class GreenDroidActivity extends GDActivity {

    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //Quitamos barra de titulo
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    //Quitar barra de notificaciones
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setActionBarContentView(R.layout.activity_reproduce_video);//layout de ReproduceVideo
    }
    }

    Espero que ahora esté más claro xD.

    Gracias de antemano.

    • http://www.linkedin.com/in/jmpergar JMPergar | Editor Jefe

      No me termina de quedar claro que es lo que haces. En mi caso para reproducir video siempre he usado la clase VideoView. Quedaria algo asi:

      videoView = (VideoView) findViewById(R.id.zonaVideo);
      videoView.setVideoURI(Uri.parse(filename));
      videoView.start();

    • http://www.linkedin.com/in/jmpergar JMPergar | Editor Jefe

      De todas maneras si existe algún tipo de conflicto puedes probar con ActionBarSherlock, a lo mejor esta no te da ese conflicto.

      • Vicente

        Lo he solucionado, creándome un control, combinando los existentes de android, y añadiéndole a una imagen la funcionalidad de QuickAction.

        De esa forma consigo el mismo efecto que con ActionBar y QuickAction.

        Pero gracias de todas formas.

        PD: Con VideoView tampoco funciona

  • https://plus.google.com/+MayankLangalia Mayank Langalia

    hi friends i want quick action grid code
    please help us : if you have sample code then please share code :
    mayanklangalia@gmail.com