Jetpack Compose - Snackbar

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

Snackbar adalah sebuah komponen pada Jetpack Compose yang digunakan untuk menampilkan pesan yang sementara di bagian bawah layar, biasanya untuk memberi informasi singkat kepada pengguna atau memberikan feedback terkait dengan tindakan yang baru saja dilakukan.

Kapan Harus Menggunakan Snackbar?

Snackbar cocok digunakan dalam beberapa situasi:

• Memberikan Feedback: Snackbar dapat digunakan untuk memberi tahu pengguna tentang hasil tindakan mereka, seperti pesan berhasil terkirim atau data berhasil disimpan.

• Meminta Aksi dari Pengguna: Snackbar dapat menampilkan tindakan yang harus dilakukan pengguna, seperti mengklik untuk mengembalikan ke halaman sebelumnya setelah kesalahan.

• Menyediakan Informasi Tambahan: Snackbar juga dapat memberikan informasi tambahan tanpa mengganggu alur utama aplikasi.

Perbedaan dengan Popup

Berikut adalah perbedaan antara Snackbar dan Popup:

• Tujuan Utama: Snackbar digunakan untuk memberikan feedback singkat atau meminta tindakan dari pengguna. Popup, di sisi lain, digunakan untuk menampilkan konten tambahan melayang di atas area utama tanpa menutupinya sepenuhnya.

• Penempatan: Snackbar biasanya muncul di bagian bawah layar, sedangkan Popup dapat ditempatkan di mana saja sesuai dengan kebutuhan.

• Karakteristik: Snackbar memiliki karakteristik transient, artinya biasanya akan hilang setelah beberapa detik atau ketika pengguna menekan tombol penutupnya. Popup dapat tetap muncul sampai ditutup oleh pengguna.

• Penggunaan: Snackbar digunakan untuk informasi singkat atau feedback setelah tindakan pengguna, sedangkan Popup lebih cocok untuk konten tambahan atau pilihan tambahan yang muncul di atas konten utama.

Kesimpulan

Snackbar adalah komponen yang baik untuk memberikan feedback singkat atau meminta aksi dari pengguna tanpa mengganggu pengalaman pengguna secara signifikan. Penggunaan Snackbar sebaiknya dipertimbangkan dalam situasi di mana pesan atau tindakan yang singkat dan langsung perlu disampaikan kepada pengguna.

Parameter/Atribut

@Composable
fun Snackbar(
    modifier: Modifier = Modifier,
    action: @Composable (() -> Unit)? = null,
    dismissAction: @Composable (() -> Unit)? = null,
    actionOnNewLine: Boolean = false,
    shape: Shape = SnackbarDefaults.shape,
    containerColor: Color = SnackbarDefaults.color,
    contentColor: Color = SnackbarDefaults.contentColor,
    actionContentColor: Color = SnackbarDefaults.actionContentColor,
    dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor,
    content: @Composable () -> Unit
)

Parameter pada Snackbar di Jetpack Compose

Berikut adalah penjelasan tentang parameter-parameter yang ada di komponen Snackbar pada Jetpack Compose:

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari Snackbar.

• action: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten dari aksi tambahan (biasanya sebuah tombol) di Snackbar. Opsional.

• dismissAction: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten dari aksi penutup (tombol "Tutup" atau "X") di Snackbar. Opsional.

• actionOnNewLine: Boolean

  • Menentukan apakah aksi tambahan (action) harus ditempatkan di baris baru. Defaultnya adalah false.

• shape: Shape

  • Bentuk dari Snackbar, seperti persegi panjang atau bulat. Defaultnya adalah SnackbarDefaults.shape.

• containerColor: Color

  • Warna latar belakang kontainer Snackbar. Defaultnya adalah SnackbarDefaults.color.

• contentColor: Color

  • Warna konten teks dalam Snackbar. Defaultnya adalah SnackbarDefaults.contentColor.

• actionContentColor: Color

  • Warna konten teks untuk aksi tambahan dalam Snackbar. Defaultnya adalah SnackbarDefaults.actionContentColor.

• dismissActionContentColor: Color

  • Warna konten teks untuk aksi penutup dalam Snackbar. Defaultnya adalah SnackbarDefaults.dismissActionContentColor.

• content: @Composable () -> Unit

  • Fungsi composable yang menentukan konten utama dari Snackbar.

Penjelasan

• modifier: Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari Snackbar.

• action, dismissAction: Fungsi composable untuk menentukan konten aksi tambahan dan aksi penutup dalam Snackbar. Jika tidak disediakan, Snackbar akan memunculkan aksi bawaan atau tidak sama sekali tergantung pada platform.

• actionOnNewLine: Menentukan apakah aksi tambahan (action) harus ditempatkan di baris baru atau tidak.

• shape, containerColor, contentColor, actionContentColor, dismissActionContentColor: Konfigurasi visual seperti bentuk, warna latar belakang, dan warna teks dari Snackbar.

• content: Konten utama dari Snackbar, berupa tampilan composable yang akan ditampilkan di dalam Snackbar.

Contoh

@Composable
fun DemoSnackbar(modifier: Modifier = Modifier) {
    val showSnackbar = remember {
        mutableStateOf(false)
    }

    Button(onClick = {
        showSnackbar.value = true
    }) {
        Text("Show Snackbar")
    }

    if (showSnackbar.value) {
      Snackbar (
          action = {
            Button(onClick = {
              showSnackbar.value = false
            }) {
              Text("Close")
            }
          },
      ){
        Text("Hello, The Ngoding!")
      }
    }
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video