RSS

ActionBar. GreenDroid para Dummies.

12 Mar

En el primer artículo de Programando con Alexrs95 voy a presentaros una librería, que entre otras cosas, nos va a añadir un ActionBar a nuestras aplicaciones, para darles un aspecto más formal y hacer que sean algo más agradables a la vista, a parte de funcionales.

Esta librería nos permite realizar más acciones, pero en este tutorial no van a ser explicadas.

He usado esta librearía recientemente en Tri.

Requisitos

  • Eclipse u otro IDE similar.
  • Android SDK.
  • Conocimientos básicos de Java.
  • Conocimientos básicos de programación para Android.
  • Ganas de aprender.

1. Descarga de la librería.

Podemos descargar GreenDroid desde Github, pulsando aquí y seleccionando “Download as zip”.

Descomprimimos el archivo, y en su interior encontraremos una carpeta, la cual volverá a tener tres carpetas en su interior:

  • GreenDroid, que es la que nos interesa.
  • GreenDroid – Google Apis, que nos permite trabajar con Google Maps.
  • GDCatalog, el código fuente de la aplicación de muestra que podemos descargar desde Google Play.

2. Usar GreenDroid en nuestro proyecto.

Lo primero que debemos hacer es importar la librería a Eclipse, para ello, situamos el cursor en la zona del Package Explorer, pulsamos el botón derecho > Import > Existing Projects into Workspace y en la opción Select Root directory ponemos la ruta de la carpeta que contiene la librería, en este caso GreenDroid.

NOTA: Es aconsejable poner la carpeta GreenDroid en nuestro Workspace, ya que así la tendremos localizada.

El segundo paso es añadirla a nuestro proyecto, para lo cual debemos pulsar el botón secundario sobre la carpeta de nuestro proyecto en Eclipse > Properties , se nos abrirá una ventana con unas opciones en el lateral derecho, debemos seleccionar Android, bajar hasta el final, y en Library > Add > GreenDroid > Ok.

Ya habremos añadido la librería a nuestro proyecto, así que es el momento de empezar a usarla.

3. Usando GreenDroid. ¡Vamos al lío!

Lo primero que vamos a hacer va a ser crear una nueva clase que herede de GDApplication, que contendrá el método getHomeActivityClass() para saber cuando debe mostrar el botón Home.

También puede contener el método getMainApplicationIntent(), en el que definiremos que queremos realizar cuando se pulse sobre el icono que tengamos en el ActionBar. Un ejemplo de la clase puede ser:

public class ActionBar extends GDApplication {

@Override
 public Class<?> getHomeActivityClass() {
//Aquí definimos nuestra clase Main, es decir, la clase principal de nuestra aplicación.
 return Main.class;
 }

@Override
 public Intent getMainApplicationIntent() {
//Aquí definimos un Intent en el que decimos que queremos hacer cuando se pulse sobre el icono del ActionBar. En este caso nos lleva a otra Activity.
 return new Intent(this, OtraActivity.class);
 }
}

Ahora, en nuestra clase Main, hacemos que herede de GDActivity, y cambiamos el método setContentView(R.layout.main) por setActionBarContentView(R.layout.main). Ahora nuestra clase principal quedaría de la siguiente manera:

//Hacemos que la case extienda de GDActivity
public class Main extends GDActivity {
/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//Cambiamos el método setContentView() por setActionBarContentView()
        setActionBarContentView(R.layout.main);
    }
}

Tras esto, creamos en la carpeta res/values un nuevo archivo llamado themes.xml en el que vamos a definir la apariencia de nuestra ActionBar. El resultado sería algo como lo siguiente.


<!-- Empezamos dando el nombre de nuestro tema personalizado y declarando el tema del que extiende -->
<resources>

<style name="Theme.ActionBar" parent="@style/Theme.GreenDroid.NoTitleBar">
<item name="gdActionBarTitleColor">@android:color/white</item>
<item name="gdActionBarBackground">@drawable/ab_background</item>
<item name="gdActionBarDividerWidth">2px</item>
<item name="gdActionBarApplicationDrawable">@drawable/app_logo</item>
</style>

</resources>

No te preocupes si Eclipse te da un error a la hora de guardarlo porque no existen los archivos drawable/ab_background drawable/app_logo, que es el siguiente paso, impaciente ;).

Como he dicho anteriormente, el próximo paso es crear los archivos drawable/ab_background  y drawable/app_logo. Para ello, debemos crear una carpeta drawable en el directorio res.

Dentro de esta carpeta, crearemos dos archivos xml, ab_background.xml, que contendrá los datos de cómo es el fondo de nestro ActionBar


<?xml version="1.0" encoding="utf-8"?>
<shape
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<!-- Aquí establecemos el color, podemos consultar el código de más colores en http://html-color-codes.info/codigos-de-colores-hexadecimales/ -->
	<solid android:color="#708090" />

