Ajouter des boutons à votre application

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

Un bouton se compose de texte ou d'une icône, ou des deux, qui indique 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 souhaitez 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
Figure 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");
    }
});

Personnaliser votre bouton

L'apparence de votre bouton (image d'arrière-plan 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 contrôles de saisie.

Pour personnaliser des boutons individuels avec un arrière-plan différent, spécifiez l'attribut android:background avec une ressource de couleur ou de dessin. Vous pouvez également appliquer un style au 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 de styles, consultez Styles et thèmes.

Bouton "Sans bordure"

Un bouton "sans bordure" peut être utile. Les boutons sans bordure ressemblent aux boutons de base, sauf qu'ils n'ont pas de bordure ni d'arrière-plan, mais changent d'apparence dans différents états, par exemple lorsqu'ils sont appuyés.

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 souhaitez vraiment redéfinir l'apparence de votre bouton, vous pouvez spécifier un arrière-plan personnalisé. Toutefois, au lieu de fournir une simple bitmap ou couleur, 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'état 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 par défaut, appuyé et sélectionné du bouton. Pour vous assurer que vos images s'adaptent aux boutons de différentes tailles, créez les bitmaps en tant que bitmaps NinePatch.
  2. Placez les bitmaps dans le répertoire res/drawable/ de votre projet. Nommez 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-la, par exemple, button_custom.xml. Insérez un code XML semblable à celui-ci :
    <?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>

    Cela 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 (l'active).
    • 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, c'est-à-dire qu'il n'est ni ciblé ni sélectionné.

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

  4. Appliquez le fichier XML du drawable comme 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 façon de définir un bouton désactivé, survolé ou dans un autre état, consultez StateListDrawable.