Schnelleinstieg

Wenn Sie Compose optimal nutzen möchten, laden Sie Android Studio herunter und installieren Sie es. Sie enthält viele Smart Editor-Funktionen, z. B. neue Projektvorlagen und die Möglichkeit, sich die Compose-UI und Animationen sofort in der Vorschau anzusehen.

Android Studio herunterladen

Folgen Sie dieser Anleitung, um ein neues Compose-App-Projekt zu erstellen, Compose für ein vorhandenes App-Projekt einzurichten oder eine in Compose geschriebene Beispiel-App zu importieren.

Neue App mit Unterstützung für Compose erstellen

Wenn Sie ein neues Projekt starten möchten, das standardmäßig Unterstützung für Compose bietet, können Sie in Android Studio verschiedene Projektvorlagen verwenden. So erstellen Sie ein neues Projekt, in dem Compose richtig eingerichtet ist:

  1. Wenn Sie sich im Fenster Welcome to Android Studio befinden, klicken Sie auf Start a new Android Studio project. Wenn Sie bereits ein Android Studio-Projekt geöffnet haben, wählen Sie in der Menüleiste File > New > New Project aus.
  2. Wählen Sie im Fenster Select a Project Template (Projektvorlage auswählen) die Option Empty Activity (Leere Aktivität) aus und klicken Sie auf Next (Weiter).
  3. Führen Sie im Fenster Projekt konfigurieren die folgenden Schritte aus:
    1. Legen Sie Name, Paketname und Speicherort wie gewohnt fest. Beachten Sie, dass im Drop-down-Menü Sprache nur Kotlin verfügbar ist, da Jetpack Compose nur mit in Kotlin geschriebenen Klassen funktioniert.
    2. Wählen Sie im Drop-down-Menü Mindest-API-Level das API-Level 21 oder höher aus.
  4. Klicken Sie auf Fertig.

Jetzt können Sie mit der Entwicklung einer App mit Jetpack Compose beginnen. Diese Anleitung hilft Ihnen beim Einstieg und zeigt Ihnen, was Sie mit dem Toolkit alles machen können.

Compose für eine vorhandene App einrichten

Konfigurieren Sie zuerst den Compose-Compiler mit dem Gradle-Plug-in für den Compose-Compiler.

Fügen Sie dann der Datei build.gradle Ihrer App die folgende Definition hinzu:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Wenn Sie das Flag compose im Android-Block BuildFeatures auf true setzen, wird die Compose-Funktionalität in Android Studio aktiviert.

Fügen Sie schließlich die Compose-BOM und die Teilmenge der Compose-Bibliotheksabhängigkeiten, die Sie benötigen, aus dem folgenden Block zu Ihren Abhängigkeiten hinzu:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2025.05.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.10.1'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2025.05.00")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.10.1")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Jetpack Compose-Beispiel-Apps ausprobieren

Die schnellste Möglichkeit, die Funktionen von Jetpack Compose auszuprobieren, sind die Jetpack Compose-Beispiel-Apps auf GitHub. So importieren Sie ein Beispiel-App-Projekt aus Android Studio:

  1. Wenn Sie sich im Fenster Welcome to Android Studio befinden, wählen Sie Import an Android code sample aus. Wenn Sie bereits ein Android Studio-Projekt geöffnet haben, wählen Sie in der Menüleiste File > New > Import Sample aus.
  2. Geben Sie in der Suchleiste oben im Assistenten Browse Samples (Beispiele durchsuchen) „compose“ ein.
  3. Wählen Sie in den Suchergebnissen eine der Jetpack Compose-Beispiel-Apps aus und klicken Sie auf Weiter.
  4. Ändern Sie entweder den Anwendungsnamen und den Projektpfad oder behalten Sie die Standardwerte bei.
  5. Klicken Sie auf Fertig.

Android Studio lädt die Beispiel-App in den von Ihnen angegebenen Pfad herunter und öffnet das Projekt. Anschließend können Sie MainActivity.kt in den einzelnen Beispielen untersuchen, um Jetpack Compose-APIs wie Crossfade-Animation, benutzerdefinierte Komponenten, Typografie und die Anzeige von hellen und dunklen Farben in der In-IDE-Vorschau zu sehen.

Informationen zur Verwendung von Jetpack Compose für Wear OS finden Sie unter Jetpack Compose für Wear OS einrichten.