तुरंत शुरू करें

Compose का इस्तेमाल करके ऐप्लिकेशन बनाने का बेहतरीन अनुभव पाने के लिए, Android Studio डाउनलोड और इंस्टॉल करें. इसमें कई स्मार्ट एडिटर की सुविधाएं शामिल हैं. जैसे, नए प्रोजेक्ट टेंप्लेट और Compose के यूज़र इंटरफ़ेस (यूआई) और ऐनिमेशन की झलक तुरंत देखने की सुविधा.

Android Studio डाउनलोड करना

Compose में नया ऐप्लिकेशन प्रोजेक्ट बनाने, किसी मौजूदा ऐप्लिकेशन प्रोजेक्ट के लिए Compose सेट अप करने या Compose में लिखे गए सैंपल ऐप्लिकेशन को इंपोर्ट करने के लिए, इन निर्देशों का पालन करें.

Compose की सुविधा के साथ नया ऐप्लिकेशन बनाना

अगर आपको कोई नया प्रोजेक्ट शुरू करना है, जिसमें डिफ़ॉल्ट रूप से Compose की सुविधा शामिल हो, तो Android Studio में कई प्रोजेक्ट टेंप्लेट मौजूद हैं. इनकी मदद से, आपको प्रोजेक्ट बनाने में आसानी होगी. Compose को सही तरीके से सेट अप करके नया प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:

1. अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android Studio में नया प्रोजेक्ट शुरू करें पर क्लिक करें. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला है, तो मेन्यू बार से फ़ाइल > नया > नया प्रोजेक्ट चुनें.
2. कोई प्रोजेक्ट टेंप्लेट चुनें विंडो में, खाली गतिविधि चुनें और आगे बढ़ें पर क्लिक करें.
3. अपना प्रोजेक्ट कॉन्फ़िगर करें विंडो में, ये काम करें:
   1. नाम, पैकेज का नाम, और सेव करने की जगह को सामान्य तौर पर सेट करें. ध्यान दें कि भाषा ड्रॉपडाउन मेन्यू में, Kotlin ही एकमात्र उपलब्ध विकल्प है. इसकी वजह यह है कि Jetpack Compose सिर्फ़ Kotlin में लिखी गई क्लास के साथ काम करता है.
   2. कम से कम एपीआई लेवल ड्रॉपडाउन मेन्यू में, एपीआई लेवल 21 या उसके बाद का लेवल चुनें.
4. पूरा करें पर क्लिक करें.

अब आप Jetpack Compose का इस्तेमाल करके, ऐप्लिकेशन डेवलप करने के लिए तैयार हैं. टूलकिट का इस्तेमाल शुरू करने और यह जानने के लिए कि इसकी मदद से क्या-क्या किया जा सकता है, Jetpack Compose ट्यूटोरियल देखें.

किसी मौजूदा ऐप्लिकेशन के लिए Compose सेट अप करना

सबसे पहले, Compose compiler Gradle प्लगिन का इस्तेमाल करके Compose compiler को कॉन्फ़िगर करें.

इसके बाद, अपने ऐप्लिकेशन की build.gradle फ़ाइल में यह डेफ़िनिशन जोड़ें:

android {
    buildFeatures {
        compose true
    }
}

android {
    buildFeatures {
        compose = true
    }
}

Android BuildFeatures ब्लॉक में compose फ़्लैग को true पर सेट करने से, Android Studio में Compose फ़ंक्शन चालू हो जाता है.

आखिर में, Compose BOM और Compose लाइब्रेरी डिपेंडेंसी का सबसेट जोड़ें. इसके लिए, नीचे दिए गए ब्लॉक से अपनी डिपेंडेंसी चुनें:

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'

}

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")

}

Jetpack Compose के सैंपल ऐप्लिकेशन आज़माना

GitHub पर होस्ट किए गए Jetpack Compose के सैंपल ऐप्लिकेशन आज़माकर, Jetpack Compose की सुविधाओं को आज़माने का सबसे तेज़ तरीका है. Android Studio से किसी सैंपल ऐप्लिकेशन प्रोजेक्ट को इंपोर्ट करने के लिए, यह तरीका अपनाएं:

1. अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android कोड का सैंपल इंपोर्ट करें को चुनें. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला है, तो मेन्यू बार से फ़ाइल > नया > सैंपल इंपोर्ट करें चुनें.
2. सैंपल ब्राउज़ करें विज़र्ड के सबसे ऊपर मौजूद खोज बार में, "लिखें" टाइप करें.
3. खोज के नतीजों में से, Jetpack Compose का कोई सैंपल ऐप्लिकेशन चुनें और आगे बढ़ें पर क्लिक करें.
4. ऐप्लिकेशन का नाम और प्रोजेक्ट की जगह बदलें या डिफ़ॉल्ट वैल्यू रखें.
5. पूरा करें पर क्लिक करें.

Android Studio, सैंपल ऐप्लिकेशन को आपके बताए गए पाथ पर डाउनलोड करता है और प्रोजेक्ट खोलता है. इसके बाद, हर उदाहरण में MainActivity.kt की जांच करके, IDE में झलक देखने के दौरान, क्रॉसफ़ेड ऐनिमेशन, कस्टम कॉम्पोनेंट, टाइपोग्राफ़ी का इस्तेमाल, और हल्के और गहरे रंगों को दिखाने जैसे Jetpack Compose API देखे जा सकते हैं.

Wear OS के लिए Jetpack Compose का इस्तेमाल करने के लिए, Wear OS पर Jetpack Compose सेट अप करना लेख पढ़ें.