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

Chapitre 2.1

Android2ee

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 :

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

Article lu fois.

L'auteur

Mathias Seguy

L'article

Publié le 18 septembre 2014 - Mis à jour le 22 février 2020

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Copyright © 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.

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

Chapitre 2.1 Android2ee

L'auteur

L'article

Liens sociaux

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▲

Chapitre 2.1

Android2ee