Menampilkan konten layar penuh dalam tampilan

Coba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak layar penuh di Compose.

Tata letak layar penuh di Compose →

Setelah Anda menargetkan SDK 35 atau yang lebih tinggi di perangkat yang menjalankan Android 15 atau yang lebih tinggi, aplikasi Anda akan ditampilkan dalam tata letak layar penuh. Jendela mencakup seluruh lebar dan tinggi layar dengan menggambar di belakang kolom sistem. Kolom sistem mencakup status bar, kolom teks, dan menu navigasi.

Banyak aplikasi memiliki panel aplikasi atas. Panel aplikasi atas harus direntangkan ke tepi atas layar dan ditampilkan di belakang status bar. Secara opsional, panel aplikasi atas dapat diperkecil hingga tinggi status bar saat konten di-scroll.

Banyak aplikasi juga memiliki panel aplikasi bawah atau menu navigasi bawah. Panel ini juga harus direntangkan ke tepi bawah layar dan ditampilkan di belakang menu navigasi. Jika tidak, aplikasi harus menampilkan konten yang dapat di-scroll di belakang menu navigasi.

Saat menerapkan tata letak layar penuh di aplikasi Anda, perhatikan hal berikut:

1. Mengaktifkan tampilan layar penuh
2. Menerapkan tata letak adaptif untuk mengoptimalkan pengalaman pengguna pada berbagai faktor bentuk
3. Menangani tumpang tindih visual
4. Mempertimbangkan untuk menampilkan scrim di belakang kolom sistem

Mengaktifkan tampilan layar penuh

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, panggil enableEdgeToEdge secara manual di onCreate dari Activity Anda.

 override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         WindowCompat.enableEdgeToEdge(window)
        ...
      }

 @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowCompat.enableEdgeToEdge(getWindow());
        ...
      }

Secara default, enableEdgeToEdge() membuat kolom sistem transparan, kecuali pada mode navigasi 3 tombol yang membuat menu navigasi mendapatkan scrim transparan. Warna ikon sistem dan scrim disesuaikan berdasarkan tema terang atau gelap sistem.

Untuk mengaktifkan tampilan layar penuh di aplikasi Anda tanpa menggunakan fungsi enableEdgeToEdge(), lihat Menyiapkan tampilan layar penuh secara manual.

Menangani tumpang tindih menggunakan inset

Beberapa tampilan aplikasi Anda mungkin digambar di belakang kolom sistem, seperti yang ditunjukkan pada gambar 3.

Anda dapat mengatasi tumpang tindih dengan bereaksi terhadap inset, yang menentukan bagian layar mana yang berpotongan dengan UI sistem seperti menu navigasi atau status bar. Berpotongan dapat berarti ditampilkan di atas konten, tetapi juga dapat memberi tahu aplikasi Anda tentang gestur sistem.

Jenis inset yang berlaku untuk menampilkan aplikasi Anda dalam tata letak layar penuh adalah:

• Inset kolom sistem: paling cocok untuk tampilan yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.

• Inset potongan layar: untuk area yang mungkin memiliki potongan layar karena bentuk perangkat.

• 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. Inset ini mewakili area tempat UI sistem ditampilkan di sumbu Z di atas aplikasi Anda. Inset ini paling baik digunakan untuk memindahkan atau menambahkan padding pada tampilan di aplikasi Anda yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.

Misalnya, tombol tindakan mengambang (FAB) pada gambar 3 sebagian terhalang 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 menerapkan inset kolom sistem:

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 the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

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 the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Jika Anda menerapkan solusi ini ke contoh yang ditunjukkan pada gambar 3, tidak akan ada tumpang tindih visual dalam mode tombol, seperti yang ditunjukkan pada gambar 4:

Hal yang sama berlaku untuk mode navigasi gestur, seperti yang ditunjukkan pada gambar 5:

Inset potongan layar

Beberapa perangkat memiliki potongan layar. Biasanya, potongan layar berada di bagian atas layar dan disertakan dalam status bar. Saat layar perangkat dalam mode lanskap, potongan layar mungkin berada di tepi vertikal. Bergantung pada konten yang ditampilkan aplikasi Anda di layar, Anda harus menerapkan padding untuk menghindari potongan layar, karena secara default, aplikasi akan digambar di potongan layar.

Misalnya, banyak layar aplikasi menampilkan daftar item. Jangan menghalangi item daftar dengan potongan layar atau kolom sistem.

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
}

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets 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 atau logis dari kolom sistem dan jenis potongan layar.

Tetapkan clipToPadding ke RecyclerView sehingga padding di-scroll dengan item daftar. Hal ini memungkinkan item berada di belakang kolom sistem saat pengguna men-scroll, seperti yang ditunjukkan 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 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 menambahkan padding pada tampilan yang dapat digeser dari tepi. Kasus penggunaan umum mencakup sheet bawah, geser dalam game, dan carousel yang diimplementasikan menggunakanViewPager2.

Di Android 10 atau yang lebih baru, inset gestur sistem berisi inset bawah untuk gestur utama, serta inset kiri dan kanan untuk gestur kembali:

Contoh kode berikut menunjukkan cara menerapkan inset gestur sistem:

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
}

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

Banyak Komponen Material Android berbasis tampilan (com.google.android.material) otomatis menangani inset, termasuk BottomAppBar, BottomNavigationView, NavigationRailView dan NavigationView

Namun, AppBarLayout tidak otomatis menangani inset. Tambahkan android:fitsSystemWindows="true" untuk menangani inset atas.

Baca cara menangani inset dengan Komponen Material di Compose.

