Setelah menargetkan SDK 35 atau yang lebih tinggi di perangkat yang menjalankan Android 15 atau yang lebih tinggi, aplikasi Anda ditampilkan dari tepi ke tepi. Jendela membentang hingga lebar dan tinggi layar dengan menggambar di belakang kolom sistem. Kolom sistem mencakup status bilah, bilah {i>caption<i}, dan bilah navigasi.
Banyak aplikasi memiliki panel aplikasi atas. Panel aplikasi atas harus membentang ke tepi atas layar dan tampilan di belakang {i>status bar<i}. Secara opsional, panel aplikasi atas dapat mengecil ke tinggi bilah status saat konten di-scroll.
Banyak aplikasi juga memiliki panel aplikasi bawah atau menu navigasi bawah. Batang-batang ini harus juga melebar ke tepi bawah layar dan menampilkannya di belakang navigasi . Jika tidak, aplikasi harus menampilkan konten scroll di belakang menu navigasi.
Saat menerapkan tata letak layar penuh di aplikasi Anda, pertahankan hal berikut pikiran:
- Mengaktifkan tampilan tepi-ke-tepi
- Tangani tumpang tindih visual.
- Pertimbangkan untuk menampilkan scrim di belakang kolom sistem.
![contoh citra di belakang status bar](https://developer.android.google.cn/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=19&hl=id)
Aktifkan tampilan tepi-ke-tepi
Jika aplikasi Anda menargetkan SDK 35 atau yang lebih baru, tata letak layar penuh akan otomatis diaktifkan untuk Perangkat Android 15 atau yang lebih baru.
Untuk mengaktifkan tata letak layar penuh di versi Android sebelumnya, lakukan hal berikut:
Tambahkan dependensi ke library
androidx.activity
di Filebuild.gradle
aplikasi atau modul Anda:Kotlin
dependencies { val activity_version =
activity_version
// Java language implementation implementation("androidx.activity:activity:$activity_version") // Kotlin implementation("androidx.activity:activity-ktx:$activity_version") }Groovy
dependencies { def activity_version =
activity_version
// Java language implementation implementation 'androidx.activity:activity:$activity_version' // Kotlin implementation 'androidx.activity:activity-ktx:$activity_version' }Impor
enableEdgeToEdge
fungsi ekstensi ke dalam aplikasi Anda:
Aktifkan tata letak layar penuh secara manual dengan memanggil enableEdgeToEdge
dalam onCreate
dari Activity
Anda. Fungsi ini harus dipanggil sebelum setContentView
.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
Secara default, enableEdgeToEdge()
membuat kolom sistem transparan, kecuali pada
Mode navigasi 3 tombol dengan status bar yang memiliki scrim transparan. Tujuan
warna ikon sistem dan scrim-nya disesuaikan berdasarkan
tema terang atau gelap.
Fungsi enableEdgeToEdge()
secara otomatis mendeklarasikan bahwa aplikasi harus
ditata dari tepi ke tepi dan menyesuaikan warna bilah sistem.
Untuk mengaktifkan tampilan tepi-ke-tepi di aplikasi Anda tanpa menggunakan
Fungsi enableEdgeToEdge()
, lihat
Siapkan tampilan tepi-ke-tepi secara manual.
Menangani tumpang tindih menggunakan inset
Beberapa tampilan aplikasi mungkin digambar di belakang kolom sistem, seperti yang ditunjukkan dalam gambar 3.
Anda dapat mengatasi tumpang tindih dengan bereaksi terhadap inset, yang menentukan bagian mana dari layar berpotongan dengan UI sistem seperti bilah navigasi atau status . Berpotongan dapat berarti menampilkan di atas konten, tetapi juga dapat menginformasikan aplikasi Anda tentang {i>gesture <i}sistem.
Jenis inset yang berlaku untuk menampilkan aplikasi Anda dari tepi ke tepi adalah:
Inset kolom sistem: cocok untuk tampilan yang dapat diketuk dan yang tidak boleh terhalang secara visual oleh kolom sistem.
Inset potongan layar: untuk area yang mungkin memiliki potongan layar karena bentuk perangkatnya.
Inset gestur sistem: untuk area navigasi gestur yang digunakan oleh sistem yang diprioritaskan daripada aplikasi Anda.
Inset kolom sistem
Inset kolom sistem adalah jenis inset yang paling umum digunakan. Keduanya mewakili area tempat UI sistem ditampilkan dalam sumbu Z di atas aplikasi Anda. Yang terbaik digunakan untuk memindahkan atau memberikan padding pada tampilan di aplikasi Anda yang dapat diketuk dan tidak boleh terhalang secara visual oleh bilah sistem.
Misalnya, tindakan mengambang tombol (FAB) di gambar 3 sebagian terhalang oleh bilah navigasi:
![contoh tata letak layar penuh diimplementasikan, tetapi bilah navigasi menutupi FAB](https://developer.android.google.cn/static/images/guide/navigation/e2e-after-implementation.png?authuser=19&hl=id)
Untuk menghindari semacam tumpang tindih visual ini dalam
mode {i>gesture <i}atau tombol, Anda
dapat menambah margin
tampilan menggunakan
getInsets(int)
dengan
WindowInsetsCompat.Type.systemBars()
.
Contoh kode berikut menunjukkan cara menerapkan inset kolom sistem:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams> { leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, } // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
Jika Anda menerapkan solusi ini pada contoh yang ditunjukkan pada gambar 3, hasilnya tidak tumpang tindih visual dalam mode tombol, seperti yang ditunjukkan pada gambar 4:
![bilah navigasi transparan yang tidak menutupi FAB](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-bars-top.png?authuser=19&hl=id)
Hal yang sama berlaku untuk mode navigasi gestur, seperti yang ditunjukkan pada gambar 5:
![tata letak layar penuh dengan navigasi gestur](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=19&hl=id)
Inset potongan layar
Beberapa perangkat memiliki potongan layar. Biasanya, potongan berada di bagian atas dan dimasukkan ke dalam bilah status. Saat layar perangkat dalam mode lanskap , potongan mungkin berada di tepi vertikal. Bergantung pada konten aplikasi Anda ditampilkan di layar, Anda harus menerapkan padding untuk menghindari potongan layar, secara default, aplikasi akan menggambar di potongan layar.
Misalnya, banyak layar aplikasi yang menampilkan daftar item. Jangan mengaburkan item daftar dengan potongan layar atau kolom sistem.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets -> val bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout() ) v.updatePadding( left = bars.left, top = bars.top, right = bars.right, bottom = bars.bottom, ) WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { WindowInsetsCompat bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout() ); v.setPadding(bars.left, bars.top, bars.right, bars.bottom); return WindowInsetsCompat.CONSUMED; });
Tentukan nilai WindowInsetsCompat
dengan mengambil logika atau dari
kolom sistem dan jenis potongan layar.
Setel clipToPadding
ke RecyclerView
sehingga padding dapat di-scroll dengan
item daftar. Hal ini memungkinkan item untuk berjalan di belakang kolom sistem saat pengguna
akan di-scroll, seperti yang ditampilkan dalam contoh berikut.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
Inset gestur sistem
Inset gestur sistem mewakili area jendela tempat gestur sistem lebih diprioritaskan daripada aplikasi Anda. Area ini ditunjukkan dengan warna oranye pada gambar 6:
![Contoh inset gestur sistem](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=19&hl=id)
Seperti inset kolom sistem, Anda dapat menghindari tumpang-tindih inset gestur sistem
menggunakan
getInsets(int)
dengan
WindowInsetsCompat.Type.systemGestures()
.
Gunakan inset ini untuk memindahkan atau menempelkan tampilan yang dapat digeser dari tepi. Penggunaan umum
kasus mencakup sheet bawah,
menggeser dalam {i>game<i}, dan {i>carousel<i}
yang diimplementasikan menggunakan
ViewPager2
Di Android 10 atau yang lebih baru, inset gestur sistem berisi inset bawah untuk gestur beranda, serta inset kiri dan kanan untuk gestur kembali:
![contoh pengukuran inset gestur sistem](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=19&hl=id)
Contoh kode berikut menunjukkan cara menerapkan inset gestur sistem:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
Komponen Material
Komponen Material Android berbasis tampilan
(com.google.android.material){:.external} secara otomatis menangani inset, termasuk
BottomAppBar
,
BottomNavigationView
,
NavigationRailView
dan NavigationView
Namun, AppBarLayout
tidak menangani inset secara otomatis. Tambah
android:fitsSystemWindows="true"
untuk menangani inset teratas atau menggunakan setOnApplyWindowInsetsListener
.
Baca cara menangani inset dengan Komponen Material di Compose.
Mode imersif
Beberapa konten paling nyaman dinikmati dalam layar penuh, memberi pengguna lebih banyak
pengalaman penggunaan yang imersif. Anda dapat menyembunyikan kolom sistem
untuk mode imersif menggunakan
WindowInsetsController
dan
WindowInsetsControllerCompat
library:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
Java
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
Lihat Menyembunyikan kolom sistem untuk mode imersif untuk mengetahui informasi selengkapnya tentang penerapan fitur ini.
Referensi lainnya
Lihat referensi berikut untuk mengetahui informasi selengkapnya tentang gestur WindowInsets
navigasi, dan cara kerja inset: