Primeros pasos con GreenDroid

Hace unos días encontré algo que parecía interesante , para armar un tutorial introductorio de GreenDroid, un proyecto del cual yo no sabia nada. Si nunca has escuchado hablar de esta lbireria, GreenDroid es una librería para Android que nos permite trabajar con widgets muy llamativos para integrarlos en nuestras interfaces de usuario.

El día de hoy vamos a realizar un pequeño ejemplo que te permita conocer cómo agregar esta librería dentro de un proyecto Android que tengas en tu Eclipse y cómo utilizar algunos componentes de UI básicos.

1. Lo primero que haremos será descargarnos la librería desde el repositorio en GitHub del proyecto, hacemos clic sobre el botón Download de acuerdo al formato de tu preferencia como te muestro a continuación:

2. Una vez que tenemos la librería en nuestra computadora, lo descomprimos en el workspace, que es la carpeta que nos crea Eclipse para guardar de manera física todos nuestros proyectos. Dentro de la capeta cyrilmottier-GreenDroid-2fc5128 debes encontrar tres carpetas:

• GreenDroid que es el núcleo de la librería.
• GreenDroid-GoogleAPIS que es la librería GreenDroid con funcionalidades agregadas para que podamos trabajar con Google Maps.
• GDCatalog que contiene el código fuente de la aplicación que lleva este nombre y que puedes descargar desde el Android Market.

Para poder hacer uso de cada una de ellas es indispensable importarlas una por una dentro de Eclipse. En este ejemplo no haremos uso de mapas así que sólo vamos a importar la carpeta de GreenDroid.

3. Para importar la librería hacemos clic en File > Import > General > Existing Projects into Workspace. En la ventana que nos aparecerá, damos clic sobre el botón Browse… para buscar la carpeta cyrilmottier-GreenDroid-2fc5128/GreenDroid.

Una vez hecho esto hacemos clic en el botón Finish.

Nota: Puede darse el caso de que Eclipse marque errores en nuestra librería recién importada, si ese es el caso bastará con seleccionar la carpeta raíz del proyecto desde elPackage Explorer y dar clic en el menú Project > Clean y después pulsamos la tecla F5.

4. Ahora ya podemos crear nuestro proyecto Android. Yo lo he llamado GreenDroidTest utilizando la versión 2.2. Una vez creado, damos clic derecho sobre el nombre del proyecto y elegimos la opción Properties. Dentro de la nueva ventana elegimos Android en el menú del lado izquierdo y pulsamos el botón Add… de la parte inferior como te muestro a continuación:

En el nuevo cuadro de diálogo nos debe aparecer la opción GreenDroid que elegimos y damos clic en el botón Ok.

5. Si hemos hecho todo bien hasta ahora, deberás poder ver el directorio GreenDroid_srcincluido en tu proyecto:

6. Ya con todo listo, vamos a crear una nueva clase en nuestro proyecto que extienda de GDApplication y que implemente los métodos getHomeActivityClass(), que básicamente sirve para indicarle a la aplicación cuándo es que tiene que mostrar el botón de Home, ygetMainApplicationIntent(). A continuación te escribo el código que deberá ir dentro de esta clase:

import greendroid.app.GDApplication;
import android.content.Intent;
 
public class GDDemo extends GDApplication {
    @Override
   public Class<!--?--> getHomeActivityClass() {
       return GDDemo.class;
   }
 
   @Override
   public Intent getMainApplicationIntent() {
       return new Intent(Intent.ACTION_DEFAULT);
   }
}

7. Después, abrimos la actividad principal de nuestro proyecto a la cuál le modificaremos un par de cosas. El primer cambio es que ahora nuestra actividad extenderá de GDActivity y cambiar la llamada al método setActionBarContentView() como te muestro a continuación:

import greendroid.app.GDActivity;
import android.os.Bundle;
 
public class GreenDroidTestActivity extends GDActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setActionBarContentView(R.layout.main);
    }
}

8. Para que podamos ejecutar nuestra aplicación para ver un primer resultado visual tendremos que agregar dos elementos al archivo AndroidManifest.xml como te muestro a continuación:

Los cambios se agregan dentro del elemento <application> y corresponden al atributo android:name cuyo valor es el nombre de la clase que creamos en el paso 6, y el atributo android:theme que llama al theme de la librería GreenDroid para que podamos mostrar los widgets de la actividad según como éste tema los define.

9. Ejecutamos nuestra aplicación y este es el resultado que deberás obtener:

Sin tener que preocuparnos en declarar atributos en XML ya obtenemos una action bar bastante llamativa y bonita.

10. Para que este tutorial no se quede hasta aquí, vamos ahora a agregar tres botones a la action bar: Un botón para actualizar, otro para compartir y por último, uno para posicionar.

Para ello abrimos nuevamente nuestra actividad principal y vamos a agregar el siguiente código:

public class GreenDroidTestActivity extends GDActivity {
 private final int LOCATE = 0;
    private final int REFRESH = 1;
    private final int SHARE = 2;
 
