Ajouter des boutons à votre application

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment ajouter des composants dans Compose.

Un bouton est composé de texte et/ou d'une icône qui communique l'action qui se produit lorsque l'utilisateur appuie dessus.

Vous pouvez créer un bouton dans votre mise en page de trois manières différentes, selon que vous souhaitiez un bouton avec du texte, une icône ou les deux:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

Le code précédent génère un résultat semblable à celui-ci:

Image montrant trois types de boutons
Image 1. Trois styles de boutons.

Répondre aux événements de clic

Lorsque l'utilisateur appuie sur un bouton, l'objet Button reçoit un événement de clic.

Pour déclarer le gestionnaire d'événements de manière programmatique, créez un objet View.OnClickListener et attribuez-le au bouton en appelant setOnClickListener(View.OnClickListener), comme dans l'exemple suivant:

Kotlin

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Java

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

Appliquer un style à votre bouton

L'apparence du bouton (image de fond et police) varie d'un appareil à l'autre, car les appareils de différents fabricants ont souvent des styles par défaut différents pour les commandes d'entrée.

Pour personnaliser des boutons individuels avec un arrière-plan différent, spécifiez l'attribut android:background avec un drawable ou une ressource de couleur. Vous pouvez également appliquer un style pour le bouton, qui fonctionne de la même manière que les styles HTML pour définir plusieurs propriétés de style telles que l'arrière-plan, la police et la taille. Pour en savoir plus sur l'application des styles, consultez Styles et thèmes.

Bouton sans bordure

Une conception qui peut être utile est un bouton « sans bordure ». Les boutons sans bordure ressemblent à des boutons de base, sauf qu'ils n'ont pas de bordure ni d'arrière-plan, mais changent d'apparence selon différents états, par exemple lorsque l'utilisateur appuie dessus.

Pour créer un bouton sans bordure, appliquez le style borderlessButtonStyle au bouton, comme dans l'exemple suivant:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

Arrière-plan personnalisé

Si vous voulez vraiment redéfinir l'apparence de votre bouton, vous pouvez spécifier un arrière-plan personnalisé. Toutefois, au lieu de fournir un bitmap ou une couleur simple, votre arrière-plan doit être une ressource de liste d'états qui change d'apparence en fonction de l'état actuel du bouton.

Vous pouvez définir la liste des états dans un fichier XML qui définit trois images ou couleurs à utiliser pour les différents états du bouton.

Pour créer un drawable de liste d'états pour l'arrière-plan de votre bouton, procédez comme suit:

  1. Créez trois bitmaps pour l'arrière-plan du bouton, qui représentent les états du bouton par défaut, en cas d'appui et de sélection. Pour vous assurer que vos images s'adaptent à des boutons de différentes tailles, créez les bitmaps en tant que bitmaps nine-patch.
  2. Placez les bitmaps dans le répertoire res/drawable/ de votre projet. Attribuez un nom à chaque bitmap pour refléter l'état du bouton qu'il représente, par exemple button_default.9.png, button_pressed.9.png et button_focused.9.png.
  3. Créez un fichier XML dans le répertoire res/drawable/. Nommez-le button_custom.xml, par exemple. Insérez un fichier XML comme suit :
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/button_pressed"
              android:state_pressed="true" />
        <item android:drawable="@drawable/button_focused"
              android:state_focused="true" />
        <item android:drawable="@drawable/button_default" />
    </selector>
    

    Ce champ définit une seule ressource drawable qui modifie son image en fonction de l'état actuel du bouton.

    • Le premier <item> définit le bitmap à utiliser lorsque l'utilisateur appuie sur le bouton (activé).
    • Le deuxième <item> définit le bitmap à utiliser lorsque le bouton est sélectionné, par exemple lorsqu'il est mis en surbrillance à l'aide du trackball ou du pavé directionnel.
    • Le troisième <item> définit le bitmap à utiliser lorsque le bouton est dans l'état par défaut, lorsqu'il n'est ni appuyé, ni sélectionné.

    Ce fichier XML représente une seule ressource drawable. Lorsqu'une Button est référencée pour son arrière-plan, l'image affichée change en fonction de l'état du bouton.

  4. Appliquez le fichier XML drawable en tant qu'arrière-plan du bouton :
    <Button
        android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage"
        android:background="@drawable/button_custom"  />
    

Pour en savoir plus sur cette syntaxe XML, y compris sur la définition d'un bouton désactivé, pointé sur le curseur ou dans un autre état, consultez la documentation sur StateListDrawable.