Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android

Chapitre 2.1

Android2ee

Mathias Seguy

Ce chapitre vous explique comment utiliser les éléments graphiques fondamentaux d'Android. Il fait partie du livre "Android a complete course" dont les chapitres sont listés ci-dessous :

- Chapitre 0 : Installation et préparation de l'environnement de développement

- Chapitre 1 : Premiers pas avec Android

- Chapitre 1.1 : Cycle de vie de l'activité

- Chapitre 2.1 : Les éléments graphiques fondamentaux

- Chapitre 2.2 : Composants graphiques complexes

- Chapitre 3.3 : Intent et IntentFilters

- Chapitre 4.1 : Les Ressources

- Chapitre 4.2 : SharedPreferences et PreferenceActivity

- Chapitre 4.3 : Base de données SQLite

- Chapitre 4.4 : Gestion des fichiers

- Chapitre 5 : Content Provider

Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum : Commentez

- Titre : Tutoriel Android : Apprendre à utiliser les éléments graphiques fondamentaux d'Android

- Auteur : Mathias Seguy

- Parution : 18 septembre 2014

- Mise à jour : 22 février 2020

- Licence : Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Utilisation des layouts XML

- II. Les conteneurs

- III. Les widgets élémentaires

- III-A. Les labels

- III-B. Les boutons

- III-C. Les conteneurs d'images

- III-D. Les champs de saisie

- III-E. Les cases à cocher

- III-F. Les boutons radio

- III-G. Méthodes usuelles

- III-G-1. Pour gérer les états du composant

- III-G-2. Pour gérer le texte affiché par le composant

- III-G-3. Pour gérer comment est affiché le texte

- III-G-4. Pour ajouter des listeners

- III-G-5. Quelques autres méthodes étonnantes

- III-G-5-a. Pour l'accessibilité

- III-G-5-b. Pour définir un composant de type erreur

- III-G-5-c. Pour définir le comportement de la scroll bar

- III-G-5-d. Pour définir l'ombre sous le texte

- IV. Les widgets de sélection

- IV-A. Les différents sélectionneurs

- IV-B. Exemple pour la ListView avec une activité qui étend ListActivity

- IV-C. Exemple pour une activité qui utilise une liste

- IV-D. Exemple pour l'AutoCompleteTextView

- IV-E. Personnalisation des listes

- V. Les conteneurs et widgets évolués

- V-A. Le DatePicker et le TimePicker

- V-A-1. La DigitalClock et l'AnalogClock

- V-B. La ProgressBar et la SeekBar

- VI. Remerciements

I - Utilisation des layouts XML

L'utilisation de fichiers XML pour le positionnement des éléments graphiques d'une application Android est préconisée.

Exemple :

Le fichier res\layout\main.xml :

1. <?xml version="1.0" encoding="utf-8"?>

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. >

7. <TextView

8. android:layout_width="fill_parent"

9. android:layout_height="wrap_content"

10. android:text="@string/hello"

11. />

12. <Button xmlns:android="http://schemas.android.com/apk/res/android"

13. android:id="@+id/button"

14. android:text=""

15. android:layout_width="fill_parent"

16. android:layout_height="fill_parent"/>

17. </LinearLayout>

Et on l'utilise dans le code Java qui correspond juste à une application de type« Activités » :

1. public class MainActivity extends Activity implements View.OnClickListener  {

2. /** * A button */

3. private Button btn;

4. /** * A dummy counter */

5. private int count;

7. /** Called when the activity is first created. */

8. @Override

9. public void onCreate(Bundle savedInstanceState) {

10. super.onCreate(savedInstanceState);

11. //Récupère le fichier main.xml pour construire l'IHM

12. setContentView(R.layout.main);

13. //Instancie le bouton en récupérant son id,

14. //on peut ensuite utiliser le bouton normalement.

15. btn=(Button)findViewById(R.id.button);

16. btn.setOnClickListener(this);

17. btn.setText("Hello");

18. }

19. public void onClick(View view) {

20. count++;

21. btn.setText("Hello "+count);

22. }

23. }

II - Les conteneurs

Il y a quatre types principaux de Layout :

- LinearLayout, c'est l'alignement linéaire qui s'appuie sur des boîtes qui sont alignées en colonnes ou en lignes ;

- RelativeLayout, c'est un placement relatif des composants les uns par rapport aux autres ;

- TableLayout, c'est un placement dans une table ;

