Erste Schritte mit Jetpack Compose
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Jetpack Compose ist das moderne Toolkit für die Erstellung nativer Android-Benutzeroberflächen. Hier finden Sie die neuesten Informationen zur Verwendung von Compose.
- Übersicht: Hier finden Sie alle Ressourcen, die Compose-Entwicklern zur Verfügung stehen.
- Tutorial: Erste Schritte mit Compose – eine einfache Benutzeroberfläche erstellen
- Kurzanleitungen: Neu! In unseren schnellen und fokussierten Anleitungen erfahren Sie, wie Sie Ihr Ziel so schnell wie möglich erreichen.
Foundation
- In Compose denken: Hier erfahren Sie, wie sich der deklarative Ansatz von Compose von dem ansichtsbasierten Ansatz unterscheidet, den Sie möglicherweise in der Vergangenheit verwendet haben, und wie Sie ein mentales Modell für die Arbeit mit Compose erstellen.
- Status verwalten: Hier erfahren Sie, wie Sie den Status in Ihrer Compose-App festlegen und verwenden.
- Lebenszyklus von Composables: Hier erfahren Sie mehr über den Lebenszyklus eines Composables und darüber, wie Compose entscheidet, ob es neu gezeichnet werden muss.
- Modifier: Hier erfahren Sie, wie Sie Modifier verwenden, um Ihre Composables zu erweitern oder zu gestalten.
- Nebeneffekte in Compose: Hier erfahren Sie, wie Sie Nebeneffekte am besten verwalten.
- Jetpack Compose-Phasen: Hier erfahren Sie, welche Schritte Compose durchläuft, um Ihre Benutzeroberfläche zu rendern, und wie Sie diese Informationen nutzen können, um effizienten Code zu schreiben.
- Architektonische Schichtung: Hier erfahren Sie mehr über die Architekturschichten, aus denen Jetpack Compose besteht, und über die wichtigsten Prinzipien, die das Design beeinflusst haben.
- Leistung: Hier erfahren Sie, wie Sie häufige Programmierfehler vermeiden, die sich negativ auf die Leistung Ihrer App auswirken können.
- Semantik in Compose: Hier erfahren Sie mehr über den Semantikbaum, der Ihre Benutzeroberfläche so organisiert, dass sie von Diensten für Bedienungshilfen und dem Testframework verwendet werden kann.
- Lokal begrenzte Daten mit CompositionLocal: Hier erfahren Sie, wie Sie
CompositionLocal
verwenden, um Daten durch die Komposition zu übergeben.
Entwicklungsumgebung
Design
- Layouts: Hier erfahren Sie mehr über die nativen Layoutkomponenten von Compose und wie Sie eigene Layouts entwerfen.
- Grundlagen des Layouts: Hier erfahren Sie mehr über die Bausteine für eine einfache App-Benutzeroberfläche.
- Material-Komponenten und ‑Layouts: Hier erfahren Sie mehr über Material-Komponenten und ‑Layouts in Compose.
- Benutzerdefinierte Layouts: Hier erfahren Sie, wie Sie das Layout Ihrer App anpassen und ein eigenes benutzerdefiniertes Layout entwerfen.
- Verschiedene Displaygrößen unterstützen: Hier erfahren Sie, wie Sie mit Compose Layouts erstellen, die sich an verschiedene Displaygrößen, Ausrichtungen und Formfaktoren anpassen.
- Ausrichtungslinien: Hier erfahren Sie, wie Sie benutzerdefinierte Ausrichtungslinien erstellen, um UI-Elemente präzise auszurichten und zu positionieren.
- Integrierte Messungen: Da Sie mit Compose UI-Elemente nur einmal pro Durchlauf messen können, wird auf dieser Seite erläutert, wie Sie Informationen zu untergeordneten Elementen abfragen, bevor Sie sie messen.
- ConstraintLayout: Hier erfahren Sie, wie Sie
ConstraintLayout
in Ihrer Compose-UI verwenden.
- Designsysteme: Hier erfahren Sie, wie Sie ein Designsystem implementieren und Ihrer App ein einheitliches Erscheinungsbild verleihen.
- Listen und Tabellen: Hier finden Sie Informationen zu einigen Optionen von Compose zum Verwalten und Anzeigen von Listen und Tabellen mit Daten.
- Text: Hier finden Sie Informationen zu den wichtigsten Optionen von Compose zum Anzeigen und Bearbeiten von Text.
- Grafiken: Hier erfahren Sie mehr über die Funktionen von Compose zum Erstellen und Bearbeiten benutzerdefinierter Grafiken.
- Animation: Hier erfahren Sie mehr über die verschiedenen Optionen von Compose zum Animieren von UI-Elementen.
- Gesten: Hier erfahren Sie, wie Sie eine Compose-Benutzeroberfläche erstellen, die Nutzergesten erkennt und darauf reagiert.
- Nutzerinteraktionen verarbeiten: Hier erfahren Sie, wie Compose Low-Level-Eingaben in Interaktionen auf höherer Ebene abstrahiert, damit Sie anpassen können, wie Ihre Komponenten auf Nutzeraktionen reagieren.
Compose einführen
- Vorhandene View-basierte Apps migrieren: Hier erfahren Sie, wie Sie Ihre vorhandene View-basierte App zu Compose migrieren.
- Migrationsstrategie: Hier erfahren Sie, wie Sie Compose sicher und schrittweise in Ihre Codebasis einführen.
- Interoperabilitäts-APIs: Hier erfahren Sie mehr über die Compose-APIs, mit denen Sie Compose mit View-basierter UI kombinieren können.
- Weitere Überlegungen: Hier erfahren Sie mehr über andere Aspekte wie Design, Architektur und Tests bei der Migration Ihrer View-basierten App zu Compose.
- Compose und andere Bibliotheken: Hier erfahren Sie, wie Sie ansichtsbasierte Bibliotheken in Ihren Compose-Inhalten verwenden.
- Compose-Architektur: Hier erfahren Sie, wie Sie das unidirektionale Flussmuster in Compose implementieren, wie Sie Ereignisse und State-Holder implementieren und wie Sie mit
ViewModel
in Compose arbeiten.
- Navigation: Hier erfahren Sie, wie Sie die Navigation-Komponente mit
NavController
in Ihre Compose-UI einbinden.
- Navigation für responsive UIs: Hier erfahren Sie, wie Sie die Navigation Ihrer App so gestalten, dass sie sich an verschiedene Bildschirmgrößen, Ausrichtungen und Formfaktoren anpasst.
- Ressourcen: Hier erfahren Sie, wie Sie mit den Ressourcen Ihrer App in Ihrem Compose-Code arbeiten.
- Bedienungshilfen: Hier erfahren Sie, wie Sie Ihre Compose-Benutzeroberfläche für Nutzer mit unterschiedlichen Anforderungen an die Bedienungshilfen optimieren.
- Tests: Informationen zum Testen von Compose-Code.
Zusätzliche Ressourcen
Empfehlungen für dich
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-08-21 (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-08-21 (UTC)."],[],[],null,["# Get started with Jetpack Compose\n\nJetpack Compose is the modern toolkit for building native Android UI. Here's\nwhere you'll find the latest information about using Compose.\n\n- [Overview](/develop/ui/compose): See all the resources available to Compose developers.\n- [Tutorial](/develop/ui/compose/tutorial): Get started with Compose, by using it to build a simple UI.\n- [Quick Guides](/quick-guides): **New!** Try out our fast and focused guides, designed to get you to your goal as quickly as possible.\n\nFoundation\n----------\n\n- [Thinking in Compose](/develop/ui/compose/mental-model): Learn how Compose's declarative approach is different from the view-based approach you may have used in the past, and how to build a mental model of working with Compose.\n- [Managing state](/develop/ui/compose/state): Learn about setting and using state in your Compose app.\n- [Lifecycle of composables](/develop/ui/compose/lifecycle): Learn about the lifecycle of a composable, and how Compose decides if it needs to be redrawn.\n- [Modifiers](/develop/ui/compose/modifiers): Learn how to use modifiers to augment or decorate your composables.\n- [Side-effects in Compose](/develop/ui/compose/side-effects): Learn the best ways to manage side-effects.\n- [Jetpack Compose Phases](/develop/ui/compose/phases): Learn about the steps Compose goes through to render your UI, and how to use that information to write efficient code\n- [Architectural layering](/develop/ui/compose/layering): Learn about the architectural layers that make up Jetpack Compose, and the core principles that informed its design.\n- [Performance](/develop/ui/compose/performance): Learn how to avoid the common programming pitfalls that can hurt your app's performance.\n- [Semantics in Compose](/develop/ui/compose/semantics): Learn about the Semantics tree, which organizes your UI in a way that can be used by accessibility services and the testing framework.\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal): Learn how to use `CompositionLocal` to pass data through the Composition.\n\nDevelopment environment\n-----------------------\n\n- [Android Studio with Compose](/develop/ui/compose/setup): Set up your development environment to use Compose.\n- [Tooling for Compose](/develop/ui/compose/tooling): Learn about Android Studio's new features to support Compose.\n- [Kotlin for Compose](/develop/ui/compose/kotlin): Learn how certain Kotlin-specific idioms work with Compose.\n- [Compare Compose and View metrics](/develop/ui/compose/migrate/compare-metrics): Learn how migrating to Compose can affect your app's APK size and runtime performance.\n- [Bill of Materials](/develop/ui/compose/bom): Manage all your Compose dependencies by specifying only the BOM's version.\n\nDesign\n------\n\n- [Layouts](/develop/ui/compose/layouts): Learn about Compose's native layout components, and how to design your own.\n - [Layout basics](/develop/ui/compose/layouts/basics): Learn about the building blocks for a straightforward app UI.\n - [Material Components and layouts](/develop/ui/compose/components): Learn about Material components and layouts in Compose.\n - [Custom layouts](/develop/ui/compose/layouts/custom): Learn how to take control of your app's layout, and how to design a custom layout of your own.\n - [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes): Learn how to use Compose to build layouts that adapt to different display sizes, orientations, and form factors.\n - [Alignment lines](/develop/ui/compose/layouts/alignment-lines): Learn how to create custom alignment lines to precisely align and position your UI elements.\n - [Intrinsic measurements](/develop/ui/compose/layouts/intrinsic-measurements): Since Compose only allows you to measure UI elements once per pass, this page explains how to query for information about child elements before measuring them.\n - [ConstraintLayout](/develop/ui/compose/layouts/constraintlayout): Learn how to use `ConstraintLayout` in your Compose UI.\n- [Design Systems](/develop/ui/compose/designsystems): Learn how to implement a design system and give your app a consistent look and feel.\n - [Material Design 3](/develop/ui/compose/designsystems/material3): Learn how to implement Material You with Compose's implementation of [Material Design 3](https://m3.material.io/).\n - [Migrating from Material 2 to Material 3](/develop/ui/compose/designsystems/material2-material3): Learn how to migrate your app from Material Design 2 to Material Design 3 in Compose.\n - [Material Design 2](/develop/ui/compose/designsystems/material): Learn how to customize Compose's implementation of [Material Design 2](https://material.io/) to fit your product's brand.\n - [Custom design systems](/develop/ui/compose/designsystems/custom): Learn how to implement a custom design system in Compose, and how to adapt existing Material Design composables to handle this.\n - [Anatomy of a theme](/develop/ui/compose/designsystems/anatomy): Learn about the lower-level constructs and APIs used by `MaterialTheme` and custom design systems.\n- [Lists and grids](/develop/ui/compose/lists): Learn about some of Compose's options for managing and displaying lists and grids of data.\n- [Text](/develop/ui/compose/text): Learn about Compose's main options for displaying and editing text.\n- [Graphics](/develop/ui/compose/graphics): Learn about Compose's features for building and working with custom graphics.\n- [Animation](/develop/ui/compose/animation/introduction): Learn about Compose's different options for animating your UI elements.\n- [Gestures](/develop/ui/compose/touch-input/pointer-input): Learn how to build a Compose UI that detects and interacts with user gestures.\n- [Handling user interactions](/develop/ui/compose/touch-input/user-interactions/handling-interactions): Learn how Compose abstracts low-level input into higher-level interactions, so you can customize how your components respond to user actions.\n\nAdopting Compose\n----------------\n\n- [Migrate existing View-based apps](/develop/ui/compose/migrate): Learn how to migrate your existing View-based app to Compose.\n - [Migration strategy](/develop/ui/compose/migrate/strategy): Learn the strategy to safely and incrementally introduce Compose into your codebase.\n - [Interoperability APIs](/develop/ui/compose/migrate/interoperability-apis): Learn about Compose's APIs to help you combine Compose with View-based UI.\n - [Other considerations](/develop/ui/compose/migrate/other-considerations): Learn about other considerations like theming, architecture, and testing while migrating your View-based app to Compose.\n- [Compose and other libraries](/develop/ui/compose/libraries): Learn how to use view-based libraries in your Compose content.\n- [Compose architecture](/develop/ui/compose/architecture): Learn how to implement the unidirectional flow pattern in Compose, how to implement events and state holders, and how to work with `ViewModel` in Compose.\n- [Navigation](/develop/ui/compose/navigation): Learn how to use `NavController` to integrate the Navigation component with your Compose UI.\n - [Navigation for responsive UIs](/guide/topics/large-screens/navigation-for-responsive-uis): Learn how to design your app's navigation so it adapts to different screen sizes, orientations, and form factors.\n- [Resources](/develop/ui/compose/resources): Learn how to work with your app's resources in your Compose code.\n- [Accessibility](/develop/ui/compose/accessibility): Learn how to make your Compose UI suitable for users with different accessibility requirements.\n- [Testing](/develop/ui/compose/testing): Learn about testing your Compose code.\n - [Testing cheat sheet](/develop/ui/compose/testing-cheatsheet): A quick reference of useful Compose testing APIs.\n\nAdditional resources\n--------------------\n\n- [Get setup](/develop/ui/compose/setup)\n- [Curated learning pathway](/courses/pathways/compose)\n- [Compose API guidelines](https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md)\n- [API reference](/reference/kotlin/androidx/compose)\n- [Codelabs](https://goo.gle/compose-codelabs)\n- [Sample apps](https://github.com/android/compose-samples)\n- [Videos](https://www.youtube.com/user/androiddevelopers/search?query=%23jetpackcompose)\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal)\n- [Other considerations](/develop/ui/compose/migrate/other-considerations)\n- [Anatomy of a theme in Compose](/develop/ui/compose/designsystems/anatomy)"]]