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

Chapitre 2.1
Image non disponible
Android2ee

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button"
    android:text=""
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</LinearLayout>

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
public class MainActivity extends Activity implements View.OnClickListener  {
/** * A button */
private Button btn;
/** * A dummy counter */
private int count;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
                           super.onCreate(savedInstanceState);
                            //Récupère le fichier main.xml pour construire l'IHM
        setContentView(R.layout.main);
        //Instancie le bouton en récupérant son id, 
        //on peut ensuite utiliser le bouton normalement.
        btn=(Button)findViewById(R.id.button);
        btn.setOnClickListener(this);
        btn.setText("Hello");
    }
    public void onClick(View view) {
        count++;
        btn.setText("Hello "+count);
    }
}

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.

 
Sélectionnez
1.
2.
3.
4.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Un champ texte"/>

III-B. Les boutons

Un bouton est un composant cliquable affichant un texte.

 
Sélectionnez
1.
2.
3.
4.
5.
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button" android:text="" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    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.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/icon"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:src="@drawable/molecule"
        />

<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/icon"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:src="@drawable/molecule"
        />

III-D. Les champs de saisie

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/field"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:singleLine="false"
    />

III-E. Les cases à cocher

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

 
Sélectionnez
1.
2.
3.
4.
5.
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<RadioGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <RadioButton android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Caillou" />
        <RadioButton android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ciseaux" />
        <RadioButton android:id="@+id/radio3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Papier" />
</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 utilés pour savoir dans quel état est le composant.

 
Sélectionnez
1.
2.
3.
4.
textView.hasFocus();
textView.isPressed();
textView.isSelected();
textView.isShown();

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

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
// text management
textView.setText("the text of the text view");
// or append text
int start = 0, end = 3;
textView.append("the text to add", start, end);
// retrieve text
String displayedText = (String) textView.getText();
// get text lengh in characters' number
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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
int color = 11254;
// setting background color
textView.setBackgroundColor(color);
// Sets the horizontal alignment of the text and the vertical gravity that will be used when
// there is extra space in the TextView beyond what is required for the text itself.
// Should be used in the layout.xml : android:gravity
textView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
// Sets the color used to display the selection highlight.
textView.setHighlightColor(color);
// managing the lines
// set one line with the horizontal scroll or not
textView.setHorizontallyScrolling(true);
// Define the one line attribute. The XML attribute to use is android:singleLine
textView.setSingleLine(true);
// Set the text font size (in pixel)
textView.setTextSize(16);
// to set multilines: The XML attribute to use is android:lines
textView.setLines(3);
// or to set a range of multi lines: The XML attribute to use are android:minLines,
// android:maxLines
textView.setMinLines(1);
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.
 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
// A text changed listener
textView.addTextChangedListener(new TextWatcher() {
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    @Override
    public void afterTextChanged(Editable s) {
    }
});

// A click listener
textView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    }
});

// A focus changed listener
textView.setOnFocusChangeListener(new OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
    }
});

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

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

Ajoutez une description de votre composant :

 
Sélectionnez
1.
2.
3.
4.
5.
// Sets the View description. It briefly describes the view and is primarily used for
// accessibility support. Set this property to enable better accessibility support for your
// application. This is especially true for views that do not have textual representation
// (For example, ImageButton).
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 :

 
Sélectionnez
1.
2.
3.
// to set that Text View an Error Text view with an error icon and a popup that display the
// message in parameter
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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
// you can set a specific scrollBar's style can be:
// SCROLLBARS_INSIDE_OVERLAY
// SCROLLBARS_INSIDE_INSET
// SCROLLBARS_OUTSIDE_OVERLAY
// SCROLLBARS_OUTSIDE_INSET
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 :

 
Sélectionnez
1.
2.
3.
4.
5.
// or define the shadow to draw for the text:
// The XML Attributes to use are: android:shadowColor, android:shadowDx, android:shadowDy,
// android:shadowRadius
int radius=1,dx=2,dy=2;
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.
 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
