Compose का बेहतर अनुभव पाने के लिए, Android Studio डाउनलोड और इंस्टॉल करें. इसमें स्मार्ट एडिटर की कई सुविधाएं शामिल हैं. जैसे, नए प्रोजेक्ट टेंप्लेट और Compose UI और ऐनिमेशन की तुरंत झलक देखने की सुविधा.
Compose का इस्तेमाल करके नया ऐप्लिकेशन प्रोजेक्ट बनाने, किसी मौजूदा ऐप्लिकेशन प्रोजेक्ट के लिए Compose सेट अप करने या Compose में लिखे गए किसी सैंपल ऐप्लिकेशन को इंपोर्ट करने के लिए, इन निर्देशों का पालन करें.
Compose के साथ काम करने वाला नया ऐप्लिकेशन बनाना
अगर आपको कोई ऐसा नया प्रोजेक्ट शुरू करना है जिसमें Compose की सुविधा डिफ़ॉल्ट रूप से शामिल हो, तो Android Studio में कई प्रोजेक्ट टेंप्लेट शामिल होते हैं. इनसे आपको शुरुआत करने में मदद मिलती है. Compose को सही तरीके से सेट अप करने वाला नया प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो नया Android Studio प्रोजेक्ट शुरू करें पर क्लिक करें. अगर आपने पहले से ही कोई Android Studio प्रोजेक्ट खोला हुआ है, तो मेन्यू बार में जाकर File > New > New Project चुनें.
- प्रोजेक्ट का कोई टेंप्लेट चुनें विंडो में, खाली गतिविधि चुनें और आगे बढ़ें पर क्लिक करें.
- अपने प्रोजेक्ट को कॉन्फ़िगर करें विंडो में जाकर, यह तरीका अपनाएं:
- नाम, पैकेज का नाम, और सेव करने की जगह को आम तौर पर सेट करें. ध्यान दें कि भाषा ड्रॉपडाउन मेन्यू में, Kotlin ही उपलब्ध विकल्प है. ऐसा इसलिए, क्योंकि Jetpack Compose सिर्फ़ Kotlin में लिखी गई क्लास के साथ काम करता है.
- कम से कम एपीआई लेवल वाले ड्रॉपडाउन मेन्यू में, एपीआई लेवल 21 या उसके बाद का लेवल चुनें.
- पूरा करें पर क्लिक करें.
अब Jetpack Compose का इस्तेमाल करके, ऐप्लिकेशन डेवलप किया जा सकता है. टूलकिट का इस्तेमाल शुरू करने और यह जानने के लिए कि इससे क्या-क्या किया जा सकता है, Jetpack Compose ट्यूटोरियल आज़माएं.
किसी मौजूदा ऐप्लिकेशन के लिए Compose सेट अप करना
सबसे पहले, Compose कंपाइलर Gradle प्लगिन का इस्तेमाल करके, Compose कंपाइलर को कॉन्फ़िगर करें.
इसके बाद, अपने ऐप्लिकेशन की 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:2025.08.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.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.10.1'
// 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:2025.08.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.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.10.1")
// 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 के सैंपल ऐप्लिकेशन आज़माएं
Jetpack Compose की सुविधाओं को आज़माने का सबसे तेज़ तरीका, GitHub पर होस्ट किए गए Jetpack Compose के सैंपल ऐप्लिकेशन आज़माना है. Android Studio से किसी सैंपल ऐप्लिकेशन प्रोजेक्ट को इंपोर्ट करने के लिए, यह तरीका अपनाएं:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android कोड का सैंपल इंपोर्ट करें को चुनें. अगर आपने पहले से ही कोई Android Studio प्रोजेक्ट खोला हुआ है, तो मेन्यू बार से File > New > Import Sample को चुनें.
- सैंपल ब्राउज़ करें विज़र्ड में सबसे ऊपर मौजूद खोज बार में, "compose" लिखें.
- खोज के नतीजों से, Jetpack Compose का कोई सैंपल ऐप्लिकेशन चुनें और आगे बढ़ें पर क्लिक करें.
- ऐप्लिकेशन का नाम और प्रोजेक्ट की जगह बदलें या डिफ़ॉल्ट वैल्यू का इस्तेमाल करें.
- पूरा करें पर क्लिक करें.
Android Studio, सैंपल ऐप्लिकेशन को आपके बताए गए पाथ पर डाउनलोड करता है और प्रोजेक्ट खोलता है. इसके बाद, हर उदाहरण में MainActivity.kt
की जांच करके, Jetpack Compose API देखे जा सकते हैं. जैसे, क्रॉसफ़ेड ऐनिमेशन, कस्टम कॉम्पोनेंट, टाइपोग्राफ़ी का इस्तेमाल करना, और IDE में झलक देखते समय हल्के और गहरे रंग दिखाना.
Wear OS के लिए Jetpack Compose का इस्तेमाल करने के लिए, Wear OS पर Jetpack Compose सेट अप करना लेख पढ़ें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose की मदद से नेविगेट करना
- 'लिखें' लेआउट की जांच करना
- फ़ोकस पर प्रतिक्रिया देना