Schaltflächen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Verwenden Sie die Komponente Schaltfläche für Aktionen, die für Nutzer leicht verständlich sind und kein Textlabel benötigen. Schaltflächen unterscheiden sich von Chips durch ihre kreisförmige Form.
Anatomie
A. Inhalt
Schaltflächen haben einen einzelnen Steckplatz für ein Symbol oder Text. Wählen Sie ein Symbol aus, das für die Aktion der Schaltfläche relevant ist. Wenn ein Symbol die entsprechende Aktion nicht beschreiben kann, können Sie Text mit maximal drei Zeichen verwenden. Verwenden Sie eine Chip-Komponente, wenn ein Symbol die Aktion nicht klar beschreiben kann.
B. Container
Schaltflächencontainer sind auf eine einzige durchgehende Füllung beschränkt.
Kompakte Schaltflächen
Kompakte Schaltflächen erscheinen kleiner, haben aber eine größere berührbare Fläche. Die Standardgröße des berührbaren Bereichs ist 48 × 48 dp.
Hierarchiediagramm
Verwenden Sie unterschiedliche Farbfüllungen, um die Schaltflächenhierarchie zu kennzeichnen.
Hohe Betonung
Schaltflächen mit starker Betonung enthalten Aktionen, die für die App von primärer Bedeutung sind. Verwenden Sie für Schaltflächen mit starker Betonung Primär- oder Sekundärfarben für den Container und On Primary- und On Secondary-Farben für den Inhalt. Weitere Informationen finden Sie unter Wear OS-Designthemen.
Mittelste Betonung
Schaltflächen mit mittlerer Betonung zeichnen sich durch eine weniger kontrastreiche Farbfüllung aus. Sie enthalten Aktionen, die weniger wichtig sind als die primären Aktionen. Verwenden Sie die Farbe „Oberfläche“ für den Container und die Farbe „Auf Oberfläche“ für den Inhalt.
Alternativ können Sie die benutzerdefinierte Komponente OutlinedButton für eine Schaltfläche mit mittlerer Betonung verwenden. Diese hat einen transparenten Hintergrund, einen farbigen Strich mit einer Deckkraft von 60% und primärfarbenen Inhalt.
Geringe Betonung (nur Symbol)
Schaltflächen mit geringer Betonung haben keine Füllung. Sie eignen sich am besten für kleinere Bereiche auf dem Zifferblatt, in denen eine kompakte Anordnung erforderlich ist. Verwenden Sie die Farbe „Auf Oberfläche“ für den Inhalt.
Größen
Verwenden Sie Schaltflächen unterschiedlicher Größe, um Aktionen hervorzuheben oder weniger hervorzuheben.
Groß
Symbol (30 × 30 dp)
Container (60 × 60 dp)
Standard
Symbol (26 × 26 dp)
Container (52 × 52 dp)
Klein
Symbol (24 × 24 dp)
Container (48 × 48 dp)
Extraklein
Symbol (24 × 24 dp)
Container (32 × 32 dp)
Wir empfehlen, um diese Schaltfläche herum zusätzlichen Abstand hinzuzufügen, um ein Tippziel von mindestens 48 dp zu schaffen. Das ist die Mindestgröße für Berührungsziele aus Gründen der Barrierefreiheit.
Nutzung
Verwenden Sie Standardschaltflächen, damit Nutzer eine einzelne Aktion ausführen können, z. B. einen Anruf annehmen oder ablehnen oder einen Timer starten.
Mit Ein/Aus-Schaltflächen können Nutzer eine Option aktivieren oder deaktivieren, z. B. Wochentage auswählen oder deaktivieren oder einen Timer pausieren und wieder starten.
Adaptive Layouts
Responsives Verhalten
1 Taste
Die internen Abstände bleiben gleich und die Ränder sollten in Prozent angegeben werden, damit sich die Schaltflächen nicht zu weit dehnen und eine relative Größe beibehalten.
2 Tasten
Bei zwei Schaltflächen werden prozentuale interne Ränder hinzugefügt, damit sich die Schaltflächen nicht zu weit dehnen und eine relative Größe beibehalten.
IMEs
1 oder 2 Tasten
IMEs mit zwei oder einer einzigen Tastensperre erstrecken sich unabhängig von der Bildschirmgröße immer bis zu den Seitenrändern.
3 Schaltflächen
Auf Bildschirmen mit weniger als 225 dp bleiben die Schaltflächen rund und werden nicht gedehnt. Auf größeren Bildschirmen mit mindestens 225 dp erstrecken sich die Schaltflächen bis zu den seitlichen Rändern.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