- ScrollView et HorizontalScrollView, c'est un placement utilisant le scroll pour gérer les débordements.

Chacun a ses spécificités et permet d'effectuer les IHM. À choisir selon ses goûts.

III - Les widgets élémentaires

Les widgets élémentaires sont TextField (les labels), Bouton, Image, Check Box, EditText et RadioBoutton.

Leur hiérarchie est la suivante (ils héritent donc les uns des autres de leurs propriétés, de leurs méthodes).

- TextView

- BoutonCompoundButton

- CheckBox

- RadioButton

- ImageView

- ImageButton

III-A - Les labels

Une TextView est un composant permettant d'afficher un texte statique, souvent appelé label.

1. <TextView xmlns:android="http://schemas.android.com/apk/res/android"

2. android:layout_width="fill_parent"

3. android:layout_height="wrap_content"

4. android:text="Un champ texte"/>

III-B - Les boutons

Un bouton est un composant cliquable affichant un texte.

1. <Button xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/button" android:text=""

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. android:onClick=”uneMethode” />

III-C - Les conteneurs d'images

Ces composants servent à afficher des images. L'ImageButton permet d'écouter facilement les clics effectués sur le composant.

1. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/icon"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. android:adjustViewBounds="true"

6. android:src="@drawable/molecule"

7. />

9. <ImageButton xmlns:android="http://schemas.android.com/apk/res/android"

10. android:id="@+id/icon"

11. android:layout_width="fill_parent"

12. android:layout_height="fill_parent"

13. android:adjustViewBounds="true"

14. android:src="@drawable/molecule"

15. />

III-D - Les champs de saisie

Ce composant permet d'afficher un texte qui soit éditable.

1. <EditText xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/field"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. android:singleLine="false"

6. />

III-E - Les cases à cocher

Ce composant permet d'afficher un booléen avec lequel l'utilisateur peut interagir.

1. <CheckBox xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/check"

3. android:layout_width="wrap_content"

4. android:layout_height="wrap_content"

5. android:text="Cette case est : decochee" />

III-F - Les boutons radio

Ces composants sont des cases à cocher regroupées au sein d'un groupe (le GroupButton) en choix exclusif.

1. <RadioGroup

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent">

6. <RadioButton android:id="@+id/radio1"

7. android:layout_width="wrap_content"

8. android:layout_height="wrap_content"

9. android:text="Caillou" />

10. <RadioButton android:id="@+id/radio2"

11. android:layout_width="wrap_content"

12. android:layout_height="wrap_content"

13. android:text="Ciseaux" />

14. <RadioButton android:id="@+id/radio3"

15. android:layout_width="wrap_content"

16. android:layout_height="wrap_content"

17. android:text="Papier" />

18. </RadioGroup>

III-G - Méthodes usuelles

Tous les composants qui héritent de TextView possèdent un large ensemble de méthodes permettant leur manipulation en Java. Ces méthodes sont pour la plupart usuelles pour les développeurs ayant un peu d'expérience en IHM. Citons simplement les plus utiles.

III-G-1 - Pour gérer les états du composant

Les méthodes les plus utiles pour savoir dans quel état est le composant.

1. textView.hasFocus();

2. textView.isPressed();

3. textView.isSelected();

4. textView.isShown();

III-G-2 - Pour gérer le texte affiché par le composant

Les méthodes pour gérer le texte affiché.

1. // text management

2. textView.setText("the text of the text view");

3. // or append text

4. int start = 0, end = 3;

5. textView.append("the text to add", start, end);

6. // retrieve text

7. String displayedText = (String) textView.getText();

8. // get text lengh in characters' number

9. textView.length();

III-G-3 - Pour gérer comment est affiché le texte

Les méthodes graphiques permettant de gérer l'affichage de ce texte :

1. int color = 11254;

2. // setting background color

3. textView.setBackgroundColor(color);

4. // Sets the horizontal alignment of the text and the vertical gravity that will be used when

5. // there is extra space in the TextView beyond what is required for the text itself.

6. // Should be used in the layout.xml : android:gravity

7. textView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);

8. // Sets the color used to display the selection highlight.

9. textView.setHighlightColor(color);

10. // managing the lines

11. // set one line with the horizontal scroll or not

12. textView.setHorizontallyScrolling(true);

13. // Define the one line attribute. The XML attribute to use is android:singleLine

