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 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 souhaitez créer 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 quelque chose comme ceci:

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 de votre 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 une ressource drawable ou de couleur. 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 la section Styles et thèmes.

Bouton sans bordure

Une conception qui peut être utile est un bouton "sans bordure". Les boutons sans bordure ressemblent aux boutons de base, à la différence qu'ils n'ont pas de bordure ni d'arrière-plan, mais qu'ils changent toujours d'apparence selon les différents états, par exemple lorsqu'ils sont enfoncé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 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'é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 du bouton par défaut, sélectionné et sélectionné. Pour vous assurer que vos images peuvent accueillir 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. 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 button_custom.xml. Insérez du code 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>

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

    • Le premier <item> définit la bitmap à utiliser lorsque le bouton est enfoncé (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, qu'il n'a ni appuyé, 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 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 définition d'un bouton désactivé, en survol ou dans un autre état, consultez la page StateListDrawable.