Menampilkan konten layar penuh di aplikasi Anda

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

Anda dapat membuat aplikasi menampilkan layar penuh—menggunakan seluruh lebar dan tinggi layar—dengan menggambar di belakang kolom sistem. Kolom sistem adalah status bar dan menu navigasi.

Untuk menerapkan tata letak layar penuh, aplikasi Anda harus melakukan hal berikut:

  • Gambar di belakang menu navigasi untuk memberikan pengalaman pengguna yang lebih menarik dan modern.
  • Gambar di belakang status bar jika sesuai untuk konten dan tata letak Anda, misalnya untuk gambar dengan lebar penuh. Untuk melakukannya, gunakan API seperti AppBarLayout, yang menentukan panel aplikasi yang disematkan ke bagian atas layar.
Gambar 1. Kolom sistem dalam tata letak layar penuh.

Untuk menerapkan tata letak layar penuh di aplikasi Anda, lakukan langkah-langkah berikut:

  1. Aktifkan tampilan tepi-ke-tepi.
  2. Tangani tumpang tindih visual.
Gambar yang menampilkan aplikasi dengan citra di belakang status bar
Gambar 2. Contoh aplikasi dengan gambar di belakang status bar.

Aktifkan tampilan tepi-ke-tepi.

Anda dapat mengaktifkan tampilan tepi-ke-tepi di aplikasi 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 kolom sistem transparan, kecuali pada mode navigasi 3 tombol dengan status bar mendapatkan 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 hal ini diperlukan karena alasan apa pun.

Menangani tumpang tindih menggunakan inset

Setelah 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 layar mana yang berpotongan dengan UI sistem seperti menu navigasi atau status bar. Berpotongan dapat berarti menampilkan di atas konten, tetapi juga dapat memberi tahu aplikasi tentang gestur 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 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. Mode ini mewakili area tempat UI sistem ditampilkan dalam sumbu Z di atas aplikasi. Mode ini paling baik digunakan untuk memindahkan atau melakukan pad tampilan di aplikasi Anda yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.

Misalnya, tombol tindakan mengambang (FAB) di gambar 3 disamarkan sebagian oleh menu navigasi:

Gambar yang menampilkan penerapan dari tepi ke tepi, tetapi menu navigasi menutupi FAB
Gambar 3. Menu navigasi tumpang-tindih dengan FAB dalam tata letak tepi-ke-tepi.

Untuk menghindari semacam tumpang-tindih visual 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:

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 pada gambar 3, tidak akan terjadi tumpang-tindih visual dalam mode tombol, seperti yang ditunjukkan pada gambar 4:

Gambar yang menampilkan menu navigasi transparan yang tidak menutupi FAB
Gambar 4. Menyelesaikan tumpang-tindih visual dalam mode tombol.

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

Gambar yang menampilkan layar penuh dengan navigasi gestur
Gambar 5. Menyelesaikan tumpang-tindih visual dalam mode navigasi gestur.

Inset gestur sistem

Inset gestur sistem mewakili area jendela tempat gestur sistem lebih diprioritaskan daripada aplikasi Anda. Area ini ditampilkan dengan warna oranye pada gambar 6:

Gambar yang menunjukkan inset gestur sistem
Gambar 6. Inset gestur sistem.

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. 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:

Gambar yang menunjukkan pengukuran inset gestur sistem
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;
});

Mode imersif

Beberapa konten sebaiknya 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:

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 cara menerapkan fitur ini.

Referensi tambahan

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