14. textView.setSingleLine(true);

15. // Set the text font size (in pixel)

16. textView.setTextSize(16);

17. // to set multilines: The XML attribute to use is android:lines

18. textView.setLines(3);

19. // or to set a range of multi lines: The XML attribute to use are android:minLines,

20. // android:maxLines

21. textView.setMinLines(1);

22. textView.setMaxLines(3);

III-G-4 - Pour ajouter des listeners

Voici le code pour ajouter :

- un listener qui écoute les changements associés au texte affiché ;

- un listener qui écoute les clics effectués sur le composant ;

- un listener qui écoute quand le composant gagne ou perd le focus.

1. // A text changed listener

2. textView.addTextChangedListener(new TextWatcher() {

3. @Override

4. public void onTextChanged(CharSequence s, int start, int before, int count) {

5. }

7. @Override

8. public void beforeTextChanged(CharSequence s, int start, int count, int after) {

9. }

11. @Override

12. public void afterTextChanged(Editable s) {

13. }

14. });

16. // A click listener

17. textView.setOnClickListener(new OnClickListener() {

18. @Override

19. public void onClick(View v) {

20. }

21. });

23. // A focus changed listener

24. textView.setOnFocusChangeListener(new OnFocusChangeListener() {

25. @Override

26. public void onFocusChange(View v, boolean hasFocus) {

27. }

28. });

III-G-5 - Quelques autres méthodes étonnantes

III-G-5-a - Pour l'accessibilité

Ajoutez une description de votre composant :

1. // Sets the View description. It briefly describes the view and is primarily used for

2. // accessibility support. Set this property to enable better accessibility support for your

3. // application. This is especially true for views that do not have textual representation

4. // (For example, ImageButton).

5. textView.setContentDescription("a short description for accessibility");

III-G-5-b - Pour définir un composant de type erreur

Changez votre composant en un autre qui est de type erreur :

1. // to set that Text View an Error Text view with an error icon and a popup that display the

2. // message in parameter

3. textView.setError("my error message to be displayed in the popup");

III-G-5-c - Pour définir le comportement de la scroll bar

La méthode qui définit le placement de la scroll bar :

1. // you can set a specific scrollBar's style can be:

2. // SCROLLBARS_INSIDE_OVERLAY

3. // SCROLLBARS_INSIDE_INSET

4. // SCROLLBARS_OUTSIDE_OVERLAY

5. // SCROLLBARS_OUTSIDE_INSET

6. textView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

III-G-5-d - Pour définir l'ombre sous le texte

Enfin, la méthode qui permet de mettre en place une ombre sous le texte du composant :

1. // or define the shadow to draw for the text:

2. // The XML Attributes to use are: android:shadowColor, android:shadowDx, android:shadowDy,

3. // android:shadowRadius

4. int radius=1,dx=2,dy=2;

5. textView.setShadowLayer(radius, dx, dy, color);

IV - Les widgets de sélection

Ces widgets servent d'aide à la rédaction ou à la sélection d'éléments.

Ces widgets s'appuient sur des adaptateurs qui offrent une interface commune aux modèles de données sous-jacents d'un widget de sélection de données. Ils fournissent la liste des données et les convertissent en différentes vues spécifiques qui sont utilisées par le widget de sélection pour l'affichage.

IV-A - Les différents sélectionneurs

Il y a six types de listes de sélection :

- la liste de base : ListView ;

- la combo box : Spinner ;

- le « GridView » qui affiche les choix dans une grille ;

- l'« AutoCompleteTextView » qui affiche un sous-ensemble de données en utilisant l'entrée utilisateur comme filtre sur ces données. Les données sont affichées comme avec le Spinner ;

- les « Galleries » qui affichent les données sous forme d'une liste horizontale sont souvent utilisées pour la sélection d'images.

IV-B - Exemple pour la ListView avec une activité qui étend ListActivity

Cet exemple montre une liste et un champ texte. Quand on clique sur un item de la liste, le champ texte récupère la valeur de l'item sélectionné.

Trois choses sont importantes dans ce premier exemple :

- l'utilisation d'android.R.layout.simple_list_item_1 dans la définition de l'ArrayAdapter qui définit comment seront présentés les items au sein de la liste ;

- l'utilisation du tag @android :id/list comme identifiant de la ListView qui sera automatiquement interprété par l'ActivityList comme étant la liste principale ;

