Mon premier Widget sous Android ~ Android For Arab

Dans ce tutoriel, nous allons aborder une facette très importante d’Android mais beaucoup moins utilisée par les développeurs. Il s’agit du développement de Widget. Nous allons créer un petit widget.

Tout d’abord, je tiens à remercier tutomobile.fr pour m’avoir donné la chance d’écrire un article sur ce site.[Note d'Axon] Merci à Nazim Benbourahla d’avoir écrit ce tutoriel [/Note d'Axon]

Qu’est ce qu’un Widget ?

Un Widget est un élément que vous pouvez placer sur votre bureau. Cet élément offre une possibilité d’interaction avec l’utilisateur, ainsi qu’un accès facile à certaines informations. Dans cette grande famille de Widget, on peut en distinguer deux types :

Les widgets natifs : Ceux qui sont installés nativement avec le téléphone, comme votre barre de recherche google, l’horloge, la météo (sur HTC par exemple)..
Les widgets non natifs : Ces widgets sont placés lors de l’installation de nouvelles applications ou rajoutés par l’utilisateur.

Android donne la possibilité à tous les utilisateurs de personnaliser leurs bureaux, en y disposant des widgets sur les différents bureaux.
Prenons des exemples plus clairs pour comprendre ce qu’est un Widget :

Barre de recherche Google.
Horloge.
Raccourcis réseaux sociaux.
Raccourcis de contrôle du lecteur MP3.

Comment créer un Widget

Afin que ce tutoriel ne soit pas trop difficile, certains pré-requis sont nécessaires. Notamment les bases de la programmation sur Android et la création d’une vue sous Android. [Note d'Axon] Je vous conseille d’aller faire un tour sur le blog de Nazim Benbourahla où il y a de nombreux tutos très intéressant :http://www.tutos-android.com [/Fin note d'Axon]

La création de Widget est disponible depuis la version 1.5 d’Android et cela grâce au frameworkAppWidget.

Ce framework permet aux développeurs de créer leurs propres Widget. Chaque widget est unBroadcastReceiver couplé avec un fichier XML de metadata qui décrit les détails du Widget. Vous pouvez aussi facilement rajouter un Widget à une application que vous avez déjà créée.

Voici les différentes méthodes que vous pouvez surcharger dans la classe AppWidget :

OnEnabled() : Appelez quand votre Widget est créé. L’initialisation de votre Widget et ses données peuvent être effectuées ici.
OnDisabled() : Appelez juste avant que le Widget soit supprimé et suivi de la méthode OnDeleted().
OnUpdates() : Appelez quand le Widget nécessite une mise à jour de son interface.
OnDeleted() : Appelez quand le WIdget est supprimé.
OnReceive() : L’implementation par défaut de cette méthode est de récupèrer un évènement et appelle la méthode correspondante (voir au dessus).

Pour créer un Widget , nous avons besoin des éléments suivants :

Objet AppWidgetProviderInfo : Il décrit :
- Les metadatas pour un widget donné.
- Le AppWidget Layout.
- Les fréquences de mises à jour du widget
- La classe AppWidgetProvider (Ce fichier est défini en XML).
Implémenter la classe AppWidgetProvider : Cette classe définit comment s’effectuent les échanges avec votre Widget. Il est principalement basé sur les événements Broadcast. Donc nous aurons besoin d’un BroadCast Receiver.
Bien sûr une vue pour votre Widget

Mon premier Widget “Hello Word”

Nous allons avancer doucement dans ce tutoriel et créer notre HelloWorldWidget.

Pour commencer créez un projet “HelloWorldWidget” avec les données suivantes :

Build Target / Version du SDK : Version 2.2.
Nom de l’application : My Hello World Widget.
Nom du package : com.android.tuto.widget.
Activité créée : HelloWorldWidgetActivity.

Dans votre fichier de vue main.xml (res/layout), créez une vue avec un textView comme ci-dessous.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:orientation="vertical"
      android:layout_gravity="center"
      android:layout_height="wrap_content">
 
<TextView android:id="@+id/hello_world_widget"
      android:text="@string/hello_world_widget"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:layout_gravity="center"
      android:layout_marginTop="5dip"
      android:padding="10dip"
      android:textColor="#FFF"/>
 
</LinearLayout>

Donc ce fichier ressemble à un simple fichier de vue sans aucune complexité.
Maintenant dans le fichier de ressource strings.xml, il faut rajouter la variable hello_world_widget. ce qui donnera :

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="hello">Hello World, HelloWorldWidgetActivity!</string>
 <string name="app_name">My Hello World Widget</string>
 <string name="hello_world_widget">Bienvenue dans mon Widget Hello World :) </string>
</resources>

Plus haut nous parlions d’un fichier de configuration XML du widget. Donc pour ce fichier il suffit de créer un dossier xml dans votre dossier res. Dans ce dernier créer un fichier my_widget_provider.xml qui contiendra le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
      android:minWidth="160dip"
      android:minHeight="80dip"
      android:updatePeriodMillis="10000"
      android:initialLayout="@layout/main"
/>

Petite explication sur ce code :

android:minWidth : Largeur minimum du widget.
android:minHeight : Hauteur minimum du Widget.
android:updatePeriodMillis : Temps de mise à jour du Widget.
android:initialLayout : vue qui sera appliqué au Widget.

Modifiez la classe Java (HelloWorldWidgetActivity). Ce qui donnera simplement le code suivant

package com.android.tuto.widget;
import android.appwidget.AppWidgetProvider;
 
public class HelloWorldWidgetActivity extends AppWidgetProvider {
}

Pour finir il faut modifier le manifest comme ci-dessous :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.android.tuto.widget" android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
 
 
  <receiver android:name=".HelloWorldWidgetActivity"
   android:label="@string/app_name">
   <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
   </intent-filter>
   <meta-data android:name="android.appwidget.provider"
    android:resource="@xml/my_widget_provider" />
  </receiver>
 
 </application>
 
 
</manifest>

Nous allons tester tout cela. Lancez le projet. On a l’impression que rien ne se passe, tout simplement parce que l’on vient de créer un Widget qu’il faudra mettre sur votre bureau.

Pour cela il faut suivre les étapes suivantes :

1. Une fois arrivé sur l’écran d’acceuil de l’emulateur, cliquez longuement sur le bouton Home.

2. Cliquez sur Widget