(Bagian 1/2) : Membangun Landing Page Aplikasi GO-JEK dengan Jetpack Compose
Artikel ini berisi tutorial bagaimana membuat tampilan landing page aplikasi GOJEK menggunakan Jetpack Compose. Bagi kalian yang belum mengerti saya akan beri sedikit penjelasan tentang Jetpack Compose. Jadi jetpack compose adalah toolkit UI untuk pengembangan aplikasi android native
Sebenarnya saya sudah buat videonya di youtube namun kali ini saya juga membuat versi mediumnya, jadi saya hanya akan mengulang tentang kodingan UI nya. Video itu tanpa suara dan durasi video yang cepat karena speed code tujuannya sih supaya yang download video itu nggak besar file ny a hehe :)
berikut linknya https://www.youtube.com/watch?v=4j5EInqe284&list=PLMnhJNFGrO3mlv_uaQvaNAbjKRTGiKVf4
Ok langsung saja dibagian yang pertama ini akan ada persiapan project, kemudian membuat backdrop scaffold (nanti kita bahas), buat tab layout sama text box untuk search. Mungkin untuk kodingan tidak terlalu persis dengan yang divideo karena artikel ini dibuat lebih baru dan biasanya ada perubahan beberapa API.
Source code lengkapnya ada disini
Persiapan project Jetpack Compose
Sebelum kita ke tutorial kodingnya, persiapkan dulu untuk projectnya. Apa aja yang perlu dipersiapkan ? Pertama install dulu software Android Studio versi 2020.3.1 atau newest. Jangan lupa install android SDK nya yang terbaru juga 😬. Jika kalian belum punya bisa download disini.
Jika sudah selesai semua lanjut buat project baru dengan klik New Project ➝ pilih Empty Compose Activity.
Sesudah memilih, klik next dan isilah konfigurasi projectnya sesuai keinginan anda. Sesudah itu kalian akan diarakan ke window projectnya, tunggu hingga proses download gradledan librarySelesai (Lumayan lama kalau internet anda lemah).
Note: Disini saya nggak jelasin lebih detail dari struktur project compose, saya lebih fokus ke building ui nya.
Membuat Backdrop Scaffold
Pertama di UI aplikasi gojek terdapat tampilan backdrop di halaman landing nya. Bagi kalian yang belum tahu, backdrop adalah bagian komponen dari material design 2.0 yang menampilkan card dan background yang bertumpuk, untuk lebih jelasnya cek disini.
Buat package baru didalam package ui dengan nama screens. Didalam package ini nantinya akan berisi tampilan dari tiap view, seperti promo, home, dan chat. Setelah itu, buat file kotlin bernama HomeView.kt.
Lanjut, buat composableFunctionnya. Jadi composable function ini berfungsi untuk memanggil dan menampung API jetpack compose dengan kata lain untuk memanggil fungsi jetpack compose seperti Column atau RowMaka harus dipanggil didalam composable function. Lihat ini
@ExperimentalMaterialApi
@Composable
fun HomeView() {
BackdropScaffold(
gesturesEnabled = false,
stickyFrontLayer = false,
backLayerContent = { },
appBar = {},
frontLayerContent = {
}
);
}Jetpack Compose menyediakan API untuk menampilkan Backdrop. Jadi kita tidak perlu membuat nya ulang. Oh ya, Fungsi ini experimental jadi harus diberi anotasi diatasnya. Ada beberapa properti yang disertakan di potongan kode diatas. gestureEnabled di set false agar card tidak bisa di swipe ke bawah atau ke atas. stickyFrontLayer di set false juga ini juga sama.
Properti backLayerContent saya terpaksa diikutkan karena wajib kalau nggak error (jadi dikosongin aja). properti appBar ini nantinya akan diisi dengan tab layoutnya. dan frontLayerContent itu tempat tampilan dari layer yang didepan.
Tab Layout
Setelah buat backdropnya kita lanjut ke pembuatan tab layout nya. Tab layout ini sedikit kita modifikasi karena material tidak menyediakan style yang seperti itu.
Pertama kita buat dulu masing masing dari screennya (chat, home, dan promo) untuk konten pada tab nya. Setiap screen kita isi saja dengan composable function kosong saja.
// ChatScreen.kt
@Composable
fun ChatScreen() {}// HomeScreen.kt
@Composable
fun HomeScreen() {}// PromoScreen.kt
@Composable
fun PromoScreen() {}
Setelah itu, buat enum class. Nantinya enum class ini akan di switch sebagai state screen untuk di screen apa saat ini. Jadi misal tab chat di select atau di pilih maka state akan menyimpan state AppScreen.Home, itu menunjukan bahwa halaman saat ini berada di home.
File AppScreen.kt diletakan di package sejajar dengan MainActivity. Berisi enum dari Promo, Home, dan Chat.
enum class AppScreen {
Promo, Home, Chat
}Kemudian buat package base didalam package ui. Di package ini berisi komponen yang nantinya banyak digunakan seperti tab bar. Kita buat Tab bar yang menampilkan baris dari item tab layoutnya.
@Composable
fun AppTabBar(
modifier: Modifier = Modifier,
children: @Composable (Modifier) -> Unit
) {
Row(modifier) {
children(
Modifier
.weight(1f)
.align(Alignment.CenterVertically)
)
}
}Setelah buat kontainer atau pembungkus untuk itemnya, kita buat item tab nya.
Setelah itu, kita gabungkan kedua fungsi dengan membuat fungsi HomeTabBar() di file HomeView.kt. Fungsi ini berisi 2 parameter, parameter pertama untuk mempassing lagi ke fungsi yang ada didalamnya dan yang kedua merupakan high order function untuk menghandle ketika tab dipilih.
@Composable
fun HomeTabBar(
tabSelected: AppScreen,
onTabSelected: (AppScreen) -> Unit
) {
AppTabBar(
modifier = Modifier.padding(top = 8.dp)
) {tabBarModifier ->
AppTabs(
modifier = tabBarModifier,
titles = AppScreen.values().map {it.name},
tabSelected = tabSelected,
onTabSelected = { newTab -> onTabSelected(AppScreen.values()[newTab.ordinal]) }
)
}
}Barulah kita implementasikan tab ke backdropnya. Pertama buat state untuk menyimpan data AppScreen tadi. Untuk lebih jelas tentang penggunaan state di Jetpack Compose kunjungi link ini.
var tabSelected by remember { mutableStateOf(AppScreen.Home) }Lalu isi Unit pada properti appBar dengan fungsi HomeTabBar. Parameter yang pertama merupakan state dan yang kedua memanfaatkan high order function ketika tab terpilih maka set state tabSelected dengan value kembaliannya.
appBar = {
HomeTabBar(
tabSelected = tabSelected,
onTabSelected = { tabSelected = it }
)
},Lalu pada frontLayerContent atau tampilan yang ada didepan, itu akan di control sesuai state tabSelected saat ini. Jika Promo maka akan menampilan composable function dari PromoScreen() dan seterusnya.
frontLayerContent = {
when(tabSelected){
AppScreen.Promo -> PromoScreen()
AppScreen.Home -> HomeScreen()
AppScreen.Chat -> ChatScreen()
}
}
Buatin SearchBox di Home Tab
Ok buat tab nya udah selesai, sekarang buat search pada tab home nya. Search box kita buat menggunakan Box(). Function ini hampir sama dengan container sekaligus stack pada flutter. Karena komponen yang ada di dalamnya akan ditumpuk
Dulu pernah ada function Stack() tapi dihapus belakangan di versi yang baru
Box(
modifier = Modifier
.width(270.dp)
.background(color = Color(0xFFF5F5F5), shape = CircleShape)
.padding(vertical = 8.dp, horizontal = 16.dp)
) {
Row {
Icon(Icons.Default.Search, contentDescription = null)
Spacer(modifier = Modifier.width(4.dp))
Text("Cari", style = TextStyle(color = Color.Gray))
}
}Box ini hanya berisi parameter untuk modifier. Jadi customize pake modifier dari panjang, background, hingga padding. Di background selain bisa ganti warna, juga bisa untuk membuat bentuk dari background itu sendiri seperti bulat menggunakan shape CircleShape
Row itu memposisikan elemen secara horizon. Didalamnya ada Icon, Spacer, Text. Jadi icon ini untuk menampilkan icon, owh iya di jetpack compose untuk menggunakan icon kita tak perlu panggil dari drawable (sama kayk flutter) jadi mereka menyidakan icon icon itu built in di library nya (tinggal pake) lebih lengkap kunjungi link ini.
Function Spacer, berguna untuk memberi jarak antara icon dengan text, kok nggak pake padding ? saya pengen pake spacer wkwk 🤣
Lalu Text untuk menampilkan text (harus string kalau bukan harus di convert dulu). Styling textnya pake TextStyle lalu dimasukan ke properti style: nya Text.
Penutup
Nah itu dia tutorial membuat ui gojek menggunakan jetpack compose. Artikel ini akan dilanjutkan ke bagian yang kedua dimana di leg kedua nanti akan dibahas membuat tampilan di Home Tab nya.
Jika kalian mengalami kesulitan, bingung, atau butuh resources dari project ini silahkan tonton video saya di sini. Atau bisa langsung ke source code di github nya
