Jetpack Compose, Android • 19 Mei 2024

Jetpack Compose - Toast

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

Toast adalah 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 Toast?

Toast cocok digunakan dalam beberapa situasi:

Memberikan Feedback: Toast dapat digunakan untuk memberi tahu pengguna tentang hasil tindakan mereka, seperti pesan berhasil terkirim atau data berhasil disimpan.
Menyediakan Informasi Singkat: Toast dapat memberikan informasi singkat tanpa mengganggu alur utama aplikasi.

Perbedaan dengan Snackbar

Berikut adalah perbedaan antara Toast dan Snackbar:

Penempatan: Snackbar biasanya muncul di bagian bawah layar, sedangkan Toast muncul di tengah bawah layar atau sesuai dengan penempatan default platform.
Waktu Tampil: Snackbar biasanya akan hilang setelah beberapa detik atau ketika pengguna menekan tombol penutupnya, sedangkan Toast biasanya tampil dalam beberapa detik dan menghilang secara otomatis.
Penggunaan: Snackbar digunakan untuk memberikan informasi singkat atau feedback setelah tindakan pengguna, sedangkan Toast lebih cocok untuk informasi singkat yang tidak memerlukan tindakan dari pengguna.

Kesimpulan

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

Contoh

@Composable
fun DemoToast(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    val showToast = remember {
        mutableStateOf(false)
    }

    Button(onClick = {
        showToast.value = true
    }) {
        Text("Show Toast")
    }

    if (showToast.value) {
       Toast.makeText(context, "Hello, The Ngoding!", Toast.LENGTH_SHORT).show()
        showToast.value = false
    }
}

Snackbar