Mulai menggunakan Jetpack Compose
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Jetpack Compose adalah toolkit modern untuk membuat UI Android native. Di sinilah Anda akan menemukan informasi terbaru tentang penggunaan Compose.
- Ringkasan: Lihat semua resource yang tersedia untuk developer Compose.
- Tutorial: Mulailah dengan Compose, dengan menggunakannya untuk membuat UI sederhana.
- Panduan Cepat: Baru! Coba panduan cepat dan terfokus kami, yang dirancang untuk membantu Anda mencapai sasaran secepat mungkin.
Fondasi
- Berpikir dalam Compose: Pelajari perbedaan pendekatan deklaratif Compose dengan pendekatan berbasis View yang mungkin telah Anda gunakan sebelumnya, dan cara membangun model mental untuk bekerja dengan Compose.
- Mengelola status: Pelajari setelan dan penggunaan status di aplikasi Compose.
- Siklus proses composable: Pelajari siklus proses composable, dan cara Compose memutuskan apakah siklus tersebut perlu digambar ulang.
- Pengubah: Pelajari cara menggunakan pengubah untuk meningkatkan atau mendekorasi composable Anda.
- Efek samping di Compose: Pelajari cara terbaik untuk mengelola efek samping.
- Fase Jetpack Compose: Pelajari langkah-langkah yang dilakukan Compose untuk merender UI Anda, dan cara menggunakan informasi tersebut untuk menulis kode yang efisien
- Lapisan arsitektur: Pelajari lapisan arsitektur yang membentuk Jetpack Compose, dan prinsip inti yang menjadi dasar desainnya.
- Performa: Pelajari cara menghindari kendala pemrograman umum yang dapat mengganggu performa aplikasi Anda.
- Semantik di Compose: Pelajari hierarki Semantik, yang mengatur UI Anda dengan cara yang dapat digunakan oleh layanan aksesibilitas dan framework pengujian.
- Data yang dibatasi secara lokal dengan CompositionLocal: Pelajari cara menggunakan
CompositionLocal untuk meneruskan data melalui Komposisi.
Lingkungan pengembangan
Desain
- Tata letak: Pelajari komponen tata letak native Compose, dan cara mendesain komponen Anda sendiri.
- Dasar-dasar tata letak: Pelajari elemen penyusun UI aplikasi yang sederhana.
- Komponen Material dan tata letak: Pelajari komponen Material dan tata letak di Compose.
- Tata letak kustom: Pelajari cara mengontrol tata letak aplikasi Anda, dan cara mendesain tata letak kustom Anda sendiri.
- Mendukung berbagai ukuran tampilan: Pelajari cara menggunakan Compose untuk mem-build tata letak yang beradaptasi dengan berbagai ukuran tampilan, orientasi, dan faktor bentuk.
- Garis perataan: Pelajari cara membuat garis perataan kustom untuk meratakan dan memosisikan elemen UI dengan tepat.
- Pengukuran intrinsik: Karena Compose hanya memungkinkan Anda mengukur elemen UI satu kali per penerusan, halaman ini menjelaskan cara membuat kueri untuk mengetahui informasi tentang elemen turunan sebelum mengukurnya.
- ConstraintLayout: Pelajari cara menggunakan
ConstraintLayout di UI Compose.
- Sistem Desain: Pelajari cara menerapkan sistem desain dan memberikan tampilan serta nuansa yang konsisten untuk aplikasi Anda.
- Daftar dan petak: Pelajari beberapa opsi Compose untuk mengelola dan menampilkan daftar dan petak data.
- Teks: Pelajari opsi utama Compose untuk menampilkan dan mengedit teks.
- Grafis: Pelajari fitur Compose untuk pembuatan dan pekerjaan dengan grafis kustom.
- Animasi: Pelajari berbagai opsi Compose untuk menganimasikan elemen UI Anda.
- Gestur: Pelajari cara mem-build Compose UI yang mendeteksi dan berinteraksi dengan gestur pengguna.
- Menangani interaksi pengguna: Pelajari cara Compose memisahkan input tingkat rendah ke interaksi tingkat yang lebih tinggi, sehingga Anda dapat menyesuaikan cara komponen merespons tindakan pengguna.
Menggunakan Compose
- Memigrasikan aplikasi berbasis View yang ada: Pelajari cara memigrasikan aplikasi berbasis View yang ada ke Compose.
- Strategi migrasi: Pelajari strategi untuk memperkenalkan Compose dengan aman dan bertahap ke codebase Anda.
- API Interoperabilitas: Pelajari API Compose untuk membantu Anda menggabungkan Compose dengan UI berbasis View.
- Pertimbangan lainnya: Pelajari pertimbangan lainnya seperti tema, arsitektur, dan pengujian saat memigrasikan aplikasi berbasis View ke Compose.
- Compose dan library lainnya: Pelajari cara menggunakan library berbasis tampilan di konten Compose Anda.
- Arsitektur Compose: Pelajari cara menerapkan pola aliran searah di Compose, cara menerapkan peristiwa dan pemegang status, dan cara menggunakan
ViewModel di Compose.
- Navigasi: Pelajari cara menggunakan
NavController untuk mengintegrasikan komponen Navigation dengan UI Compose.
- Navigasi untuk UI responsif: Pelajari cara mendesain navigasi aplikasi agar dapat beradaptasi dengan berbagai ukuran layar, orientasi, dan faktor bentuk.
- Resource: Pelajari cara menggunakan resource aplikasi Anda di kode Compose.
- Aksesibilitas: Pelajari cara membuat Compose UI Anda sesuai untuk pengguna dengan persyaratan aksesibilitas yang berbeda.
- Pengujian: Pelajari cara menguji kode Compose Anda.
Referensi lainnya
Direkomendasikan untuk Anda
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-21 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-21 UTC."],[],[],null,["# Get started with Jetpack Compose\n\nJetpack Compose is the modern toolkit for building native Android UI. Here's\nwhere you'll find the latest information about using Compose.\n\n- [Overview](/develop/ui/compose): See all the resources available to Compose developers.\n- [Tutorial](/develop/ui/compose/tutorial): Get started with Compose, by using it to build a simple UI.\n- [Quick Guides](/quick-guides): **New!** Try out our fast and focused guides, designed to get you to your goal as quickly as possible.\n\nFoundation\n----------\n\n- [Thinking in Compose](/develop/ui/compose/mental-model): Learn how Compose's declarative approach is different from the view-based approach you may have used in the past, and how to build a mental model of working with Compose.\n- [Managing state](/develop/ui/compose/state): Learn about setting and using state in your Compose app.\n- [Lifecycle of composables](/develop/ui/compose/lifecycle): Learn about the lifecycle of a composable, and how Compose decides if it needs to be redrawn.\n- [Modifiers](/develop/ui/compose/modifiers): Learn how to use modifiers to augment or decorate your composables.\n- [Side-effects in Compose](/develop/ui/compose/side-effects): Learn the best ways to manage side-effects.\n- [Jetpack Compose Phases](/develop/ui/compose/phases): Learn about the steps Compose goes through to render your UI, and how to use that information to write efficient code\n- [Architectural layering](/develop/ui/compose/layering): Learn about the architectural layers that make up Jetpack Compose, and the core principles that informed its design.\n- [Performance](/develop/ui/compose/performance): Learn how to avoid the common programming pitfalls that can hurt your app's performance.\n- [Semantics in Compose](/develop/ui/compose/semantics): Learn about the Semantics tree, which organizes your UI in a way that can be used by accessibility services and the testing framework.\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal): Learn how to use `CompositionLocal` to pass data through the Composition.\n\nDevelopment environment\n-----------------------\n\n- [Android Studio with Compose](/develop/ui/compose/setup): Set up your development environment to use Compose.\n- [Tooling for Compose](/develop/ui/compose/tooling): Learn about Android Studio's new features to support Compose.\n- [Kotlin for Compose](/develop/ui/compose/kotlin): Learn how certain Kotlin-specific idioms work with Compose.\n- [Compare Compose and View metrics](/develop/ui/compose/migrate/compare-metrics): Learn how migrating to Compose can affect your app's APK size and runtime performance.\n- [Bill of Materials](/develop/ui/compose/bom): Manage all your Compose dependencies by specifying only the BOM's version.\n\nDesign\n------\n\n- [Layouts](/develop/ui/compose/layouts): Learn about Compose's native layout components, and how to design your own.\n - [Layout basics](/develop/ui/compose/layouts/basics): Learn about the building blocks for a straightforward app UI.\n - [Material Components and layouts](/develop/ui/compose/components): Learn about Material components and layouts in Compose.\n - [Custom layouts](/develop/ui/compose/layouts/custom): Learn how to take control of your app's layout, and how to design a custom layout of your own.\n - [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes): Learn how to use Compose to build layouts that adapt to different display sizes, orientations, and form factors.\n - [Alignment lines](/develop/ui/compose/layouts/alignment-lines): Learn how to create custom alignment lines to precisely align and position your UI elements.\n - [Intrinsic measurements](/develop/ui/compose/layouts/intrinsic-measurements): Since Compose only allows you to measure UI elements once per pass, this page explains how to query for information about child elements before measuring them.\n - [ConstraintLayout](/develop/ui/compose/layouts/constraintlayout): Learn how to use `ConstraintLayout` in your Compose UI.\n- [Design Systems](/develop/ui/compose/designsystems): Learn how to implement a design system and give your app a consistent look and feel.\n - [Material Design 3](/develop/ui/compose/designsystems/material3): Learn how to implement Material You with Compose's implementation of [Material Design 3](https://m3.material.io/).\n - [Migrating from Material 2 to Material 3](/develop/ui/compose/designsystems/material2-material3): Learn how to migrate your app from Material Design 2 to Material Design 3 in Compose.\n - [Material Design 2](/develop/ui/compose/designsystems/material): Learn how to customize Compose's implementation of [Material Design 2](https://material.io/) to fit your product's brand.\n - [Custom design systems](/develop/ui/compose/designsystems/custom): Learn how to implement a custom design system in Compose, and how to adapt existing Material Design composables to handle this.\n - [Anatomy of a theme](/develop/ui/compose/designsystems/anatomy): Learn about the lower-level constructs and APIs used by `MaterialTheme` and custom design systems.\n- [Lists and grids](/develop/ui/compose/lists): Learn about some of Compose's options for managing and displaying lists and grids of data.\n- [Text](/develop/ui/compose/text): Learn about Compose's main options for displaying and editing text.\n- [Graphics](/develop/ui/compose/graphics): Learn about Compose's features for building and working with custom graphics.\n- [Animation](/develop/ui/compose/animation/introduction): Learn about Compose's different options for animating your UI elements.\n- [Gestures](/develop/ui/compose/touch-input/pointer-input): Learn how to build a Compose UI that detects and interacts with user gestures.\n- [Handling user interactions](/develop/ui/compose/touch-input/user-interactions/handling-interactions): Learn how Compose abstracts low-level input into higher-level interactions, so you can customize how your components respond to user actions.\n\nAdopting Compose\n----------------\n\n- [Migrate existing View-based apps](/develop/ui/compose/migrate): Learn how to migrate your existing View-based app to Compose.\n - [Migration strategy](/develop/ui/compose/migrate/strategy): Learn the strategy to safely and incrementally introduce Compose into your codebase.\n - [Interoperability APIs](/develop/ui/compose/migrate/interoperability-apis): Learn about Compose's APIs to help you combine Compose with View-based UI.\n - [Other considerations](/develop/ui/compose/migrate/other-considerations): Learn about other considerations like theming, architecture, and testing while migrating your View-based app to Compose.\n- [Compose and other libraries](/develop/ui/compose/libraries): Learn how to use view-based libraries in your Compose content.\n- [Compose architecture](/develop/ui/compose/architecture): Learn how to implement the unidirectional flow pattern in Compose, how to implement events and state holders, and how to work with `ViewModel` in Compose.\n- [Navigation](/develop/ui/compose/navigation): Learn how to use `NavController` to integrate the Navigation component with your Compose UI.\n - [Navigation for responsive UIs](/guide/topics/large-screens/navigation-for-responsive-uis): Learn how to design your app's navigation so it adapts to different screen sizes, orientations, and form factors.\n- [Resources](/develop/ui/compose/resources): Learn how to work with your app's resources in your Compose code.\n- [Accessibility](/develop/ui/compose/accessibility): Learn how to make your Compose UI suitable for users with different accessibility requirements.\n- [Testing](/develop/ui/compose/testing): Learn about testing your Compose code.\n - [Testing cheat sheet](/develop/ui/compose/testing-cheatsheet): A quick reference of useful Compose testing APIs.\n\nAdditional resources\n--------------------\n\n- [Get setup](/develop/ui/compose/setup)\n- [Curated learning pathway](/courses/pathways/compose)\n- [Compose API guidelines](https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md)\n- [API reference](/reference/kotlin/androidx/compose)\n- [Codelabs](https://goo.gle/compose-codelabs)\n- [Sample apps](https://github.com/android/compose-samples)\n- [Videos](https://www.youtube.com/user/androiddevelopers/search?query=%23jetpackcompose)\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal)\n- [Other considerations](/develop/ui/compose/migrate/other-considerations)\n- [Anatomy of a theme in Compose](/develop/ui/compose/designsystems/anatomy)"]]