    /** 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.Locate, LOCATE);
             addActionBarItem(Type.Refresh, REFRESH);
             addActionBarItem(Type.Share, SHARE);
        }
   }

Para agregar los nuevos botones, creamos tres constantes que nos servirán más adelante para definir el orden en que aparecerán los botones en la action bar, comenzando con cero para la primer posición. Después, creamos el método initActionBar() dentro del cuál hacemos tres llamadas al método addActionBarItem() que como primer parámetro recibe el tipo de ítem que se agregará a la action bar y como segundo parámetro la constante, es decir, la posición en que se mostrará.

Para que Eclipse no nos muestre ningún error, debemos importar una nueva clase: Type como te muestro a continuación:

import greendroid.widget.ActionBarItem.Type;

11. Ejecutamos nuevamente el proyecto y ahora veremos lo siguiente:

12. Como regularmente estaremos trabajando con botones que hagan “algo”, vamos a ver cómo es que podemos gestionar los eventos cuando un usuario de clic sobre alguno de estos tres botones que hemos agregado. El primer paso será sobrecargar el métod oonHandleActionBarItemClick() como te muestro a continuación:

@Override
        public boolean onHandleActionBarItemClick(ActionBarItem item, int position) {
             switch (item.getItemId()) {
                  case LOCATE:
                      Toast.makeText(getApplicationContext(),
                          "Has pulsado el boton LOCATE",
                          Toast.LENGTH_SHORT).show();
                      break;
 
                  case REFRESH:
                      Toast.makeText(getApplicationContext(),
                          "Has pulsado el boton REFRESH",
                          Toast.LENGTH_SHORT).show();
                      break;
 
                  case SHARE:
                      Toast.makeText(getApplicationContext(),
                          "Has pulsado el boton SHARE",
                          Toast.LENGTH_SHORT).show();
                      break;
 
                  default:
                      return super.onHandleActionBarItemClick(item, position);
             }
 
             return true;
        }

Este método irá justo después de la llave que cierra a initActionBar(). Como ves, utilizamos una sentencia switch que recibirá como parámetro lo que retorne el método getItemId() de la action bar con la que estamos trabajando. Únicamente lanzaremos una notificación Toast para saber qué opción fue la que seleccionamos (por supuesto  puedes hacer algo más creativo).

Nuevamente, para que no tengamos problemas con Eclipse, deberemos importar dos clases más:

import greendroid.widget.ActionBarItem;
import android.widget.Toast;

13. Ejecutamos nuestra aplicación y es entonces cuando ya podremos observar el resultado de lo que acabamos de hacer:

14. ¿Y qué pasa si quisiéramos agregar más de tres botones? Al igual que pasa con los menús contextuales que sólo muestran 5 opciones y el sexto es la opción “More”, para los casos en los que estemos utilizando la Action Bar con GreenDroid, será necesario hacer uso de otro widget llamado QuickActions.

Antes de ver el código, es necesario que incluyas tres iconos dentro del directorio res > drawable (que en caso de no existir deberás crear). Los iconos los puedes descargar desde aquí en el directorio AndroideityDownloads/GDIcons.

Importamos las siguientes clases con las que trabajaremos:

import greendroid.widget.QuickActionWidget;
import greendroid.widget.QuickAction;
import greendroid.widget.QuickActionBar;
import greendroid.widget.QuickActionWidget.OnQuickActionClickListener;

Después, creamos una variable dónde alojaremos la QuickAction:

private QuickActionWidget quickActions;

Y tal como la Action Bar, creamos un método para inicializar la QuickAction:

private void initQuickActionBar() {
            quickActions = new QuickActionBar(this);
            quickActions.addQuickAction(new QuickAction(this, R.drawable.buscar,
                      "Buscar"));
            quickActions.addQuickAction(new QuickAction(this, R.drawable.tags,
                      "Tags"));
            quickActions.addQuickAction(new QuickAction(this, R.drawable.mail,
                      "Email"));
            quickActions
                      .setOnQuickActionClickListener(new OnQuickActionClickListener() {
                           public void onQuickActionClicked(QuickActionWidget widget,
                                     int position) {
                                Toast.makeText(GreenDroidTestActivity.this,
                                          "Item " + position + " pulsado",
                                          Toast.LENGTH_SHORT).show();
                           }
                      });
       }

En esta ocasión, aparte de inicializar los tres botones restantes, hemos asignado también el listener que nos servirá para lanzar los eventos que necesitemos.

15. Dentro del método onHandleActionBarItemClick() ubicamos la línea case SHARE y dentro de esa condición agregaremos esta línea:

quickActions.show(item.getItemView());

Esta declaración nos permitirá indicarle a la aplicación que deberá mostrar la QuickBar cuando el usuario presione el botón Compartir.

16. Después, en el método onCreate() escribimos la siguiente línea:

initQuickActionBar();

17. Ejecutamos nuevamente el proyecto y este es el resultado que deberás obtener al dar clic sobre el botón Compartir:

Considero que hasta el momento se han explicado varias cuestiones básicas de cómo funciona esta librería. Lo importante es que identifiques como con un número pequeño de líneas de código podemos crear aplicaciones que visualmente son atractivas.

Espero que este tutorial te haya sido de utilidad.

A continuación te dejo otros dos tutoriales básicos que nos permiten manipular otros widgets diferentes a los vistos en este tutorial:

• El blog de Javielinux
• Hacked Brain

Recuerda que esta es sólo la introducción, lo demás depende de tu imaginación como programador.

Código Fuente | Repositorio GitHub en el directorio GreenDroidTest

Blog oficial del proyecto GreenDroid | AndroidDevBlog

Referencia | Malicious Mind’s Blog