/**
 * @author mathias seguy
 * @goals This class aims to show a simple List Activity
 */
public class ListViewTuto extends ListActivity {
    /*** A text view     */
    TextView textView;
    /*** The dummy data list */
    String[] items = {"item1","item2","item3","item4","item5","item6" };
    /** *The arrayAdapter that manage the data displayed     */
    ArrayAdapter<String> arrayAdapter;

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        // Define the Adapter (Context, ListView Ressource, The items to display)
        arrayAdapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);
        //or using string values stored in the resources:
        String[] itemsFromRes=getResources().getStringArray(R.array.itemsList);
        arrayAdapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
itemsFromRes);
        //Set the ArrayAdapter to the ListActivity
        setListAdapter(arrayAdapter);
        //The text view that displays the current selected item
        textView = (TextView) findViewById(R.id.text);
    }

    /* (non-Javadoc)@see android.app.ListActivity#onListItemClick(android.widget.ListView, android.view.View, int, long)
     */
    public void onListItemClick(ListView parent, View v, int position, long id) {
        textView.setText(items[position]);
    }

}

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" >
    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:drawSelectorOnTop="false"
        />
</LinearLayout>

Dans votre fichier strings.xml :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ListViewTuto!</string>
    <string name="app_name">ListViewTuto2</string>
    <string-array>
        <item>items1</item>
        <item>items2</item>
        <item>items3</item>
        <item>items4</item>
        <item>items5</item>
        <item>items6</item>
    </string-array>
</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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
public class ListViewTuto extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Building mainLayout
        setContentView(R.layout.main);
        // Retrieve the ListView, EditText and Button
        ListView listView = (ListView) findViewById(R.id.myListView);
        final EditText editText = (EditText) findViewById(R.id.editTask);
        Button button = (Button) findViewById(R.id.addButton);
        // Création de la liste des to do items
        final ArrayList<String> items = new ArrayList<String>();
        items.add("items1");
        // Création de l'array adapter pour lier l'array à la listview
        final ArrayAdapter<String> arrayAdapter;
        arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);
        // Liaison de l'array adapter à la listview.
        listView.setAdapter(arrayAdapter);
        // Add the button listener
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // Add the value of the EditText in the list
                arrayAdapter.add(editText.getText().toString());
                // Delete the content of the Edit text
                editText.setText("");
            }
        });
    }
}

Dans votre layout :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<EditText  
    android:id="@+id/editTask"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
    <Button  
    android:id="@+id/addButton"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/btnAdd"
    />
  <ListView  
    android:id="@+id/myListView"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
  />
</LinearLayout>

Dans votre fichier values/strings.xml :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ListViewTuto!</string>
    <string name="app_name">ListViewTuto</string>
     <string name="btnAdd">Add</string>
</resources>

IV-D. Exemple pour l'AutoCompleteTextView

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
public class AutoCompleteTuto extends Activity implements TextWatcher {
    /** * A textView     */
    TextView textView;
    /** * An AutoComplete TextView     */
    AutoCompleteTextView autoCompleteTextView;
    /** * The dummy data */
    String[] items = { "A_item1", "B_item2", "C_item3", "D_item4", "E_item5", "F_item6" };
    /** *The arrayAdapter that manage the data displayed */
    ArrayAdapter<String> arrayAdapter;

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        // create the TextView
        textView = (TextView) findViewById(R.id.textView);
        // create the AutoCompleteTextView
        autoCompleteTextView = (AutoCompleteTextView) findViewById(
R.id. autoCompleteTextView);
        // Add the this.TextWatcher as listener
        autoCompleteTextView.addTextChangedListener(this);
        // Define the Adapter (Context, ListView Ressource, The items to display)
        arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);
        autoCompleteTextView.setAdapter(arrayAdapter);
    }
    /**************************************************************************/
    /** TextWatcher override methods **********************************************/
    /**************************************************************************/
    /** (non-Javadoc)     *  
* @see android.text.TextWatcher#onTextChanged(java.lang.CharSequence, int, int, int)
     */
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        autoCompleteTextView.setText(textView.getText());
    }
    /* * (non-Javadoc) * 
     * @see android.text.TextWatcher#beforeTextChanged(java.lang.CharSequence, int, int, int)
     */
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        // needed for interface, but not used
    }
    /* * (non-Javadoc) * 
     * @see android.text.TextWatcher#afterTextChanged(android.text.Editable)
     */
    public void afterTextChanged(Editable s) {
        // needed for interface, but not used
    }
}

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:id="@+id/textView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
    <AutoCompleteTextView android:id="@+id/autoCompleteTextView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="3"/>
