Membangun Layout Dasar pada Jetpack Compose (Column, Row, dan Box)
Halo folks! Pada artikel kali ini saya akan membahas mengenai dasar dalam menyusun layout dengan compose. Compose adalah framework UI deklaratif, sehingga dalam menyusun layout hal yang harus dikuasai tentu saja kotlin serta paradigma deklaratif, hal ini berbeda dengan metode sebelumnya saat menggunakan xml dengan paradigma imperatif. Anda bisa mengunjungi artikel Pengenalan Jetpack Compose agar lebih memahami perbedaan antara paradigma deklaratif dan imperatif.
Dengan paradigma deklaratif membuat proses pembuatan UI menjadi lebih mudah dan cepat, karena cukup mendeskripsikan tampilan yang diinginkan dalam sebuah Composable Function yang ditulis layaknya fungsi biasa dan compose akan menangani dibalik layar. Untuk mempermudah pemahaman mengenai konsep ini bayangkan saja bahwa Composable Function merupakan sekumpulan blok kode untuk membangun sebuah aplikasi. Sehingga ketika membangun UI pada aplikasi, kita harus berpikir layaknya bermain building block dengan menyatukan setiap bagian block untuk mendapatkan bentuk yang diinginkan.
Terdapat 3 komponen yang dapat digunakan untuk menyusun widget dengan compose:
- Column, digunakan untuk menyusun elemen widget secara vertical
- Row, digunakan untuk menyusun elemen widget secara horizontal
- Box, digunakan untuk menyusun object secara bertindihan
Untuk memahami lebih setiap komponen langsung saja kita praktikkan. Silahkan buat project dengan menggunakan menggunakan Compose Activity.
Saat menggunakan Column setiap child akan disusun secara vertikal. sebagai contoh mari buat ilustrasi dibawah ini. Terdapat 5 text sebagai childern dari column.
Maka code akan ditulis sebagai berikut :
- Buatlah sebuah Composable Function dengan shortcut comp dan tulis nama dari function yang akan digunakan.
2. Lalu tambahkan code Column dan 5 Text sebagai childern elemen.
@Composable
fun ColumnArrange() {
Column() {
Text(text = "Column1")
Text(text = "Column2")
Text(text = "Column3")
Text(text = "Column4")
Text(text = "Column5")
}
}3. Selanjutnya panggil ColumnArrange funtion sebagai setContent, seperti dibawah ini.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
PlayingWithComposeTheme{
Surface {
ColumnArrange()
}
}
}
}
}4. Sehingga code lengkapnya akan menjadi seperti dibawah ini.
5. Ketika dicompile akan menjadi seperti dibawah ini. Anda bisa mengunjungi Github Repository ini, dan pilih branch arrange-column.
Sedangkan saat menggunakan Row setiap child akan disusun secara horizontal. Sebagai contoh mari buat ilustrasi dibawah ini. Terdapat 5 text sebagai child dari Row.
Dan code akan ditulis sebagai berikut :
- Buat composable function dengan langkah yang sama seperti sebelumnya dengan nama RowArrange.
- Tambahkan code Row dan 5 Text sebagai children elemen.
@Composable
fun RowArrange(modifier: Modifier) {
Row(modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
Text(text = "Row1")
Text(text = "Row2")
Text(text = "Row3")
Text(text = "Row4")
Text(text = "Row5")
}
}3. Lalu panggil pada setContent dan codenya akan menjadi seperti dibawah ini.
4. Dan jika dicompile akan menjadi sebagai berikut, anda bisa mengunjungi Github Repository ini, dan pilih branch row-arrange.
Saat menggunakan Box setiap child akan disusun secara bertumpukan. Agar lebih jelas perhatikan code dibawah ini.
@Composable
fun BoxArrange(modifier: Modifier) {
Box(
modifier = modifier
.fillMaxHeight()
.fillMaxWidth(), contentAlignment = Alignment.Center
) {
Text(text = "Box 1")
Text(text = "Column 1")
Text(text = "Row 1")
Text(text = "Box 2")
Text(text = "Column 2")
}
}Selanjutnya panggil BoxArrange pada setContent dan compile maka hasilnya akan terlihat seperti dibawah ini, Anda bisa mengunjungi Github Repository ini dan pilih branch box-arrange.
Penjelasan diatas hanya seksdar pengantar, sekarang mari kita coba membangun sebuat layout sederhana dengan memanfaatkan 3 komponen yang sudah dijelaskan di atas. Berikut adalah expectation layout yang akan dibangun. Referensi ini saya dapat dari https://pin.it/vXXfCdQ.
Untuk memudahkan dalam menyusun layout perhatikan gambar dibawah ini.
Selanjutnya perhatikan langkah — langkah berikut ini :
- Tambahkan beberapa warna pada file color.kt
val Blue7EA1C4 = Color(0XFF7EA1C4)
val Blue87ACC9 = Color(0XFF87ACC9)
val Blue90AFCB = Color(0XFF90AFCB)
val Blue9EB6C2 = Color(0XFF9EB6C2)
val YellowBAC3C3 = Color(0XFFBAC3C3)
val YellowB9B4B0 = Color(0XFFB9B4B0)
val Black1D1D32 = Color(0XFF1D1D32)
val Black202A40 = Color(0XFF202A40)
val Orange805350 = Color(0XFF805350)
val PinkCEAEB1 = Color(0XFFCEAEB1)2. Buat sebuah composable function dengan nama Wallpaper serta parameter modifier seperti dibawah ini. Selanjutnya tambahkan komponen Column dengan beberapa attribut.
- Modifier, memberi tahu elemen UI cara menata, menampilkan, atau berperilaku dalam tata letak parent layout selain itu modifier mampu menghiasi atau menambahkan behaviour ke elemen UI.
- fillMaxWidth, mengatur lebar maksimal mirip dengan match_parent pada xml.
- fillMaxHeight, mengatur tinggi maksimal mirip dengan match_parent pada xml.
- bacground, mengatur warna background screen
@Composable
fun Wallpaper(modifier: Modifier) {
Column(
modifier = modifier
.fillMaxWidth()
.background(color = PinkCEAEB1)
.fillMaxHeight()
) {
}
}3. Lanjutkan untuk menambahkan code seperti dibawah ini, untuk menambahkan Time pada tampilan wallpaper.
Column(
modifier = modifier
.fillMaxWidth()
.background(color = PinkCEAEB1)
.fillMaxHeight()
) {
Box(
modifier = modifier
.fillMaxWidth()
.height(110.dp)
.background(color = Blue7EA1C4), contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "Wed 30 Sep | 09:30", fontSize = 20.sp, textAlign = TextAlign.Center)
Text(text = "30 °C Cloudy", textAlign = TextAlign.Center)
}
}
}
}
4. Tambahkan beberapa Box denga variasi warna dan tambahkan dibawah kode box time pada walllpaper seperti dibawah ini.
Box(
modifier = modifier
.fillMaxWidth()
.height(110.dp)
.background(color = Blue87ACC9)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(110.dp)
.background(color = Blue90AFCB)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(70.dp)
.background(color = Blue9EB6C2)
)
5. Terdapat gambar bangunan pada tampilan wallpaper, download asset gambar pada link berikut. Selanjutnya tambahkan image pada directory drawable. Jika diperhatikan lebih teliti gambar bangunan berada pada layer teratas, sehingga diperlukan Box sebagai container selanjuntya komponen paling bawah diisi oleh semua column dan di atasnya baru ditambahkan image. Codenya akan menjadi seperti dibawah ini.
Box(contentAlignment = Alignment.BottomEnd) {
Column() {
Box(
modifier = modifier
.fillMaxWidth()
.height(50.dp)
.background(color = YellowBAC3C3)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(40.dp)
.background(color = YellowB9B4B0)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(15.dp)
.background(color = Black1D1D32)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(30.dp)
.background(color = Black202A40)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(15.dp)
.background(color = Orange805350)
)
}
Image(
painter = painterResource(id = R.drawable.house),
contentDescription = null,
alignment = Alignment.CenterEnd,
modifier = modifier
.padding(end = 50.dp)
.width(215.dp),
contentScale = ContentScale.FillWidth
)
}Jika dicompile maka akan menjadi seperti berikut:
6. Tiba dibagian terakhir dari Wallpaper UI, pada bagian bawah dari UI ini terdapat circle color palette yang disusun secara horizontal. Sehingga Row dapat digunakan untuk kasus ini. Selain itu untuk lingakaran yang ditampilkan memiliki ukuran yang sama, perbedaannya hanya pada warna dari setiap lingkaran. Membuat sebuah funtion terpisah untuk lingkaran dengan parameter warna tentu akan mempermudah penyusunan komponen ini.
7. Buat sebuah composable function dengan nama CircleColor serta tambahkan parameter berupa color. Lalu gunakan canvas untuk membuats ebuah onjek lingakaran. Sehingga codenya akan menjadi seperti dibawah ini :
@Composable
fun CircleColor(modifier: Modifier, color: Color) {
Canvas(modifier = modifier.size(15.dp), onDraw = {
drawCircle(color = color)
})
}8. Langkah terakhir tambahkan Row pada Column utama selanjutnya panggil function CircleColor sebanyak jumlah lingkaran yang diinginkan dan tambahkan value untuk parameter modifier dan color. Maka codenya akan menjadi seperti berikut :
Row(
modifier = modifier
.fillMaxWidth()
.fillMaxHeight().padding(start = 30.dp, end = 30.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceEvenly
) {
CircleColor(modifier = modifier, color = Black1D1D32)
CircleColor(modifier = modifier, color = Black202A40)
CircleColor(modifier = modifier, color = Orange805350)
CircleColor(modifier = modifier, color = Blue90AFCB)
CircleColor(modifier = modifier, color = DarkCream)
}Sehingga keseluruhan code akan menjadi seperti dibawah ini.
Jika dicompile maka tampilan UI akan menjadi seperti dibawah ini. Anda bisa mengakses keseluruhan code pada Repository ini dan pilih branch wallpaper-app.
Sekian untuk artikel mengenai dasar membangun layout pada Jetpack Compose. Jangan lupa follow dan👏🏻 untuk artikel ini karena itu sangat berarti bagi saya agar lebih bersemangat menulis konten — konten berikutnya :). Sampai jumpa di artikel selanjutnya.
