Schnelleinstieg

Damit Sie mit Compose optimal entwickeln können, laden Sie Android Studio herunter und installieren Sie es. Sie enthält viele Funktionen für intelligente Editoren wie neue Projektvorlagen und die Möglichkeit, die UI und Animationen von „Compose“ sofort als Vorschau anzusehen.

Android Studio herunterladen

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

Neue Anwendung mit Unterstützung für Compose erstellen

Wenn Sie ein neues Projekt starten möchten, das standardmäßig die Funktion „Compose“ unterstützt, bietet Android Studio verschiedene Projektvorlagen für den Einstieg. So erstellen Sie ein neues Projekt, bei dem die Funktion „Compose“ korrekt eingerichtet ist:

  1. Wenn das Fenster Willkommen bei Android Studio angezeigt wird, klicken Sie auf Neues Android Studio-Projekt starten. 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 Projektvorlage auswählen die Option Leere Aktivität aus und klicken Sie auf Weiter.
  3. Führen Sie im Fenster Projekt konfigurieren die folgenden Schritte aus:
    1. Legen Sie Name, Paketname und Standort speichern wie gewohnt fest. Im Drop-down-Menü Sprache ist Kotlin die einzige verfügbare Option, da Jetpack Compose nur mit Klassen funktioniert, die in Kotlin geschrieben wurden.
    2. Wählen Sie im Drop-down-Menü Mindest-API-Level die API-Ebene 21 oder höher aus.
  4. Klicken Sie auf Fertig.

Jetzt können Sie mit Jetpack Compose eine Anwendung entwickeln. Für einen leichteren Einstieg und mehr über die Möglichkeiten des Toolkits empfehlen wir die Jetpack Compose-Anleitung.

„Compose“ für eine vorhandene App einrichten

Damit Sie Compose verwenden können, müssen Sie Ihrem Projekt zuerst einige Build-Konfigurationen hinzufügen. Fügen Sie der Datei build.gradle Ihrer App die folgende Definition hinzu:

Groovig

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

Hinweise:

  • Wenn Sie das Flag compose im Android-Block BuildFeatures auf true setzen, wird die Funktion zum Schreiben aktiviert.
  • Die Versionsverwaltung der Kotlin Compiler-Erweiterung, die im ComposeOptions-Block definiert ist, ist an die Kotlin-Versionsverwaltung gebunden. Rufen Sie die Kompatibilitätszuordnung auf und wählen Sie eine Version der Bibliothek aus, die der Kotlin-Version Ihres Projekts entspricht.

Fügen Sie Ihren Abhängigkeiten außerdem die Compose-BOM und die Teilmenge der benötigten Compose-Bibliotheksabhängigkeiten aus dem folgenden Block hinzu:

Groovig

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.04.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:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.8.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // 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:2024.04.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:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.8.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // 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

Am schnellsten können Sie die Funktionen von Jetpack Compose mit den auf GitHub gehosteten Jetpack Compose-Beispielanwendungen testen. So importieren Sie ein Beispiel-App-Projekt aus Android Studio:

  1. Wenn Sie sich im Fenster Willkommen bei Android Studio befinden, wählen Sie Android-Codebeispiel importieren aus. Wenn Sie bereits ein Android Studio-Projekt geöffnet haben, wählen Sie in der Menüleiste File > New > Import Sample (Datei > Neu > Beispiel importieren) 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-Beispielanwendungen aus und klicken Sie auf Weiter.
  4. Ändern Sie entweder den Anwendungsnamen und den Projektspeicherort oder behalten Sie die Standardwerte bei.
  5. Klicken Sie auf Fertig.

Android Studio lädt die Beispiel-App in den angegebenen Pfad herunter und öffnet das Projekt. Anschließend können Sie MainActivity.kt in jedem der Beispiele prüfen, um Jetpack Compose APIs wie Überblenden-Animation, benutzerdefinierte Komponenten, Typografie und die Anzeige von hellen und dunklen Farben in der IDE-Vorschau zu sehen.

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