Menampilkan konten layar penuh di aplikasi Anda

Mencoba cara Compose

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

Dari tepi ke tepi 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 secara layar penuh. Jendela mencakup seluruh lebar dan tinggi layar dengan menggambar di belakang panel sistem. Kolom sistem mencakup status bar, kolom teks, dan menu navigasi.

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

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

Gambar 1. Panel sistem dalam tata letak layar penuh.

Saat menerapkan tata letak dari tepi ke tepi di aplikasi Anda, perhatikan hal berikut:

1. Mengaktifkan layar penuh
2. Tangani tumpang tindih visual apa pun.
3. Pertimbangkan untuk menampilkan scrim di belakang panel sistem.

Gambar 2. Contoh gambar di belakang status bar.

Penting: Tata letak layar penuh diterapkan di Android 15 (API level 35) dan yang lebih tinggi setelah aplikasi Anda menargetkan SDK 35. Jika aplikasi Anda belum memenuhi seluruh layar, bagian aplikasi mungkin akan terhalang dan Anda harus menangani inset. Bergantung pada aplikasinya, pekerjaan ini mungkin signifikan atau tidak.

Aktifkan layar penuh

Jika aplikasi Anda menargetkan SDK 35 atau yang lebih baru, layar penuh akan otomatis diaktifkan untuk perangkat Android 15 atau yang lebih baru.

Untuk mengaktifkan layar penuh di versi Android sebelumnya, lakukan hal berikut:

1. Tambahkan dependensi ke library androidx.activity dalam file build.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'
   }

2. Impor fungsi ekstensi enableEdgeToEdge ke dalam aplikasi Anda:

Aktifkan layar penuh secara manual dengan memanggil enableEdgeToEdge di 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 panel sistem transparan, kecuali pada mode navigasi 3 tombol saat status bar mendapatkan scrim transparan. Warna ikon sistem dan scrim disesuaikan berdasarkan tema terang atau gelap sistem.

Fungsi enableEdgeToEdge() secara otomatis mendeklarasikan bahwa aplikasi harus ditata dari tepi ke tepi dan menyesuaikan warna panel sistem.

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

Menangani tumpang tindih menggunakan inset

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

Anda dapat mengatasi tumpang-tindih dengan bereaksi terhadap inset, yang menentukan bagian layar yang bersinggungan dengan UI sistem seperti menu navigasi atau status bar. Tumpang-tindih dapat berarti ditampilkan di atas konten, tetapi juga dapat menginformasikan aplikasi Anda tentang gestur sistem.

Jenis inset yang berlaku untuk menampilkan aplikasi Anda dari tepi ke tepi adalah:

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

• Menampilkan 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 lebih diprioritaskan daripada aplikasi Anda.

Inset kolom sistem

Inset panel sistem adalah jenis inset yang paling umum digunakan. Kolom ini mewakili area tempat UI sistem ditampilkan di sumbu Z di atas aplikasi Anda. Kolom 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:

Gambar 3. Menu navigasi yang tumpang-tindih dengan FAB dalam tata letak dari tepi ke tepi.

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 panel 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 ke contoh yang ditampilkan pada gambar 3, solusi ini tidak akan menghasilkan tumpang-tindih visual dalam mode tombol, seperti yang ditunjukkan pada gambar 4:

Gambar 4. Menyelesaikan tumpang-tindih visual dalam mode tombol.

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

Gambar 5. Menyelesaikan tumpang-tindih visual dalam mode navigasi gestur.

Menampilkan inset potongan layar

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

Misalnya, banyak layar aplikasi menampilkan daftar item. Jangan mengaburkan item daftar dengan potongan tampilan atau panel 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) -> {
  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 logika dari panel sistem dan jenis cutout layar.

Tetapkan clipToPadding ke RecyclerView sehingga padding di-scroll dengan item daftar. Hal ini memungkinkan item berada di belakang panel 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 dalam warna oranye pada gambar 6:

Gambar 6. Inset gestur sistem.

Seperti inset panel 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 diterapkan menggunakan ViewPager2.

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

Gambar 7. Pengukuran inset gestur sistem.

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

Banyak Komponen Material Android berbasis tampilan (com.google.android.material){:.external} secara 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.

Mode imersif

Beberapa konten paling nyaman dinikmati dalam layar penuh, sehingga memberi pengguna pengalaman yang lebih imersif. 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 panel sistem untuk mode imersif untuk mengetahui informasi selengkapnya tentang cara menerapkan fitur ini.

Perlindungan kolom sistem

Setelah aplikasi Anda menargetkan SDK 35 atau yang lebih baru, layar penuh akan diterapkan. Status bar sistem dan menu navigasi gestur transparan, tetapi menu navigasi tiga tombol transparan.

Untuk menghapus perlindungan latar belakang navigasi tiga tombol transparan default, tetapkan Window.setNavigationBarContrastEnforced ke false.

Referensi lainnya

Lihat referensi berikut untuk mengetahui informasi selengkapnya tentang WindowInsets, navigasi gestur, dan cara kerja inset:

• Panel sistem Android
• Tips penanganan inset untuk penerapan layar penuh Android 15
• WindowInsets — pemroses ke tata letak
• Navigasi Gestur: Insets
• Bagaimana cara kerja inset di Android?