تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
للحصول على أفضل تجربة تطوير باستخدام Compose، نزِّل استوديو Android وثبِّته. يتضمّن هذا الإصدار العديد من ميزات المحرّر الذكي، مثل نماذج المشاريع الجديدة وإمكانية معاينة واجهة مستخدم Compose والرسوم المتحركة على الفور.
اتّبِع التعليمات التالية لإنشاء مشروع تطبيق جديد باستخدام Compose أو إعداد Compose لمشروع تطبيق حالي أو استيراد نموذج تطبيق مكتوب باستخدام Compose.
إنشاء تطبيق جديد متوافق مع Compose
إذا أردت بدء مشروع جديد يتضمّن دعم Compose تلقائيًا، يتضمّن "استوديو Android" نماذج مشاريع متنوعة لمساعدتك في البدء. لإنشاء مشروع جديد تم إعداد Compose فيه بشكل صحيح، اتّبِع الخطوات التالية:
إذا كنت في نافذة مرحبًا بك في "استوديو Android"، انقر على بدء مشروع جديد في "استوديو Android". إذا كان لديك مشروع مفتوح في "استوديو Android"،
انقر على ملف (File) > جديد (New) > مشروع جديد (New Project) من شريط القوائم.
في نافذة اختيار نموذج مشروع، اختَر نشاط فارغ وانقر على التالي.
في نافذة ضبط مشروعك، اتّبِع الخطوات التالية:
اضبط الاسم واسم الحزمة وموقع الحفظ كما تفعل عادةً. يُرجى العِلم أنّه في القائمة المنسدلة اللغة، Kotlin هو الخيار الوحيد المتاح لأنّ Jetpack Compose لا يعمل إلا مع الفئات المكتوبة بلغة Kotlin.
في قائمة القائمة المنسدلة "الحد الأدنى لمستوى واجهة برمجة التطبيقات"، اختَر المستوى 21 من واجهة برمجة التطبيقات أو مستوى أعلى.
انقر على إنهاء.
أنت الآن جاهز لبدء تطوير تطبيق باستخدام Jetpack Compose. لمساعدتك في البدء والتعرّف على ما يمكنك فعله باستخدام مجموعة الأدوات، جرِّب البرنامج التعليمي حول Jetpack Compose.
بعد ذلك، أضِف التعريف التالي إلى ملف build.gradle في تطبيقك:
Groovy
android{buildFeatures{composetrue}}
Kotlin
android{buildFeatures{compose=true}}
يؤدي ضبط العلامة compose على true داخل حزمة BuildFeatures في Android إلى تفعيل وظائف Compose في "استوديو Android".
أخيرًا، أضِف حزمة إدارة مواد العرض (BOM) الخاصة بـ Compose ومجموعة فرعية من تبعيات مكتبة Compose التي تحتاج إليها إلى التبعيات من الحزمة التالية:
Groovy
dependencies{defcomposeBom=platform('androidx.compose:compose-bom:2025.08.00')implementationcomposeBomandroidTestImplementationcomposeBom// Choose one of the following:// Material Design 3implementation'androidx.compose.material3:material3'// or Material Design 2implementation'androidx.compose.material:material'// or skip Material Design and build directly on top of foundational componentsimplementation'androidx.compose.foundation:foundation'// or only import the main APIs for the underlying toolkit systems,// such as input and measurement/layoutimplementation'androidx.compose.ui:ui'// Android Studio Preview supportimplementation'androidx.compose.ui:ui-tooling-preview'debugImplementation'androidx.compose.ui:ui-tooling'// UI TestsandroidTestImplementation'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 iconsimplementation'androidx.compose.material:material-icons-extended'// Optional - Add window size utilsimplementation'androidx.compose.material3.adaptive:adaptive'// Optional - Integration with activitiesimplementation'androidx.activity:activity-compose:1.10.1'// Optional - Integration with ViewModelsimplementation'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'// Optional - Integration with LiveDataimplementation'androidx.compose.runtime:runtime-livedata'// Optional - Integration with RxJavaimplementation'androidx.compose.runtime:runtime-rxjava2'}
Kotlin
dependencies{valcomposeBom=platform("androidx.compose:compose-bom:2025.08.00")implementation(composeBom)androidTestImplementation(composeBom)// Choose one of the following:// Material Design 3implementation("androidx.compose.material3:material3")// or Material Design 2implementation("androidx.compose.material:material")// or skip Material Design and build directly on top of foundational componentsimplementation("androidx.compose.foundation:foundation")// or only import the main APIs for the underlying toolkit systems,// such as input and measurement/layoutimplementation("androidx.compose.ui:ui")// Android Studio Preview supportimplementation("androidx.compose.ui:ui-tooling-preview")debugImplementation("androidx.compose.ui:ui-tooling")// UI TestsandroidTestImplementation("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 iconsimplementation("androidx.compose.material:material-icons-extended")// Optional - Add window size utilsimplementation("androidx.compose.material3.adaptive:adaptive")// Optional - Integration with activitiesimplementation("androidx.activity:activity-compose:1.10.1")// Optional - Integration with ViewModelsimplementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")// Optional - Integration with LiveDataimplementation("androidx.compose.runtime:runtime-livedata")// Optional - Integration with RxJavaimplementation("androidx.compose.runtime:runtime-rxjava2")}
تجربة نماذج تطبيقات Jetpack Compose
أسرع طريقة لتجربة إمكانات Jetpack Compose هي من خلال
تجربة تطبيقات Jetpack Compose النموذجية المستضافة على GitHub. لاستيراد مشروع تطبيق نموذجي من "استوديو Android"، اتّبِع الخطوات التالية:
إذا كنت في نافذة مرحبًا بك في "استوديو Android"، اختَر استيراد عيّنة رمز Android. إذا كان لديك مشروع مفتوح في "استوديو Android"،
انقر على ملف > جديد > استيراد نموذج من شريط القوائم.
في شريط البحث بالقرب من أعلى معالج تصفّح النماذج، اكتب "إنشاء".
اختَر أحد تطبيقات Jetpack Compose النموذجية من نتائج البحث وانقر على التالي.
يمكنك تغيير اسم التطبيق وموقع المشروع أو الاحتفاظ بالقيم التلقائية.
انقر على إنهاء.
ينزّل Android Studio التطبيق النموذجي إلى المسار الذي حدّدته ويفتح المشروع. يمكنك بعد ذلك فحص MainActivity.kt في كل مثال من الأمثلة للاطّلاع على واجهات برمجة تطبيقات Jetpack Compose، مثل الرسوم المتحركة للتلاشي التدريجي والمكوّنات المخصّصة واستخدام أسلوب الخط وعرض الألوان الفاتحة والداكنة في المعاينة داخل بيئة التطوير المتكاملة.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Quick start\n\nFor the best experience developing with Compose, download and install [Android\nStudio](/studio). It includes many [smart editor features](/develop/ui/compose/tooling), such as new project\ntemplates and the ability to immediately preview your Compose UI and animations.\n\n[Get Android Studio](/studio)\n\nFollow these instructions to create a new Compose app project, set up\nCompose for an existing app project, or import a sample app written in Compose.\n\nCreate a new app with support for Compose\n-----------------------------------------\n\nIf you want to start a new project that includes support for Compose by default,\nAndroid Studio includes various project templates to help you get started. To\ncreate a new project that has Compose setup correctly, proceed as follows:\n\n1. If you're in the **Welcome to Android Studio** window, click **Start a new\n Android Studio project** . If you already have an Android Studio project open , select **File \\\u003e New \\\u003e New Project** from the menu bar.\n2. In the **Select a Project Template** window, select **Empty\n Activity** and click **Next**.\n3. In the **Configure your project** window, do the following:\n 1. Set the **Name, Package name** , and **Save location** as you normally would. Note that, in the **Language** dropdown menu, **Kotlin** is the only available option because Jetpack Compose works only with classes written in Kotlin.\n 2. In the **Minimum API level dropdown** menu, select API level 21 or higher.\n4. Click **Finish**.\n\nNow you're ready to start developing an app using Jetpack Compose. To help you\nget started and learn about what you can do with the toolkit, try the [Jetpack\nCompose tutorial](/develop/ui/compose/tutorial).\n\nSet up Compose for an existing app\n----------------------------------\n\nFirst, configure the Compose compiler using the [Compose\nCompiler Gradle plugin](/develop/ui/compose/compiler).\n\nThen, add the following definition to your app's `build.gradle` file: \n\n### Groovy\n\n android {\n buildFeatures {\n compose true\n }\n }\n\n### Kotlin\n\n android {\n buildFeatures {\n compose = true\n }\n }\n\nSetting the `compose` flag to `true` inside the Android [`BuildFeatures`](/reference/tools/gradle-api/7.0/com/android/build/api/dsl/BuildFeatures)\nblock enables [Compose functionality](/develop/ui/compose/tooling) in Android Studio.\n\nFinally, add the Compose BOM and the subset of Compose library dependencies\nyou need to your dependencies from the following block: \n\n### Groovy\n\n dependencies {\n\n def composeBom = platform('androidx.compose:compose-bom:2025.08.00')\n implementation composeBom\n androidTestImplementation composeBom\n\n // Choose one of the following:\n // Material Design 3\n implementation 'androidx.compose.material3:material3'\n // or Material Design 2\n implementation 'androidx.compose.material:material'\n // or skip Material Design and build directly on top of foundational components\n implementation 'androidx.compose.foundation:foundation'\n // or only import the main APIs for the underlying toolkit systems,\n // such as input and measurement/layout\n implementation 'androidx.compose.ui:ui'\n\n // Android Studio Preview support\n implementation 'androidx.compose.ui:ui-tooling-preview'\n debugImplementation 'androidx.compose.ui:ui-tooling'\n\n // UI Tests\n androidTestImplementation 'androidx.compose.ui:ui-test-junit4'\n debugImplementation 'androidx.compose.ui:ui-test-manifest'\n\n // Optional - Included automatically by material, only add when you need\n // the icons but not the material library (e.g. when using Material3 or a\n // custom design system based on Foundation)\n implementation 'androidx.compose.material:material-icons-core'\n // Optional - Add full set of material icons\n implementation 'androidx.compose.material:material-icons-extended'\n // Optional - Add window size utils\n implementation 'androidx.compose.material3.adaptive:adaptive'\n\n // Optional - Integration with activities\n implementation 'androidx.activity:activity-compose:1.10.1'\n // Optional - Integration with ViewModels\n implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'\n // Optional - Integration with LiveData\n implementation 'androidx.compose.runtime:runtime-livedata'\n // Optional - Integration with RxJava\n implementation 'androidx.compose.runtime:runtime-rxjava2'\n\n }\n\n### Kotlin\n\n dependencies {\n\n val composeBom = platform(\"androidx.compose:compose-bom:2025.08.00\")\n implementation(composeBom)\n androidTestImplementation(composeBom)\n\n // Choose one of the following:\n // Material Design 3\n implementation(\"androidx.compose.material3:material3\")\n // or Material Design 2\n implementation(\"androidx.compose.material:material\")\n // or skip Material Design and build directly on top of foundational components\n implementation(\"androidx.compose.foundation:foundation\")\n // or only import the main APIs for the underlying toolkit systems,\n // such as input and measurement/layout\n implementation(\"androidx.compose.ui:ui\")\n\n // Android Studio Preview support\n implementation(\"androidx.compose.ui:ui-tooling-preview\")\n debugImplementation(\"androidx.compose.ui:ui-tooling\")\n\n // UI Tests\n androidTestImplementation(\"androidx.compose.ui:ui-test-junit4\")\n debugImplementation(\"androidx.compose.ui:ui-test-manifest\")\n\n // Optional - Included automatically by material, only add when you need\n // the icons but not the material library (e.g. when using Material3 or a\n // custom design system based on Foundation)\n implementation(\"androidx.compose.material:material-icons-core\")\n // Optional - Add full set of material icons\n implementation(\"androidx.compose.material:material-icons-extended\")\n // Optional - Add window size utils\n implementation(\"androidx.compose.material3.adaptive:adaptive\")\n\n // Optional - Integration with activities\n implementation(\"androidx.activity:activity-compose:1.10.1\")\n // Optional - Integration with ViewModels\n implementation(\"androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5\")\n // Optional - Integration with LiveData\n implementation(\"androidx.compose.runtime:runtime-livedata\")\n // Optional - Integration with RxJava\n implementation(\"androidx.compose.runtime:runtime-rxjava2\")\n\n }\n\n| **Note:** Jetpack Compose is shipped using a Bill of Materials (BOM), to keep the versions of all library groups in sync. Read more about it in the [Bill of\n| Materials page](/develop/ui/compose/bom/bom).\n\nTry Jetpack Compose sample apps\n-------------------------------\n\nThe fastest way to experiment with the capabilities of Jetpack Compose is by\ntrying [Jetpack Compose sample apps](https://github.com/android/compose-samples) hosted on GitHub. To import\na sample app project from Android Studio, proceed as follows:\n\n1. If you're in the **Welcome to Android Studio** window, select **Import an\n Android code sample** . If you already have an Android Studio project open, select **File \\\u003e New \\\u003e Import Sample** from the menu bar.\n2. In the search bar near the top of the **Browse Samples** wizard, type \"compose\".\n3. Select one of the Jetpack Compose sample apps from the search results and click **Next**.\n4. Either change the **Application name** and **Project location** or keep the default values.\n5. Click **Finish**.\n\nAndroid Studio downloads the sample app to the path you specified and opens the\nproject. You can then inspect `MainActivity.kt` in each of the examples to see\nJetpack Compose APIs such as crossfade animation, custom components, using\ntypography, and displaying light and dark colors in the in-IDE preview.\n\nTo use Jetpack Compose for Wear OS, see [Set up Jetpack Compose on Wear OS](/training/wearables/compose-setup).\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Navigating with Compose](/develop/ui/compose/navigation)\n- [Testing your Compose layout](/develop/ui/compose/testing)\n- [React to focus](/develop/ui/compose/touch-input/focus/react-to-focus)"]]