- mon activité étend ListActivity.

1. /**

2. * @author mathias seguy

3. * @goals This class aims to show a simple List Activity

4. */

5. public class ListViewTuto extends ListActivity {

6. /*** A text view     */

7. TextView textView;

8. /*** The dummy data list */

9. String[] items = {"item1","item2","item3","item4","item5","item6" };

10. /** *The arrayAdapter that manage the data displayed     */

11. ArrayAdapter<String> arrayAdapter;

13. @Override

14. public void onCreate(Bundle icicle) {

15. super.onCreate(icicle);

16. setContentView(R.layout.main);

17. // Define the Adapter (Context, ListView Ressource, The items to display)

18. arrayAdapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);

19. //or using string values stored in the resources:

20. String[] itemsFromRes=getResources().getStringArray(R.array.itemsList);

21. arrayAdapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,

22. itemsFromRes);

23. //Set the ArrayAdapter to the ListActivity

24. setListAdapter(arrayAdapter);

25. //The text view that displays the current selected item

26. textView = (TextView) findViewById(R.id.text);

27. }

29. /* (non-Javadoc)@see android.app.ListActivity#onListItemClick(android.widget.ListView, android.view.View, int, long)

30. */

31. public void onListItemClick(ListView parent, View v, int position, long id) {

32. textView.setText(items[position]);

33. }

35. }

Où le fichier XML de déclaration des éléments graphiques est :

1. <LinearLayout

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent" >

6. <TextView

7. android:id="@+id/text"

8. android:layout_width="fill_parent"

9. android:layout_height="wrap_content"/>

10. <ListView

11. android:id="@android:id/list"

12. android:layout_width="fill_parent"

13. android:layout_height="fill_parent"

14. android:drawSelectorOnTop="false"

15. />

16. </LinearLayout>

Dans votre fichier strings.xml :

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <string name="hello">Hello World, ListViewTuto!</string>

4. <string name="app_name">ListViewTuto2</string>

5. <string-array>

6. <item>items1</item>

7. <item>items2</item>

8. <item>items3</item>

9. <item>items4</item>

10. <item>items5</item>

11. <item>items6</item>

12. </string-array>

13. </resources>

IV-C - Exemple pour une activité qui utilise une liste

Cet exemple montre un champ texte d'édition, un bouton et une liste. Il permet d'ajouter des items à la liste en remplissant le champ texte, puis en appuyant sur le bouton.

Ici, seul le R.android.layout.simple_list_item_1 est le paramètre à bien positionner.

Dans votre code Java :

1. public class ListViewTuto extends Activity {

3. @Override

4. public void onCreate(Bundle savedInstanceState) {

5. super.onCreate(savedInstanceState);

6. // Building mainLayout

7. setContentView(R.layout.main);

8. // Retrieve the ListView, EditText and Button

9. ListView listView = (ListView) findViewById(R.id.myListView);

10. final EditText editText = (EditText) findViewById(R.id.editTask);

11. Button button = (Button) findViewById(R.id.addButton);

12. // Création de la liste des to do items

13. final ArrayList<String> items = new ArrayList<String>();

14. items.add("items1");

15. // Création de l'array adapter pour lier l'array à la listview

16. final ArrayAdapter<String> arrayAdapter;

17. arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);

18. // Liaison de l'array adapter à la listview.

19. listView.setAdapter(arrayAdapter);

20. // Add the button listener

21. button.setOnClickListener(new OnClickListener() {

22. @Override

23. public void onClick(View v) {

24. // Add the value of the EditText in the list

25. arrayAdapter.add(editText.getText().toString());

26. // Delete the content of the Edit text

27. editText.setText("");

28. }

29. });

30. }

31. }

Dans votre layout :

1. <?xml version="1.0" encoding="utf-8"?>

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. >

7. <EditText

8. android:id="@+id/editTask"

9. android:layout_width="fill_parent"

10. android:layout_height="wrap_content"

11. android:text="@string/hello"

12. />

13. <Button

14. android:id="@+id/addButton"

15. android:layout_width="fill_parent"

16. android:layout_height="wrap_content"

17. android:text="@string/btnAdd"

18. />

19. <ListView

20. android:id="@+id/myListView"

21. android:layout_width="fill_parent"

22. android:layout_height="wrap_content"

23. />

24. </LinearLayout>

