Mon premier Widget sous Android [Tutoriel Android n°25]
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.
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
Ce framework permet aux développeurs de créer leurs propres Widget. Chaque widget est un BroadcastReceiver 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>
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>
<?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>
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.
Voila notre premier Widget Hello World est fini.
Conclusion
Donc ce tutoriel s’arrête là, en espérant qu’il vous ait aidé à comprendre comment fonctionnent les Widget et le framwork AppWidget. En espérant que cette collaboration avec tutomobile se poursuive. N’hésitez pas à me contacter sur mon site ou commenter cet article.

Cette création par Tuto Mobile est mise à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 Unported.
Encore un peu de lecture :
-
Chronologie #SFRGate : SFR et les Galaxy Nexus simlockés -
[Concours] Gagner 4 formations vidéos pour apprendre le développement Android -
Gestion des Preferences [Tutoriel Android n°25]









Merci pour ce tuto
je suis en train d’apprendre android et c’est toujours sympa d’ajouter des widget à ses applications
Bonjour,
Merci pour ce tuto!
J’aurai une petite question. Nous avons vu comment afficher un texte. Cependant, comment mettre à jour celui – ci par rapport à une application Android? En effet, j’aimerai créer une application android qui permet tous simplement de modifier le texte de mon widget!
Cordialement,
Néophite, je tombe par hasard su cette page interessante, mais une premiere question me vient à l’esprit: Avec outil crée-t-on ces widgets ?
Bonjour ,
Je n’arrive pas a faire fonctionner le widget :
Je rencontre l’erreur suivante :
<application android:icon="@drawable/icon"
et eclipse ne veux pas compiler car je site : error: Error: No resource found that matches the given name (at 'icon' with
value '@android:drawable/ic_menu_preference').
Si vous pouviez m’éclairer .
désolé je suis débutant…
sous eclipse ; je fait « run as » mais le projet ne de veux pas demarer… erreur dans manifest xml:
error: Error: No resource found that matches the given name (at ‘icon’ with value ‘@drawables/icon’).