Jetpack Compose - CutCornerShape

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

CutCornerShape di Jetpack Compose

CutCornerShape adalah salah satu jenis Shape dalam Jetpack Compose yang merepresentasikan bentuk dengan sudut-sudut yang dipotong secara diagonal. Shape ini digunakan untuk memberikan tampilan elemen UI dengan sudut-sudut yang terpotong.

Kapan Harus Menggunakan CutCornerShape?

• Desain yang Berani dan Unik: Gunakan CutCornerShape ketika Anda ingin menciptakan elemen UI dengan tampilan yang berani dan berbeda dari bentuk standar. Sudut-sudut yang terpotong memberikan tampilan yang modern dan dinamis.

• Elemen Visual yang Membedakan: CutCornerShape dapat digunakan untuk menonjolkan elemen tertentu dalam UI, seperti tombol, card, atau gambar, dengan cara yang tidak konvensional.

• Menonjolkan Identitas Brand: Jika identitas visual brand atau tema aplikasi Anda mengutamakan garis-garis tegas dan sudut-sudut terpotong, CutCornerShape bisa membantu menciptakan konsistensi dalam desain.

Perbedaan dengan CircleShape dan RoundedCornerShape

• Bentuk:

  • CircleShape merepresentasikan bentuk lingkaran atau bulat sempurna.
  • RoundedCornerShape merepresentasikan bentuk dengan sudut-sudut yang dibulatkan.
  • CutCornerShape merepresentasikan bentuk dengan sudut-sudut yang terpotong secara diagonal.

• Penggunaan:

  • CircleShape digunakan khusus untuk elemen UI dengan bentuk lingkaran atau bulat.
  • RoundedCornerShape digunakan untuk elemen UI yang membutuhkan sudut-sudut yang dibulatkan, menciptakan tampilan yang lebih lembut.
  • CutCornerShape digunakan untuk menciptakan tampilan yang tegas dan modern dengan sudut-sudut yang terpotong.

• Estetika:

  • CircleShape memberikan tampilan yang konsisten dalam bentuk lingkaran.
  • RoundedCornerShape memberikan tampilan yang lebih ramah dengan sudut-sudut yang dibulatkan.
  • CutCornerShape memberikan tampilan yang dinamis dan berani dengan sudut-sudut yang terpotong.

Contoh

@Composable
fun DemoCutCornerShape(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, CutCornerShape(10.dp))
        ) {
            Text(text = "The Ngoding", color = Color.White, modifier = Modifier.padding(16.dp))

        }
    }
}

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

Video