Compose की सुविधा का इस्तेमाल करके बेहतर अनुभव पाने के लिए, Android Studio को डाउनलोड और इंस्टॉल करें. इसमें कई स्मार्ट एडिटर की सुविधाएं शामिल हैं. जैसे, नए प्रोजेक्ट टेंप्लेट और Compose के यूज़र इंटरफ़ेस (यूआई) और ऐनिमेशन की झलक तुरंत देखने की सुविधा.
Compose में नया ऐप्लिकेशन प्रोजेक्ट बनाने, किसी मौजूदा ऐप्लिकेशन प्रोजेक्ट के लिए Compose सेट अप करने या Compose में लिखे गए सैंपल ऐप्लिकेशन को इंपोर्ट करने के लिए, इन निर्देशों का पालन करें.
Compose की सुविधा के साथ नया ऐप्लिकेशन बनाना
अगर आपको एक ऐसा नया प्रोजेक्ट शुरू करना है जिसमें 'लिखें' सुविधा डिफ़ॉल्ट रूप से शामिल हो, तो Android Studio में कई प्रोजेक्ट टेंप्लेट शामिल होते हैं. इससे आपको शुरुआत करने में मदद मिलती है. Compose को सही तरीके से सेट अप करके नया प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android Studio में नया प्रोजेक्ट शुरू करें पर क्लिक करें. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला है, तो मेन्यू बार से फ़ाइल > नया > नया प्रोजेक्ट चुनें.
- प्रोजेक्ट टेंप्लेट चुनें विंडो में, खाली गतिविधि चुनें और आगे बढ़ें पर क्लिक करें.
- अपना प्रोजेक्ट कॉन्फ़िगर करें विंडो में, ये काम करें:
- नाम, पैकेज का नाम, और सेव करने की जगह को सामान्य तौर पर सेट करें. ध्यान दें कि भाषा ड्रॉपडाउन मेन्यू में, Kotlin ही एकमात्र उपलब्ध विकल्प है. ऐसा इसलिए है, क्योंकि Jetpack Compose सिर्फ़ Kotlin में लिखी गई क्लास के साथ काम करता है.
- कम से कम एपीआई लेवल ड्रॉपडाउन मेन्यू में, एपीआई लेवल 21 या उसके बाद का लेवल चुनें.
- पूरा करें पर क्लिक करें.
अब आप Jetpack Compose का इस्तेमाल करके, ऐप्लिकेशन डेवलप करने के लिए तैयार हैं. शुरुआत करने और टूलकिट की मदद से क्या-क्या किया जा सकता है, यह जानने के लिए Jetpack लिखें का ट्यूटोरियल देखें.
किसी मौजूदा ऐप्लिकेशन के लिए Compose सेट अप करना
सबसे पहले, Compose compiler Gradle प्लगिन का इस्तेमाल करके Compose compiler को कॉन्फ़िगर करें.
इसके बाद, अपने ऐप्लिकेशन की build.gradle
फ़ाइल में यह डेफ़िनिशन जोड़ें:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Android BuildFeatures
ब्लॉक में compose
फ़्लैग को true
पर सेट करने से, Android Studio में Compose फ़ंक्शन चालू हो जाता है.
आखिर में, Compose BOM और Compose लाइब्रेरी डिपेंडेंसी का सबसेट जोड़ें. इसके लिए, नीचे दिए गए ब्लॉक से अपनी डिपेंडेंसी चुनें:
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
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.09.03")
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 से किसी सैंपल ऐप्लिकेशन प्रोजेक्ट को इंपोर्ट करने के लिए, यह तरीका अपनाएं:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android कोड का सैंपल इंपोर्ट करें को चुनें. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला है, तो मेन्यू बार से फ़ाइल > नया > सैंपल इंपोर्ट करें चुनें.
- सैंपल ब्राउज़ करें विज़र्ड के सबसे ऊपर मौजूद खोज बार में, "लिखें" टाइप करें.
- खोज के नतीजों में से, Jetpack Compose का कोई सैंपल ऐप्लिकेशन चुनें और आगे बढ़ें पर क्लिक करें.
- ऐप्लिकेशन का नाम और प्रोजेक्ट की जगह बदलें या डिफ़ॉल्ट वैल्यू बनाए रखें.
- पूरा करें पर क्लिक करें.
Android Studio, सैंपल ऐप्लिकेशन को आपके बताए गए पाथ पर डाउनलोड करता है और प्रोजेक्ट खोलता है. इसके बाद, हर उदाहरण में MainActivity.kt
की जांच करके, IDE में झलक देखने के दौरान, क्रॉसफ़ेड ऐनिमेशन, कस्टम कॉम्पोनेंट, टाइपोग्राफ़ी का इस्तेमाल, और हल्के और गहरे रंगों को दिखाने जैसे Jetpack Compose API देखे जा सकते हैं.
Wear OS के लिए Jetpack Compose का इस्तेमाल करने के लिए, Wear OS पर Jetpack Compose सेट अप करना लेख पढ़ें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose की मदद से नेविगेट करना
- लिखने के लिए इस्तेमाल होने वाले लेआउट की जांच करना
- फ़ोकस करने के लिए प्रतिक्रिया देना