Introduction à GreenDroid ~ Android For Arab

Dans ce tutoriel, je vais vous présenter une bibliothèque que j’ai souvent utilisé et qui est très utile pour vos développements Android, il s’agit deGreenDroid créé par Cyril Mottier.

GreenDroid : à quoi ça sert ?

Cette bibliothèque facilitera la création de vos applications Android, grâce à plusieurs mécanismes, elle vous permettra :

d’optimiser vos applications,
de gagner du temps sur la création d’interface et la gestion de plusieurs fonctionnalités de votre application,
de factoriser votre code.

GreenDroid : Les fonctionnalités disponibles

Voici une introduction aux fonctionnalités de GreenDroid, la liste est beaucoup plus grande que ce que je présente dans cet article.

GreenDroid : Installation

Pour commencer, vous devez cloner (git clone https://github.com/cyrilmottier/GreenDroid.git) ou télécharger GreenDroid sur :https://github.com/cyrilmottier/GreenDroid, puis importer le projet dans votre eclipse (File -> Import). Une fois cette étape effectuée, cliquez droit sur le projet GreenDroid puis allez dans Properties puis dans Android vérifiez que “Is Library” est bien coché sinon faites le.

Nous allons créer un projet qui va utiliser GreenDroid.

Nom du projet : GDIntro
Android SDK : 1.6
Nom de l’application : GD Intro
Package : com.nazim.tuto.gd
Activité de départ : GDIntroActivity

Une fois le projet créé, cliquez droit sur votre projet, allez dans Properties puis Android et dans Library cliquez sur Add puis séléctionnez GreenDroid (Si GreenDroid n’apparait pas, c’est que l’étape “Is Library” n’est pas correctement faite).

GreenDroid : Mise en place du projet GreenDroid

Afin de mettre en place votre projet, il faut faire quelques modifications pour intégrerGreenDroid.

Premièrement, nous allons créer une classe qui présentera l’application et qui s’appelleraGDIntroApp. Elle contiendra une seule méthode « getHomeActivityClass » qui retournera votre vue de base.

package com.nazim.tuto.gd;
 
import greendroid.app.GDApplication;
 
public class GDIntroApp extends GDApplication {
 
    @Override
    public Class getHomeActivityClass() {
        return GDIntroApp.class;
    }
}

Puis nous allons modifier notre classe “GDIntroActivity” pour qu’elle hérite deGDActivity en plus d’Activity et on remplace le setContentView parsetActionBarContentView qui est une méthode spécifique à GreenDroid. Ce qui donnera

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

et finalement, il ne reste plus qu’à modifier le manifest, pour rajouter :

Notre classe GDIntroApp : android:name= »GDIntroApp ».
Rajouter le theme GreenDroid : android:theme= »@style/Theme.GreenDroid ».

Ce qui donnera

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.nazim.tuto.gd"
      android:versionCode="1"
      android:versionName="1.0">
 
    <application android:icon="@drawable/icon" android:label="@string/app_name"
    android:theme="@style/Theme.GreenDroid" android:name="GDIntroApp">
        <activity android:name=".GDIntroActivity"
                  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>

Ce qui vous donnera :

GreenDroid : Action Bar

L’une des fonctionnalités majeures de GreenDroid est l’ActionBar, qui correspond à la barre verte qui est sur le screen au dessus. Nous allons l’enrichir avec plusieurs fonctionnalités.
Nous allons rajouter à notre Action Bar les boutons suivants :

Un bouton pour rafraîchir.
Un bouton pour partager.
Un bouton pour localiser.

Pour cela nous allons créer une petite fonction pour intialiser les différents éléments.

private void initActionBar() {
addActionBarItem(Type.Locate, LOCATE);
addActionBarItem(Type.Refresh, REFRESH);
addActionBarItem(Type.Share, SHARE);
}

et les entiers utilisés

private final int LOCATE = 0;
private final int REFRESH = 1;
private final int SHARE = 2;

Sans oublier d’appeler la méthode dans le onCreate

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

Donc pour rajouter un élément, il suffit juste d’appeler addActionBarItem, avec comme arguments :

Le type de l’élément souhaité. Une vingtaine d’éléments sont disponibles.
Un entier qui sera l’identifiant de votre élément quand on clique dessus.

Ce qui vous donnera :

Maintenant passons à la gestion du clic sur un élément de votre Action Bar. Pour cela il suffit de surchager la méthode onHandleActionBarItemClick.

@Override
    public boolean onHandleActionBarItemClick(ActionBarItem item, int position) {
    switch (item.getItemId()) {
    case LOCATE:
        Toast.makeText(getApplicationContext(),
            "Vous avez cliquez sur le bouton LOCATE",
            Toast.LENGTH_SHORT).show();
        break;
 
    case REFRESH:
        Toast.makeText(getApplicationContext(),
            "Vous avez cliquez sur le bouton REFRESH",
            Toast.LENGTH_SHORT).show();
        break;
 
    case SHARE:
        Toast.makeText(getApplicationContext(),
            "Vous avez cliquez sur le bouton SHARE",
            Toast.LENGTH_SHORT).show();
        break;
    default:
        return super.onHandleActionBarItemClick(item, position);
    }
 
    return true;
    }

Ce qui donnera :

Voilà pour la première fonctionnalité, je ne pourrai pas aborder les différents cas d’utilisation, si votre cas est spécifique n’hésitez pas à me poser une question.

GreenDroid : QuickActions

Nous allons passer au QuickActions, vous allez comprendre à quoi cela correspond. Nous allons faire en sorte que lorsque l’utilisateur clique sur le bouton Share cela affiche des quick actions.

Nous allons commencer par créer une variable qui représentera notre quick action.

1	`private` `QuickActionWidget quickActions;`

Puis nous allons créer une méthode qui intialise notre Quick Actions Widget et initlialise le click listener dessus

private void initQuickActionBar() {
    quickActions = new QuickActionBar(this);
    quickActions.addQuickAction(new QuickAction(this, R.drawable.facebook,
        "Facebook"));
    quickActions.addQuickAction(new QuickAction(this, R.drawable.twitter, "Twitter"));
    quickActions.addQuickAction(new QuickAction(this, R.drawable.mail, "Email"));
    quickActions.setOnQuickActionClickListener(new OnQuickActionClickListener() {
        public void onQuickActionClicked(QuickActionWidget widget,
            int position) {
         Toast.makeText(GDIntroActivity.this,
         "Item " + position + " clicked", Toast.LENGTH_SHORT)
         .show();
        }
    });
    }

Il vous faut les 3 images suivantes, à mettre dans le dossier Drawable de res.
Nous allons modifier notre méthode onHandleActionBarItemClick, en cliquant sur le bouton Share

case SHARE:
        quickActions.show(item.getItemView());
        Toast.makeText(getApplicationContext(),
            "Vous avez cliqué sur le bouton SHARE",
            Toast.LENGTH_SHORT).show();
        break;

Sans oublier d’appeler la méthode d’initialisation dans le onCreate

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

Ce qui vous donnera

GreenDroid : Surcharger le thème

Maintenant vous allez me dire “GreenDroid c’est génial” mais je ne veux pas d’une barre verte dans mon application. Ne vous inquiétez pas, vous pouvez changer ça, en surchargeant le thème.
Je vais vous expliquer comment faire.

Alors la première étape est de créer votre style. Dans values, créez un fichier themes.xml. Dans ce fichier vous allez créer votre thème comme ci-dessous :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Mytheme" parent="@style/Theme.GreenDroid.NoTitleBar">
        <item name="gdActionBarTitleColor">#fff</item>
        <item name="gdActionBarDividerWidth">2px</item>
        <item name="gdActionBarBackground">@color/background</item>
    </style>
 
</resources>

Il existe plusieurs propriétés que vous pouvez surcharger de GreenDroid, ici on surcharge :

La couleur du texte dans l’action bar.
La taille des séparateurs dans l’action bar.
La couleur de fond de l’action bar.

Vous allez sûrement remarquer le @color, pour celui-ci créez un fichier colors dans values qui contiendra :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#f00</color>
</resources>

Vous pouvez à partir de maintenant prendre la bonne habitude de mettre toutes les couleurs que vous utilisez dans votre application dans ce fichier là.

Dernière étape, il faut modifier le fichier AndroidManifest pour rajouter notre thème (android:theme= »@style/Theme.Mytheme), ce qui donnera

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.nazim.tuto.gd"
      android:versionCode="1"
      android:versionName="1.0">
 
    <application android:icon="@drawable/icon" android:label="@string/app_name"
    android:theme="@style/Theme.Mytheme" android:name="GDIntroApp">
        <activity android:name=".GDIntroActivity"
                  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>

Voilà vous devriez obtenir le résultat suivant :

Conclusion

Voilà ce tutoriel s’arrête ici, vous pouvez télécharger le projet ici.
Ce tutoriel fait un bref tour des fonctionnalités de GreenDroid. D’autres fonctionnalités sont disponibles dans cette bibliothèque. Vous trouverez plus de détails sur le site officiel.
Parmi ces fonctionnalités :

SegmentedBar
AsyncImageView
et plein d’autres fonctionnalités. N’ hésitez pas à aller sur le site pour chercher si une fonctionnalité que vous souhaitez existe.

N’hésitez pas à me poser des questions et s’il y a de la demande, je ferai une suite à ce tutoriel avec les autres fonctionnalités. En attendant j’espère que ce tutoriel vous à permis de connaître cette bibliothèque et vous a donné envie de l’utiliser. Bonne continuation à tous.

Android For Arab

samedi 8 octobre 2011