Guida rapida

Per un'esperienza ottimale di sviluppo con Compose, scarica e installa Android Studio. Include molte funzionalità di editor intelligenti, come nuovi modelli di progetti e la possibilità di visualizzare immediatamente l'anteprima dell'interfaccia utente e delle animazioni di Compose.

Scaricare Android Studio

Segui queste istruzioni per creare un nuovo progetto di app Compose, configurare Compose per un progetto di app esistente o importare un'app di esempio scritta in Compose.

Creare una nuova app con il supporto di Scrivi

Se vuoi avviare un nuovo progetto che includa il supporto di Compose per impostazione predefinita, Android Studio include vari modelli di progetto per aiutarti a iniziare. Per creare un nuovo progetto con Compose configurato correttamente, procedi nel seguente modo:

  1. Se ti trovi nella finestra Ti diamo il benvenuto in Android Studio, fai clic su Avvia un nuovo progetto Android Studio. Se hai già aperto un progetto Android Studio, selezionate File > Nuovo > Nuovo progetto dalla barra dei menu.
  2. Nella finestra Seleziona un modello di progetto, seleziona Attività vuota e fai clic su Avanti.
  3. Nella finestra Configura il progetto, procedi nel seguente modo:
    1. Imposta Nome, Nome pacchetto e Posizione di salvataggio come faresti normalmente. Tieni presente che, nel menu a discesa Lingua, Kotlin è l'unica opzione disponibile perché Jetpack Compose funziona solo con le classi scritte in Kotlin.
    2. Nel menu a discesa Livello API minimo, seleziona il livello API 21 o superiore.
  4. Fai clic su Fine.

Ora puoi iniziare a sviluppare un'app utilizzando Jetpack Compose. Per iniziare e scoprire cosa puoi fare con il toolkit, prova il tutorial su Jetpack Compose.

Configurare Scrivi per un'app esistente

Innanzitutto, configura il compilatore Compose utilizzando il plug-in Gradle del compilatore Compose.

Aggiungi poi la seguente definizione al file build.gradle dell'app:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

L'impostazione del flag compose su true all'interno del blocco Android BuildFeatures attiva la funzionalità Compose in Android Studio.

Infine, aggiungi la distinta base di Compose e il sottoinsieme di dipendenze della libreria Compose di cui hai bisogno alle tue dipendenze dal seguente blocco:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    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.9.2'
    // 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:2024.10.01")
    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.9.2")
    // 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")

}

Provare le app di esempio di Jetpack Compose

Il modo più rapido per sperimentare le funzionalità di Jetpack Compose è provare le app di esempio di Jetpack Compose ospitate su GitHub. Per importare un progetto di app di esempio da Android Studio, procedi nel seguente modo:

  1. Se sei nella finestra Ti diamo il benvenuto in Android Studio, seleziona Importa un esempio di codice Android. Se hai già aperto un progetto Android Studio, seleziona File > Nuovo > Importa Sample dalla barra dei menu.
  2. Nella barra di ricerca nella parte superiore della procedura guidata Sfoglia Samples, digita "componi".
  3. Seleziona una delle app di esempio Jetpack Compose dai risultati di ricerca e fai clic su Avanti.
  4. Modifica Nome applicazione e Posizione progetto o mantieni i valori predefiniti.
  5. Fai clic su Fine.

Android Studio scarica l'app di esempio nel percorso specificato e apre il progetto. Puoi quindi ispezionare MainActivity.kt in ciascuno degli esempi per visualizzare le API Jetpack Compose, come l'animazione di transizione graduale, i componenti personalizzati, l'utilizzo della tipografia e la visualizzazione di colori chiari e scuri nell'anteprima nell'IDE.

Per utilizzare Jetpack Compose per Wear OS, consulta Configurare Jetpack Compose su Wear OS.