Skip to content

25 mars 2011 | Rédigé par Axon

8

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.
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 framework AppWidget.

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>
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

3. Un autre écran apparaît, il suffit de choisir notre Widget

4. Ce qui donnera :)

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.

Découvrez d'autre articles de la catégorie Tutoriels Android

Encore un peu de lecture :

8 Commentaires Poster un commentaire
  1. passicon
    10 avr 2011

    Merci pour ce tuto ;)
    je suis en train d’apprendre android et c’est toujours sympa d’ajouter des widget à ses applications

    :D

  2. David
    16 mai 2011

    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,

  3. Caracole
    26 nov 2011

    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 ?

  4. Kaiser
    2 fév 2012

    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 .

  5. evl27
    28 fév 2012

    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’).

  6. Zelya
    25 mai 2012

    Pour les deux commentaires precedent si d’autre se retrouve avec la meme erreur c’est une question de version, dans les derniere version d’android dans le dossier res les icon sont nomme ic_launcher donc normalement si tu remplace le code <application android:icon="@drawable/icon" par <application android:icon="@drawable/ic_launcher" cela devrais supprimer l'erreur.

Trackbacks & Pingbacks

  1. Mon premier Widget sous Android | WebTuts
  2. Tuto développement Android : Faire un widget

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires