Enthält in der Regel die wichtigsten Navigationselemente. Sie können Zugriff auf andere Aktionen gewähren, z. B. über eine schwebende Aktionsschaltfläche.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Obere App-Leiste implementieren
Der folgende Code zeigt Implementierungen für die vier Arten von oberen App-Leisten, einschließlich verschiedener Beispiele dafür, wie Sie das Scrollverhalten steuern können.
Verwenden Sie das TopAppBar-Element, um eine kleine App-Leiste oben zu erstellen. Dies ist die einfachste App-Leiste, die in diesem Beispiel nur einen Titel enthält.
Im folgenden Beispiel wird TopAppBar kein Wert für scrollBehavior übergeben. Daher reagiert die obere App-Leiste nicht auf das Scrollen der inneren Inhalte.
Ergebnis
Abbildung 1 Eine kleine App-Leiste oben.
Zentriert ausgerichtete obere App-Leiste
Die zentrierte obere App-Leiste entspricht der kleinen App-Leiste, mit der Ausnahme, dass der Titel in der Mitte der Komponente zentriert ist. Verwenden Sie dazu die spezielle CenterAlignedTopAppBar-Komponente.
In diesem Beispiel wird enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird. Die Leiste wird minimiert, wenn der Nutzer im inneren Inhalt des Scaffolds scrollt.
Ergebnis
Abbildung 2. Eine oben zentrierte App-Leiste.
Obere App-Leiste (mittel)
Bei der mittleren oberen App-Leiste wird der Titel unter zusätzlichen Symbolen platziert. Verwenden Sie zum Erstellen MediumTopAppBar composable.
Wie im vorherigen Code wird in diesem Beispiel enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird.
Ergebnis
Abbildung 3 Eine mittlere App-Leiste oben, die das Scrollverhalten von enterAlwaysScrollBehavior zeigt
Große obere App-Leiste
Eine große obere App-Leiste ähnelt der mittleren, hat aber einen größeren Abstand zwischen dem Titel und den Symbolen und nimmt insgesamt mehr Platz auf dem Bildschirm ein. Verwenden Sie dazu das LargeTopAppBar-Element.
In diesem Beispiel wird exitUntilCollapsedScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird. Die Leiste wird minimiert, wenn der Nutzer im inneren Inhalt des Scaffolds scrollt, und maximiert, wenn er zum Ende des inneren Inhalts scrollt.
Ergebnis
Abbildung 4: Beispielimplementierung einer großen App-Leiste oben.
Untere App-Leiste implementieren
Verwenden Sie zum Erstellen einer unteren App-Leiste das BottomAppBar-Element, das dem Element für die obere App-Leiste ähnelt.
Sie übergeben die folgenden Schlüsselparameter für Composeables:
actions: Eine Reihe von Symbolen, die links in der Leiste angezeigt werden. Dies sind in der Regel entweder wichtige Aktionen für den jeweiligen Bildschirm oder Navigationselemente.
floatingActionButton: Die unverankerte Aktionsschaltfläche, die rechts in der Leiste angezeigt wird.
Ergebnis
Abbildung 5: Beispielimplementierung einer App-Leiste unten.
Wichtige Fakten
Sie übergeben App-Leisten in der Regel an das Scaffold-Komposit, das bestimmte Parameter zum Empfangen hat.
Die Composeables, die Sie zum Implementieren von oberen App-Leisten verwenden, haben gemeinsame Schlüsselparameter:
title: Der Text, der in der App-Leiste angezeigt wird.
navigationIcon: Das primäre Navigationssymbol, das links neben der App-Leiste angezeigt wird.
actions: Symbole, über die Nutzer auf wichtige Aktionen zugreifen können, die rechts neben der App-Leiste angezeigt werden.
scrollBehavior: Bestimmt, wie die obere App-Leiste auf das Scrollen des Inhalts des Scaffolds reagiert.
colors: Bestimmt, wie die App-Leiste angezeigt wird.
Sie können festlegen, wie die App-Leiste reagiert, wenn der Nutzer im inneren Inhalt des Scaffolds scrollt. Erstellen Sie dazu eine Instanz von TopAppBarScrollBehavior und übergeben Sie sie der oberen App-Leiste für den Parameter scrollBehavior. Es gibt drei Arten von TopAppBarScrollBehavior:
enterAlwaysScrollBehavior: Wenn der Nutzer den inneren Inhalt des Scaffolds maximiert, wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer den inneren Inhalt nach unten zieht.
exitUntilCollapsedScrollBehavior: Ähnlich wie bei enterAlwaysScrollBehavior, wobei sich die App-Leiste auch maximiert, wenn der Nutzer das Ende des inneren Inhalts des Scaffolds erreicht.
pinnedScrollBehavior: Die App-Leiste bleibt an Ort und Stelle und reagiert nicht auf Scrollen.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
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-02-06 (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-02-06 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nApp bars are containers at the top or the bottom of the screen that give your\nusers access to key features and navigation items:\n\n| Type | Appearance | Purpose |\n|---------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| [Top app bar](#top) | Across the top of the screen. | Provides access to key tasks and information. Typically hosts a title, core action items, and certain navigation items. |\n| [Bottom app bar](#bottom) | Across the bottom of the screen. | Typically includes core navigation items. Might give access to other actions, for example, by using a floating action button. |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a top app bar\n\nThe following code shows implementations for the four types of top app bars,\nincluding varying examples of how you can control scroll behavior.\n\n- [Small top app bar](#small)\n- [Center-aligned top app bar](#center)\n- [Medium top app bar](#medium)\n- [Large top app bar](#large)\n\nSmall top app bar\n\nTo create a small top app bar, use the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable. This is the\nsimplest possible top app bar and in this example just contains a title.\n\nThe following example does not pass `TopAppBar` a value for\n`scrollBehavior`, so the top app bar does not react to scrolling of the inner\ncontent.\n\nResult **Figure 1.** A small top app bar.\n\nCenter-aligned top app bar\n\nThe center-aligned top app bar is the same as the small app bar,\nexcept the title is centered within the component. To implement it, use the\ndedicated [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) composable.\n\nThis example uses `enterAlwaysScrollBehavior()` to get the value that it passes\nfor `scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content.\n\nResult **Figure 2.** A center-aligned top app bar.\n\nMedium top app bar\n\nThe medium top app bar places the title beneath any additional icons. To create\none, use the [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nLike the previous code, this example uses `enterAlwaysScrollBehavior()` to\nget the value that it passes for `scrollBehavior`.\n\nResult\n\n\u003cbr /\u003e\n\n**Figure 3.** A medium top app bar demonstrating the scroll behavior from `enterAlwaysScrollBehavior`.\n\n\u003cbr /\u003e\n\nLarge top app bar\n\nA large top app bar is similar to the medium, though the padding between the\ntitle and the icons is greater and it occupies more space on screen overall. To\ncreate one, use the [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior) ) composable.\n\nThis example uses\n`exitUntilCollapsedScrollBehavior()` to get the value that it passes for\n`scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content, but then expands when the user scrolls to the end of\nthe inner content.\n\nResult **Figure 4.** An example implementation of a large top app bar.\n\nImplement a bottom app bar\n\nTo create a bottom app bar, use the [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable, which is\nsimilar to the top app bar composable.\n\nYou pass composables for the following key\nparameters:\n\n- `actions`: A series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.\n- `floatingActionButton`: The floating action button that appears on the right side of the bar.\n\n| **Note:** You can also use `BottomAppBar` without passing a value for `actions` and `floatingActionButton`. You create a custom bottom app bar by filling `BottomAppBar` with content as you would other containers.\n\nResult **Figure 5.** An example implementation of a bottom app bar.\n\nKey points\n\n- You generally pass app bars to the `Scaffold` composable, which has specific parameters to receive them.\n- The composables that you use to implement top app\n bars share key parameters:\n\n - `title`: The text that appears across the app bar.\n - `navigationIcon`: The primary icon for navigation, which appears on the left of the app bar.\n - `actions`: Icons that provide the user access to key actions, which appear on the right of the app bar.\n - `scrollBehavior`: Determines how the top app bar responds to scrolling of the scaffold's inner content.\n - `colors`: Determines how the app bar appears.\n- You can control how the app bar responds when the user scrolls the\n scaffold's inner content. To do so, create an instance of\n [`TopAppBarScrollBehavior`](/reference/kotlin/androidx/compose/material3/TopAppBarScrollBehavior) and pass it to your top app bar for the\n `scrollBehavior` parameter. There are three types of `TopAppBarScrollBehavior`:\n\n - `enterAlwaysScrollBehavior`: When the user pulls up the scaffold's inner content, the top app bar collapses. The app bar expands when the user pulls down the inner content.\n - `exitUntilCollapsedScrollBehavior`: Similar to `enterAlwaysScrollBehavior`, though the app bar also expands when the user reaches the end of the scaffold's inner content.\n - `pinnedScrollBehavior`: The app bar remains in place and does not react to scrolling.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