</shape>

app_logo.xml, que contendrá los datos acerca de como es el icono de nuestro ActionBar.

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

	<item
		android:state_pressed="false"
		android:drawable="@drawable/nuestro_icono" />

	<item
		android:state_focused="false"
		android:drawable="@drawable/nuestro_icono" />

	<item
		android:drawable="@drawable/nuestro_icono" />
<!-- nuestro_icono se refiere al icono que queremos que aparezca en el ActionBar -->

</selector>

<!-- Los valores false de state_pressed y state_focused pueden cambiarse por true si tenemos un icono dedicado para cada uno de estos casos -->

Nuestro último paso es acceder al Manifiest y declarar los siguientes campos:

en application:

android:name="com.nombreDePaquete.nombreDeLaClaseQueExtiendeDeGDApplication"
android:theme="@style/Theme.ActionBar"

Tras realizar todos estos pasos, podemos correr nuestra aplicación y nos aparecerá nuestro ActionBar.

Añadiendo más funcionalidad a nuestro ActionBar.

Podemos añadir varios botones a nuestro ActionBar para extender un poco más su funcionalidad. A continuación vamos a aádir un botón de ayuda, como el que tengo puesto en Tri.

Para realizar esta acción, vamos a nuestra Activity y realizamos lo siguiente:

public class NomadActivity extends GDActivity {
//El número nos da la posición que ocupará en el ActionBar. Al añadir un único botón, a nosotros no nos va a aportar nada, pero si añadimos varios, sí.
    private final int HELP= 0;
/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setActionBarContentView(R.layout.main);
 //Este método es el que vamos a crear a continuación
        initActionBar();
    }
//Método que añade el botón a nuestro ActionBar
private void initActionBar() {
		addActionBarItem(Type.Help, HELP);
	}
//Si queremos que al pulsar realice una acción, debemos hacerlo mediante un switch.
	@Override
	public boolean onHandleActionBarItemClick(ActionBarItem item, int pos) {
		switch (pos) {
		case HELP:
			Intent intent = new Intent(this, ACtivityDestino.class);
			startActivity(intent);
			break;
		default:
			Intent inten = new Intent(this, ActivityDestino.class);
			startActivity(inten);
			break;
		}
		return super.onHandleActionBarItemClick(item, pos);
	}

Tras realizar todos los pasos, habremos conseguido añadir un ActionBar a nuestra aplicación. Si tienes alguna duda, pregunta e intentaré responder.
Fuentes: Androcode, Androidety, SamColes.

Si algún paso del tutorial no funciona, por favor, comunícamelo en los comentarios, soy humano y puedo haber cometido errores.

Un saludo, y espero que os sea de ayuda 🙂

Anuncios
 
3 comentarios

Publicado por en 12/03/2012 en Programando con Alexrs95

 

3 Respuestas a “ActionBar. GreenDroid para Dummies.

  1. juanki

    16/03/2012 at 00:24

    Como te dije por twitter, te escribo el comentario ahora que he acabado de hacer lo básico del actionbar. Esta todo muy bien explicado, mi único problema, es que en el fichero app_logo.xml, aunq sustituyo el “nuestro_icono” icon.png no me lo reconoce. No es que sepa mucho de android, y por tanto solo se me ocurre importarlo a la carpeta drawable que creamos en el tuto que es donde está el fichero. A ver si tu sabes donde hay que colocarlo para que lo reconozca.
    Un saludo

     
    • juanki

      16/03/2012 at 00:37

      Me respondo a mi mismo para decir que el problema era que estaba poniendo el archivo con la extensión, era simplemente drawable/icon
      Otro problema que me surgió después es que la segunda línea que propones para el Manifest (android:theme=”@style/TemaPersonalizado”) salta un error indicando que no lo reconoce. Desconozco la funcionalidad de este atributo, pero si no la pongo y ejecuto me salta el Forzar Cierre en el emulador de android.
      También debo decir que mi clase OtraActivity esta vacía, por lo que no se si tendrá esto que ver.
      Perdón por el tocho a leer 😛

       
      • alexrs95

        16/03/2012 at 15:38

        Vale, ha sido un fallo mío, gracias por la observación, ya está cambiado. Te explico el proceso:
        Lo que hacemos al crear el archivo themes.xml es crear un archivo que sobreescribe al tema por defecto que trae GreenDroid, para poder darle una apariencia más personalizada. En el archivo themes.xml, en la primera línea, que es , donde pone “Theme.ActionBar”, es un nombre personalizado que nosotros le hemos dado, y es el que tenemos que declarar en el Manifiest.
        Espero que esto resuelva tu problema, si tienes más cuestiones, no dudes en preguntar 🙂

         

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: