Schaltflächen zu Ihrer App hinzufügen

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Hinzufügen von Komponenten in Compose

Eine Schaltfläche besteht aus Text oder einem Symbol oder beidem, um zu kommunizieren, welche Aktion ausgeführt wird, wenn der Nutzer darauf tippt.

Sie haben drei Möglichkeiten, eine Schaltfläche in Ihrem Layout zu erstellen, je nachdem, ob Sie eine Schaltfläche mit Text, ein Symbol oder beides möchten:

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

Der vorherige Code generiert Folgendes:

Bild mit drei Arten von Schaltflächen
Abbildung 1. Drei Schaltflächenstile.

Auf Klickereignisse reagieren

Wenn der Nutzer auf eine Schaltfläche tippt, empfängt das Button-Objekt ein On-Click-Ereignis.

Wenn Sie den Event-Handler programmatisch deklarieren möchten, erstellen Sie ein View.OnClickListener-Objekt und weisen Sie es der Schaltfläche zu, indem Sie setOnClickListener(View.OnClickListener) aufrufen, wie im folgenden Beispiel:

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");
    }
});

Button gestalten

Das Aussehen der Schaltfläche – das Hintergrundbild und die Schriftart – variiert je nach Gerät, da Geräte verschiedener Hersteller oft unterschiedliche Standardstile für Eingabesteuerelemente haben.

Wenn Sie einzelne Schaltflächen mit einem anderen Hintergrund anpassen möchten, geben Sie das Attribut android:background mit einer Drawable- oder Farbressource an. Alternativ können Sie einen Stil für die Schaltfläche anwenden. Dieser funktioniert ähnlich wie HTML-Stile, um mehrere Stileigenschaften wie Hintergrund, Schriftart und Größe zu definieren. Weitere Informationen zum Anwenden von Stilen finden Sie unter Stile und Designs.

Button ohne Rahmen

Ein nützliches Design ist eine „rahmenlose“ Schaltfläche. Rahmenlose Schaltflächen ähneln einfachen Schaltflächen, haben aber keinen Rahmen und keinen Hintergrund. Ihr Aussehen ändert sich jedoch in verschiedenen Status, z. B. wenn sie angetippt werden.

Wenn Sie eine Schaltfläche ohne Rahmen erstellen möchten, wenden Sie den Stil borderlessButtonStyle auf die Schaltfläche an, wie im folgenden Beispiel:

<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" />

Benutzerdefinierter Hintergrund

Wenn Sie das Aussehen der Schaltfläche wirklich neu definieren möchten, können Sie einen benutzerdefinierten Hintergrund angeben. Statt einer einfachen Bitmap oder Farbe muss der Hintergrund jedoch eine Statuslistenressource sein, deren Darstellung sich je nach aktuellem Status der Schaltfläche ändert.

Sie können die Statusliste in einer XML-Datei definieren, in der drei Bilder oder Farben für die verschiedenen Schaltflächenstatus angegeben werden.

So erstellen Sie ein State-List-Drawable für den Hintergrund Ihrer Schaltfläche:

  1. Erstellen Sie drei Bitmaps für den Button-Hintergrund, die die Button-Zustände „Standard“, „Gedrückt“ und „Fokus“ darstellen. Damit Ihre Bilder in Schaltflächen unterschiedlicher Größe passen, erstellen Sie die Bitmaps als Nine-Patch-Bitmaps.
  2. Platzieren Sie die Bitmaps im res/drawable/-Verzeichnis Ihres Projekts. Geben Sie jedem Bitmap einen Namen, der den Schaltflächenstatus widerspiegelt, z. B. button_default.9.png, button_pressed.9.png und button_focused.9.png.
  3. Erstellen Sie im Verzeichnis res/drawable/ eine neue XML-Datei. Geben Sie ihm einen Namen wie button_custom.xml. Fügen Sie XML-Code wie den folgenden ein:
    <?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>

    Dadurch wird eine einzelne zeichnungsfähige Ressource definiert, deren Bild sich je nach aktuellem Status der Schaltfläche ändert.

    • Die erste <item> definiert die Bitmap, die verwendet werden soll, wenn auf den Button getippt (aktiviert) wird.
    • Das zweite <item> definiert die Bitmap, die verwendet werden soll, wenn der Fokus auf der Schaltfläche liegt, z. B. wenn die Schaltfläche mit dem Trackball oder dem Steuerkreuz hervorgehoben wird.
    • Das dritte <item> definiert die Bitmap, die verwendet werden soll, wenn sich die Schaltfläche im Standardstatus befindet, also weder angetippt noch fokussiert ist.

    Diese XML-Datei stellt eine einzelne zeichnungsfähige Ressource dar. Wenn ein Button als Hintergrund verwendet wird, ändert sich das angezeigte Bild je nach Status der Schaltfläche.

  4. Wenden Sie die XML-Datei für Drawables als Schaltflächenhintergrund an:
    <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"  />

Weitere Informationen zu dieser XML-Syntax, einschließlich der Definition einer Schaltfläche, die deaktiviert, mit dem Mauszeiger überfahren oder in einem anderen Status ist, finden Sie unter StateListDrawable.