Dans votre fichier values/strings.xml :

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <string name="hello">Hello World, ListViewTuto!</string>

4. <string name="app_name">ListViewTuto</string>

5. <string name="btnAdd">Add</string>

6. </resources>

IV-D - Exemple pour l'AutoCompleteTextView

1. public class AutoCompleteTuto extends Activity implements TextWatcher {

2. /** * A textView     */

3. TextView textView;

4. /** * An AutoComplete TextView     */

5. AutoCompleteTextView autoCompleteTextView;

6. /** * The dummy data */

7. String[] items = { "A_item1", "B_item2", "C_item3", "D_item4", "E_item5", "F_item6" };

8. /** *The arrayAdapter that manage the data displayed */

9. ArrayAdapter<String> arrayAdapter;

11. @Override

12. public void onCreate(Bundle icicle) {

13. super.onCreate(icicle);

14. setContentView(R.layout.main);

15. // create the TextView

16. textView = (TextView) findViewById(R.id.textView);

17. // create the AutoCompleteTextView

18. autoCompleteTextView = (AutoCompleteTextView) findViewById(

19. R.id. autoCompleteTextView);

20. // Add the this.TextWatcher as listener

21. autoCompleteTextView.addTextChangedListener(this);

22. // Define the Adapter (Context, ListView Ressource, The items to display)

23. arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);

24. autoCompleteTextView.setAdapter(arrayAdapter);

25. }

26. /**************************************************************************/

27. /** TextWatcher override methods **********************************************/

28. /**************************************************************************/

29. /** (non-Javadoc)     *

30. * @see android.text.TextWatcher#onTextChanged(java.lang.CharSequence, int, int, int)

31. */

32. public void onTextChanged(CharSequence s, int start, int before, int count) {

33. autoCompleteTextView.setText(textView.getText());

34. }

35. /* * (non-Javadoc) *

36. * @see android.text.TextWatcher#beforeTextChanged(java.lang.CharSequence, int, int, int)

37. */

38. public void beforeTextChanged(CharSequence s, int start, int count, int after) {

39. // needed for interface, but not used

40. }

41. /* * (non-Javadoc) *

42. * @see android.text.TextWatcher#afterTextChanged(android.text.Editable)

43. */

44. public void afterTextChanged(Editable s) {

45. // needed for interface, but not used

46. }

47. }

Et l'on trouve dans le fichier de description des IHM :

1. <LinearLayout

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. >

7. <TextView

8. android:id="@+id/textView"

9. android:layout_width="fill_parent"

10. android:layout_height="wrap_content"

11. />

12. <AutoCompleteTextView android:id="@+id/autoCompleteTextView"

13. android:layout_width="fill_parent"

14. android:layout_height="wrap_content"

15. android:completionThreshold="3"/>

16. </LinearLayout>

IV-E - Personnalisation des listes

Les listes sont personnalisables, on peut les enrichir (ajouter des icônes…) pour afficher les données à sélectionner.

V - Les conteneurs et widgets évolués

V-A - Le DatePicker et le TimePicker

Le DatePicker et le TimePicker servent à choisir la date et l'heure.

Le code Java :

1. /**

2. * @author mathias1

3. * @goals This class aims to display a date Picker and a time picker and retrieve their value

4. */

5. public class DateAndTimePickerTuto extends Activity {

6. /** * The formatter used */

7. DateFormat fmtDateAndTime = DateFormat.getDateTimeInstance();

8. /** * A label to display new date and time to the user */

9. TextView calendarTextView;

10. /** * The time object representation used by the class */

11. Calendar calendar= Calendar.getInstance();

12. /** * The datePicker object */

13. DatePickerDialog datePickerDialog;

14. /** * The listener for date changed */

15. DatePickerDialog.OnDateSetListener dateSetListener = new DatePickerDialog.OnDateSetListener() {

16. public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {

17. // When a date is selected update the calendar object

18. calendar.set(Calendar.YEAR, year);

19. calendar.set(Calendar.MONTH, monthOfYear);

20. calendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);

21. // and the associated textView

22. updateLabel();

23. }

24. };

25. /**     * The timepicker object     */

26. TimePickerDialog timePickerDialog;

27. /** * The listener for time changed */