</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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
/**
 * @author mathias1
 * @goals This class aims to display a date Picker and a time picker and retrieve their value
 */
public class DateAndTimePickerTuto extends Activity {
    /** * The formatter used */
    DateFormat fmtDateAndTime = DateFormat.getDateTimeInstance();
    /** * A label to display new date and time to the user */
    TextView calendarTextView;
    /** * The time object representation used by the class */
    Calendar calendar= Calendar.getInstance();
    /** * The datePicker object */
    DatePickerDialog datePickerDialog;
    /** * The listener for date changed */
    DatePickerDialog.OnDateSetListener dateSetListener = new DatePickerDialog.OnDateSetListener() {
        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
            // When a date is selected update the calendar object
            calendar.set(Calendar.YEAR, year);
            calendar.set(Calendar.MONTH, monthOfYear);
            calendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);
            // and the associated textView
            updateLabel();
        }
    };
    /**     * The timepicker object     */
    TimePickerDialog timePickerDialog;
    /** * The listener for time changed */
    TimePickerDialog.OnTimeSetListener timeSetListener = new TimePickerDialog.OnTimeSetListener() {
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            // When a date is selected update the calendar object
            calendar.set(Calendar.HOUR_OF_DAY, hourOfDay);
            calendar.set(Calendar.MINUTE, minute);
            // And the associated textView
            updateLabel();
        }
    };

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
//instanciate the date picker
        datePickerDialog=new DatePickerDialog(this, dateSetListener, calendar.get(Calendar.YEAR), 
calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH));
        //Define the button that show the date Picker
        Button btn = (Button) findViewById(R.id.btnDate);
        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Instanciate the DatePicker using this as context, the dateListener 
defined above and the current time
                new DatePickerDialog(getApplicationContext(), 
dateSetListener, 
calendar.get(Calendar.YEAR),
calendar.get(Calendar.MONTH),
calendar.get(Calendar.DAY_OF_MONTH)).show();
            }
        });
//instanciate the timepicker
        timePickerDialog=new TimePickerDialog(this, timeSetListener, 
calendar.get(Calendar.HOUR_OF_DAY),
                calendar.get(Calendar.MINUTE), true);
        //Define the button that show the time Picker
        btn = (Button) findViewById(R.id.btnTime);
        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Instanciate the TimePicker using this as context, the timeListener defined
above and the current time
                new TimePickerDialog(getApplicationContext(), 
timeSetListener, 
calendar.get(Calendar.HOUR_OF_DAY),
 calendar.get(Calendar.MINUTE), 
true).show();
            }
        });
        //Define the text view that displays the selected time
        calendarTextView = (TextView) findViewById(R.id.calendarTextView);
        updateLabel();
    }
    /** * Calls by the Time and Date SetListeners */
    private void updateLabel() {
        calendarTextView.setText(fmtDateAndTime.format(calendar.getTime()));
    }
}

La déclaration graphique :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  > 
  <TextView android:id="@+id/calendarTextView"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    /> 
  <Button android:id="@+id/btnDate"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Choisir une date" 
    /> 
  <Button android:id="@+id/btnTime"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Choisir une heure" 
    /> 
</LinearLayout>

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

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <AnalogClock android:id="@+id/analog"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        />
    <DigitalClock android:id="@+id/digital"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/analog"
        />
</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 utilé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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.