Pengiriman inset yang kompatibel dengan versi lama

Untuk menghentikan pengiriman inset ke tampilan turunan dan menghindari padding berlebih, Anda dapat menggunakan inset menggunakan WindowInsetsCompat.CONSUMED konstanta. Namun, di perangkat yang menjalankan Android 10 (level API 29 dan yang lebih lama), inset tidak dikirim ke elemen yang setara setelah memanggil WindowInsetsCompat.CONSUMED, yang dapat menyebabkan tumpang tindih visual yang tidak diinginkan.

Untuk mengonfirmasi bahwa inset dikirim ke elemen yang setara untuk semua versi Android yang didukung, gunakan ViewGroupCompat#installCompatInsetsDispatch sebelum menggunakan inset, yang tersedia di AndroidX Core dan Core-ktx 1.16.0-alpha01 dan yang lebih tinggi.

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);

Mode imersif

Beberapa konten paling baik dinikmati dalam layar penuh, sehingga memberikan pengalaman yang lebih imersif kepada pengguna. Anda dapat menyembunyikan kolom sistem untuk mode imersif menggunakan library WindowInsetsController dan WindowInsetsControllerCompat:

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

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 guna mengetahui informasi selengkapnya tentang cara menerapkan fitur ini.

Ikon kolom sistem

Memanggil enableEdgeToEdge memastikan warna ikon kolom sistem diperbarui saat tema perangkat berubah.

Saat menggunakan tata letak layar penuh, Anda mungkin perlu memperbarui warna ikon kolom sistem secara manual agar kontras dengan latar belakang aplikasi. Misalnya, untuk membuat ikon status bar terang:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

Perlindungan kolom sistem

Setelah aplikasi Anda menargetkan SDK 35 atau yang lebih tinggi, tata letak layar penuh akan diterapkan. Status bar sistem dan menu navigasi gestur transparan, tetapi menu navigasi tiga tombol transparan. Panggil enableEdgeToEdge untuk membuat kompatibilitas mundur ini.

Namun, default sistem mungkin tidak berfungsi untuk semua kasus penggunaan. Lihat panduan desain kolom sistem Android dan Desain layar penuh untuk menentukan apakah akan menggunakan kolom sistem transparan atau transparan.

Membuat kolom sistem transparan

Buat status bar transparan dengan menargetkan Android 15 (SDK 35) atau yang lebih tinggi atau dengan memanggil enableEdgeToEdge() dengan argumen default untuk versi sebelumnya.

Buat menu navigasi gestur transparan dengan menargetkan Android 15 atau yang lebih tinggi atau dengan memanggil enableEdgeToEdge() dengan argumen default untuk versi sebelumnya. Untuk menu navigasi tiga tombol, tetapkan Window.setNavigationBarContrastEnforced ke false. Jika tidak, scrim transparan akan diterapkan.

Membuat kolom sistem transparan

Untuk membuat status bar transparan, lakukan hal berikut:

1. Perbarui dependensi androidx-core ke 1.16.0-beta01 atau yang lebih tinggi
2. Gabungkan tata letak XML Anda dalam androidx.core.view.insets.ProtectionLayout dan tetapkan ID.
3. Akses ProtectionLayout secara terprogram untuk menetapkan perlindungan, dengan menentukan sisi dan GradientProtection untuk status bar.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )
SystemBarProtectionSnippet.kt

Pastikan ColorInt yang diteruskan ke GradientProtection cocok dengan latar belakang konten. Misalnya, tata letak daftar-detail yang ditampilkan di perangkat foldable mungkin memiliki GradientProtections dengan warna berbeda untuk panel daftar dan panel detail.

Jangan membuat menu navigasi gestur transparan. Untuk membuat menu navigasi tiga tombol transparan, lakukan salah satu hal berikut:

• Jika tata letak Anda sudah digabungkan dalam ProtectionView, Anda dapat meneruskan ColorProtection atau GradientProtection tambahan ke metode setProtections. Sebelum melakukannya, pastikan window.isNavigationBarContrastEnforced = false.
• Jika tidak, tetapkan window.isNavigationBarContrastEnforced = true.

Tips lainnya

Tips tambahan saat menangani inset.

Membuat konten yang dapat di-scroll dalam tata letak layar penuh

Pastikan item daftar terakhir tidak terhalang oleh kolom sistem di RecyclerView atau NestedScrollView dengan menangani inset dan menetapkan clipToPadding ke false.

Video berikut menunjukkan RecyclerView dengan tampilan layar penuh dinonaktifkan (kiri) dan diaktifkan (kanan):

Lihat cuplikan kode di bagian Membuat daftar dinamis dengan RecyclerView untuk contoh kode.

Membuat dialog layar penuh dalam tata letak layar penuh

Untuk membuat dialog layar penuh dalam tata letak layar penuh, panggil enableEdgeToEdge di Dialog.

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}

public class MyAlertDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            Window window = dialog.getWindow();
            if (window != null) {
                WindowCompat.enableEdgeToEdge(window);
            }
        }
    }
    ...
}

Referensi lainnya

Lihat referensi berikut untuk mengetahui informasi selengkapnya tentang penggunaan tata letak layar penuh.

Blog

• Tips penanganan inset untuk penerapan tata letak layar penuh Android 15
• WindowInsets — pemroses ke tata letak

Desain

• Kolom sistem Android
• Desain layar penuh

Dokumentasi lainnya

• Panduan migrasi tata letak layar penuh Chrome di Android

Video

• Membangun Masa Depan Android
• Navigasi Gestur: Inset