28. TimePickerDialog.OnTimeSetListener timeSetListener = new TimePickerDialog.OnTimeSetListener() {

29. public void onTimeSet(TimePicker view, int hourOfDay, int minute) {

30. // When a date is selected update the calendar object

31. calendar.set(Calendar.HOUR_OF_DAY, hourOfDay);

32. calendar.set(Calendar.MINUTE, minute);

33. // And the associated textView

34. updateLabel();

35. }

36. };

38. @Override

39. public void onCreate(Bundle icicle) {

40. super.onCreate(icicle);

41. setContentView(R.layout.main);

42. //instanciate the date picker

43. datePickerDialog=new DatePickerDialog(this, dateSetListener, calendar.get(Calendar.YEAR),

44. calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH));

45. //Define the button that show the date Picker

46. Button btn = (Button) findViewById(R.id.btnDate);

47. btn.setOnClickListener(new View.OnClickListener() {

48. public void onClick(View v) {

49. // Instanciate the DatePicker using this as context, the dateListener

50. defined above and the current time

51. new DatePickerDialog(getApplicationContext(),

52. dateSetListener,

53. calendar.get(Calendar.YEAR),

54. calendar.get(Calendar.MONTH),

55. calendar.get(Calendar.DAY_OF_MONTH)).show();

56. }

57. });

58. //instanciate the timepicker

59. timePickerDialog=new TimePickerDialog(this, timeSetListener,

60. calendar.get(Calendar.HOUR_OF_DAY),

61. calendar.get(Calendar.MINUTE), true);

62. //Define the button that show the time Picker

63. btn = (Button) findViewById(R.id.btnTime);

64. btn.setOnClickListener(new View.OnClickListener() {

65. public void onClick(View v) {

66. // Instanciate the TimePicker using this as context, the timeListener defined

67. above and the current time

68. new TimePickerDialog(getApplicationContext(),

69. timeSetListener,

70. calendar.get(Calendar.HOUR_OF_DAY),

71. calendar.get(Calendar.MINUTE),

72. true).show();

73. }

74. });

75. //Define the text view that displays the selected time

76. calendarTextView = (TextView) findViewById(R.id.calendarTextView);

77. updateLabel();

78. }

79. /** * Calls by the Time and Date SetListeners */

80. private void updateLabel() {

81. calendarTextView.setText(fmtDateAndTime.format(calendar.getTime()));

82. }

83. }

La déclaration graphique :

1. <LinearLayout

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. >

7. <TextView android:id="@+id/calendarTextView"

8. android:layout_width="fill_parent"

9. android:layout_height="wrap_content"

10. />

11. <Button android:id="@+id/btnDate"

12. android:layout_width="fill_parent"

13. android:layout_height="wrap_content"

14. android:text="Choisir une date"

15. />

16. <Button android:id="@+id/btnTime"

17. android:layout_width="fill_parent"

18. android:layout_height="wrap_content"

19. android:text="Choisir une heure"

20. />

21. </LinearLayout>

V-A-1 - La DigitalClock et l'AnalogClock

Il suffit de les déclarer dans votre fichier de ressources des éléments graphiques :

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. >

6. <AnalogClock android:id="@+id/analog"

7. android:layout_width="fill_parent"

8. android:layout_height="wrap_content"

9. android:layout_centerHorizontal="true"

10. android:layout_alignParentTop="true"

11. />

12. <DigitalClock android:id="@+id/digital"

13. android:layout_width="wrap_content"

14. android:layout_height="wrap_content"

15. android:layout_centerHorizontal="true"

16. android:layout_below="@id/analog"

17. />

18. </RelativeLayout>

Ils seront alors automatiquement détectés et vous pourrez les utiliser dans votre classe Java en y faisant référence R.id.analog.

V-B - La ProgressBar et la SeekBar

Ces deux widgets sont une barre de progression, mais là où la première est une sortie (on affiche une progression), la seconde est une entrée (on choisit une valeur au sein d'un intervalle).

Pour la ProgressBar les méthodes les plus utilisées sont :

- setMin, setMax (une ProgressBar utilise des entiers) ;

- setProgress pour fixer le positionnement du curseur ou incrementProgressBy pour le faire avancer avec une valeur prédéterminée ;

- setInderterminate (pour la barre infinie).

Pour la SeekBar, on utilise le setOnSeekBarChangeListener pour écouter les changements de position du curseur. Il possède une valeur comprise entre 0 et 100.

VI - Remerciements

Nous remercions milkoseck pour sa relecture orthographique et Mickael Baron pour la mise au format Developpez.com.