Hızlı başlangıç

Compose ile geliştirmede en iyi deneyim için Android Studio'yu indirip yükleyin. Yeni proje şablonları ve Compose kullanıcı arayüzünüzü ve animasyonlarınızı anında önizleme gibi birçok akıllı düzenleyici özelliği içerir.

Android Studio'yu indirin

Yeni bir Compose uygulama projesi oluşturmak, mevcut bir uygulama projesi için Compose'u ayarlamak veya Compose'da yazılmış örnek bir uygulamayı içe aktarmak için aşağıdaki talimatları uygulayın.

Compose'u destekleyen yeni bir uygulama oluşturma

Varsayılan olarak Compose desteği içeren yeni bir projeye başlamak istiyorsanız Android Studio, başlamanıza yardımcı olacak çeşitli proje şablonları içerir. Compose ayarını doğru şekilde yapan yeni bir proje oluşturmak için aşağıdaki adımları uygulayın:

  1. Android Studio'ya hoş geldiniz penceresindeyseniz Yeni bir Android Studio projesi başlat'ı tıklayın. Zaten açık bir Android Studio projeniz varsa menü çubuğundan Dosya > Yeni > Yeni Proje'yi seçin.
  2. Proje Şablonu Seçin penceresinde Etkinlik Boş'u seçin ve İleri'yi tıklayın.
  3. Projenizi yapılandırın penceresinde aşağıdakileri yapın:
    1. Ad, Paket adı ve Konumu kaydet seçeneklerini normalde yaptığınız gibi ayarlayın. Jetpack Compose yalnızca Kotlin'de yazılmış sınıflarla çalıştığından Dil açılır menüsünde kullanılabilen tek seçenek Kotlin'dir.
    2. Minimum API düzeyi açılır menüsünden API düzeyi 21 veya üstünü seçin.
  4. Son'u tıklayın.

Artık Jetpack Compose'u kullanarak uygulama geliştirmeye hazırsınız. Başlamanıza ve araç setiyle neler yapabileceğinizi öğrenmenize yardımcı olması için Jetpack Compose eğiticisini deneyin.

Mevcut bir uygulama için Compose'u kurma

Compose'u kullanmaya başlamak için önce projenize bazı derleme yapılandırmaları eklemeniz gerekir. Uygulamanızın build.gradle dosyasına aşağıdaki tanımı ekleyin:

Modern

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

Dikkat edilmesi gereken bazı noktalar:

  • Android BuildFeatures blokunun içinde compose işaretini true olarak ayarlamak, Oluşturma işlevini etkinleştirir.
  • ComposeOptions bloğunda tanımlanan Kotlin Derleyici uzantısı sürümü oluşturma işlemi, Kotlin sürümü oluşturmaya bağlıdır. Uyumluluk haritasına göz atmayı ve projenizin Kotlin sürümüyle eşleşen kitaplık sürümünü seçtiğinizden emin olun.

Ayrıca, Compose BOM'yi ve ihtiyacınız olan Compose kitaplığı bağımlılıklarının alt kümesini aşağıdaki bloktan ekleyin:

Modern

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 örnek uygulamalarını deneyin

Jetpack Compose'un özelliklerini denemenin en hızlı yolu GitHub'da barındırılan Jetpack Compose örnek uygulamaları kullanmayı denemektir. Bir örnek uygulama projesini Android Studio'dan içe aktarmak için aşağıdaki adımları uygulayın:

  1. Android Studio'ya hoş geldiniz penceresindeyseniz Android kod örneğini içe aktar'ı seçin. Zaten açık bir Android Studio projeniz varsa menü çubuğundan Dosya > Yeni > Örneği İçe Aktar'ı seçin.
  2. Browse Samples (Örneklere Göz At) sihirbazının üst tarafındaki arama çubuğuna "compose" (oluştur) yazın.
  3. Arama sonuçlarındaki Jetpack Compose örnek uygulamalarından birini seçin ve Sonraki'yi tıklayın.
  4. Uygulama adı ve Proje konumu'nu değiştirin veya varsayılan değerleri koruyun.
  5. Son'u tıklayın.

Android Studio, örnek uygulamayı belirttiğiniz yola indirir ve projeyi açar. Ardından, çapraz geçiş animasyonu, özel bileşenler, tipografi kullanımı, IDE içi önizlemede açık ve koyu renkler görüntüleme gibi Jetpack Compose API'lerini görmek için örneklerin her birinde MainActivity.kt parametresini inceleyebilirsiniz.

Wear OS'te Jetpack Compose'u kullanmak için Wear OS'te Jetpack Compose'u ayarlama başlıklı makaleyi inceleyin.