Jetpack Compose, Android • 21 Mei 2024

Jetpack Compose - RoundedCornerShape

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

RoundedCornerShape di Jetpack Compose

RoundedCornerShape adalah salah satu jenis Shape dalam Jetpack Compose yang merepresentasikan bentuk dengan sudut-sudut yang dibulatkan. Shape ini digunakan untuk memberikan tampilan elemen UI dengan sudut-sudut yang tidak tajam.

Kapan Harus Menggunakan RoundedCornerShape?

Elemen UI dengan Sudut Terbulat: Gunakan RoundedCornerShape ketika Anda ingin menggambar elemen UI dengan sudut-sudut yang tidak tajam atau dibulatkan, seperti card, kotak input, atau tombol.
Desain yang Lebih Ramah: Bentuk dengan sudut terbulat sering digunakan dalam desain UI untuk menciptakan tampilan yang lebih ramah dan kurang formal.
Adaptasi dengan Desain Eksisting: Jika desain grafis atau elemen UI lain dalam aplikasi menggunakan sudut terbulat, RoundedCornerShape membantu dalam konsistensi dan penampilan keseluruhan.

Perbedaan dengan CircleShape

Bentuk: CircleShape merepresentasikan bentuk lingkaran atau bulat sempurna, sementara RoundedCornerShape merepresentasikan bentuk dengan sudut-sudut yang dibulatkan.
Penggunaan: CircleShape digunakan khusus untuk elemen UI dengan bentuk lingkaran atau bulat, sedangkan RoundedCornerShape lebih umum digunakan untuk elemen UI dengan sudut-sudut yang tidak tajam.
Estetika: CircleShape memberikan tampilan yang lebih konsisten dalam hal lingkaran, sedangkan RoundedCornerShape memungkinkan untuk lebih banyak variasi dalam bentuk sudut-sudut.

Contoh

@Composable
fun DemoRoundedCornerShape(modifier: Modifier = Modifier) {
    Column(modifier = Modifier) {
        Box(
            modifier = modifier.background(Color.Blue)
        ) {
            Text(text = "The Ngoding", color = Color.White, modifier = Modifier.padding(16.dp))

        }
        Spacer(modifier = Modifier.padding(8.dp))
        Box(
            modifier = modifier.background(Color.Blue, RoundedCornerShape(10.dp))
        ) {
            Text(text = "The Ngoding", color = Color.White, modifier = Modifier.padding(16.dp))

        }
    }
}

navigationbar