Anda dapat membuat aplikasi ditampilkan dari tepi ke tepi—menggunakan seluruh lebar dan tinggi layar—dengan menggambar di belakang kolom sistem. Kolom sistem adalah status bar dan menu navigasi.
Untuk menerapkan tata letak tepi-ke-tepi, aplikasi Anda harus melakukan hal berikut:
- Gambar di belakang menu navigasi untuk mencapai pengalaman pengguna yang lebih menarik dan modern.
- Gambar di belakang status bar jika sesuai untuk konten dan tata letak Anda,
seperti untuk gambar dengan lebar penuh. Untuk melakukannya, gunakan API seperti
AppBarLayout
, yang menentukan panel aplikasi yang disematkan ke bagian atas layar.
Untuk menerapkan tata letak tata letak layar penuh di aplikasi Anda, lakukan langkah-langkah berikut:
- Aktifkan tampilan layar penuh.
- Tangani tumpang tindih visual.
Aktifkan tampilan layar penuh.
Anda dapat mengaktifkan tampilan tepi-ke-tepi di aplikasi dengan memanggil enableEdgeToEdge
dalam onCreate
dari Activity
Anda. Atribut 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 menjadi transparan, kecuali pada
mode navigasi 3 tombol dengan status bar yang menampilkan scrim transparan. Warna
ikon sistem dan scrim disesuaikan berdasarkan tema
terang atau gelap sistem.
Metode enableEdgeToEdge
secara otomatis mendeklarasikan bahwa aplikasi harus
ditempatkan dari tepi ke tepi dan menyesuaikan warna kolom sistem. Lihat
"Menyiapkan tampilan tepi ke tepi secara manual"
jika diperlukan karena alasan apa pun.
Menangani tumpang-tindih menggunakan inset
Setelah Anda mengaktifkan tampilan tepi-ke-tepi, beberapa tampilan aplikasi Anda mungkin menggambar di belakang kolom sistem, seperti ditunjukkan pada gambar 3.
Anda dapat mengatasi tumpang-tindih dengan bereaksi terhadap inset, yang menentukan bagian mana dari layar yang berpotongan dengan UI sistem seperti menu navigasi atau status bar. Berpotongan dapat berarti menampilkan di atas konten, tetapi juga dapat memberi tahu aplikasi Anda tentang gestur sistem.
Jenis inset yang berlaku untuk menampilkan aplikasi Anda dari tepi ke tepi adalah:
Inset kolom sistem: paling cocok untuk tampilan yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.
Inset gestur sistem: untuk area navigasi gestur yang digunakan oleh sistem yang lebih diprioritaskan daripada aplikasi Anda.
Inset kolom sistem
Inset kolom sistem adalah jenis inset yang paling umum digunakan. Panel ini mewakili area tempat UI sistem ditampilkan dalam sumbu Z di atas aplikasi Anda. Sebaiknya gunakan untuk memindahkan atau menambahkan padding pada tampilan di aplikasi yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.
Misalnya, tombol tindakan mengambang (FAB) pada gambar 3 dikaburkan sebagian oleh menu navigasi:
Untuk menghindari tumpang-tindih visual semacam ini dalam mode gestur atau mode tombol, Anda
dapat meningkatkan margin tampilan menggunakan
getInsets(int)
dengan
WindowInsetsCompat.Type.systemBars()
.
Contoh kode berikut menunjukkan cara mengimplementasikan 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 ditampilkan dalam gambar 3, solusi ini tidak akan menghasilkan visual tumpang-tindih dalam mode tombol, seperti yang ditunjukkan pada gambar 4:
Hal yang sama berlaku untuk mode navigasi gestur, seperti yang ditunjukkan pada gambar 5:
Inset gestur sistem
Inset gestur sistem mewakili area jendela tempat gestur sistem diprioritaskan daripada aplikasi Anda. Area ini ditampilkan dengan warna oranye pada gambar 6:
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 menutupi tampilan yang dapat digeser dari tepinya. Kasus penggunaan
umum mencakup sheet bawah,
geser dalam game, dan carousel yang diimplementasikan menggunakan
ViewPager2
.
Di Android 10 atau yang lebih baru, inset gestur sistem berisi inset bawah untuk gestur layar utama, serta inset kiri dan kanan untuk gestur kembali:
Contoh kode berikut menunjukkan cara mengimplementasikan 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; });
Mode imersif
Beberapa konten paling baik dinikmati dalam layar penuh, karena memberikan pengalaman
yang lebih imersif kepada pengguna. Anda dapat menyembunyikan kolom sistem untuk mode imersif menggunakan library WindowInsetsController
dan WindowInsetsControllerCompat
:
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 menerapkan fitur ini.
Referensi tambahan
Lihat referensi berikut untuk informasi selengkapnya tentang WindowInsets
, navigasi
gestur, dan cara kerja inset:
- WindowInsets — pemroses untuk tata letak
- Navigasi Gestur: Inset
- Bagaimana cara kerja inset di Android?