(Bagian 2/2) : Membangun Landing Page Aplikasi GO-JEK dengan Jetpack Compose

Published in

Bootcampers

6 min readNov 11, 2021

Lanjutan dari membuat landing page dari aplikasi GO-JEK menggunakan Jetpack Compose.

Pada bagian yang kedua ini kita akan membuat tampilan yang ada di home screen dari gopay section sampai feed nya. Nanti akan ada cara penggunaan dari Card, Image, dan lain lain yang perlu kalian pelajari di Jetpack Compose.

Sebelumnya kita perlu library untuk menampilkan image atau gambar dari internet atau network image. Kalau biasanya kalian pake glide atau picasso di android native sekarang ada library yang namanya Landcapist.

Sebenarnya landcapist mengambil inti dari glide atau picasso yang dimodifikasi agar bisa di implementasikan di jetpack compose. Jadi jika kalian ingin menggunakannya maka pilih glide, picasso, atau yang lainnya. Lihat di github.

🎉 Persiapin project

Ok kita persiapin lagi project Gojek Clone kita

Pertama install package Landcapist-nya

dependencies {
    implementation "com.github.skydoves:landscapist-glide:1.4.1"
}

Setelah di sync gradle lalu…

2. Download resource drawable di github

Yang kedua ini, penting karena nanti akan digunakan ditampilannya. Silahkan download disini. Resource tersebut berisi icon dan gambar yang dibutuhkan nantinya di section gopay.

3. Buat data dummy untuk list data dari feed nya

Setelah itu, untuk data pada feednya saya membuat data dummy beserta data model nya supaya nanti bisa mudah digunakan. Silahkan download disini

Membuat Gopay Section

Langkah kedua di bagian ini setelah persiapan adalah membuat tampilan section gopay. Di tampilan ini akan ada penggunaan komponen Card, Image, Row, Column, Text, dan Icon. Kita buat dulu Card yang bagian pertama yang berwarna biru terlebih dahulu

@Composable
fun GopaySection() {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(16.dp),
        backgroundColor = Color(0xff0081a0)
    ){
        
    }
}

Kode diatas terdapat function Card, yang diisi dengan Modifier.fillMaxWidth, ini akan membuat width card memenuhi paretnya sama seperti match parent. Kemudian supaya radius dari pojok card sedikit tumpul, maka pada properti shape di set dengan RoundedCornerShape(16.dp) itu akan memberi radius sebesar 16 dp.

Setelah itu didalamnya card, kita buat Row(). Karena nantinya konten akan berdimensi horizontal.

Row(
    modifier = Modifier.padding(
horizontal = 16.dp, vertical = 12.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceEvenly
){}

Pada Modifiernya saya set padding horizontal 16 dp dan vertikal 12 dp supaya tidak terlalu mepet dengan Card-nya. Lalu supaya konten berada ditengah, pada properti verticalAlignment set dengan Alignment.CenterVertically yang akan membuat konten rata tengah secara vertical. Lalu arrangement atau susunan dibuat space evenly supaya konten berjarak sama dengan konten lainnya walaupun berbeda ukuran lebar layar.

Nantinya ada 4 elemen yang ada didalam row ini. Yuk kita buat one by one 😄

Card(shape= RoundedCornerShape(10.dp)){
    Column(modifier = Modifier.padding(bottom = 8.dp, start = 12.dp, end = 12.dp)) {
        Image(
            modifier = Modifier
                .width(100.dp)
                .height(32.dp),
            painter = painterResource(id = R.drawable.gopay_logo),
            contentDescription = null,
        )
        Text("Rp.567.541", style = TextStyle(fontWeight = FontWeight.Bold))
        Text("Klik & cek Riwayat", style = TextStyle(color = Green500))
    }
}

Nah pada elemen yang pertama ialah saldo gopay. Di bagian ini akan menampilkan gambar logo dari Gopay yang sudah kalian download di persiapan projek tadi. Pertama kita buat dulu card nya dengan shape 10 dp supaya rada lengkung.

Lalu didalamnya, kita buat Column() supaya tampilannya vertikal. Kemudian untuk menampilkan logo dari gopay kita gunakan composable function Image(). Kita set height dan width nya menggunakan modifier, lalu untuk memanggil gambar dari resource, set properti painter dengan painterResource lalu masukan id nya.

Setelah itu ada 2 Text yang berisi nilai saldo terakhir dan link.

Spacer(modifier = Modifier.width(8.dp))Column(horizontalAlignment = Alignment.CenterHorizontally){
    Image(painter = painterResource(id = R.drawable.ic_pay), contentDescription = null)
    Spacer(modifier = Modifier.height(8.dp))
    Text("Bayar")
}

Fungsi Spacer disini memberi jarak pada konten yang ada diatasnya, sebenarnya fungsi spacer tak hanya itu. Ini hampir sama dengan SizedBox pada Flutter, yang sering kali dipakai untuk membuat konten kosong dengan ukuran tertentu untuk memberi jarak.

Lalu pada Column untuk menampilkan icon bayar + textnya.

Spacer(modifier = Modifier.width(8.dp))Column(horizontalAlignment = Alignment.CenterHorizontally){
    Image(painter = painterResource(id = R.drawable.ic_topup), contentDescription = null)
    Spacer(modifier = Modifier.height(8.dp))
    Text("Top up")
}Column(horizontalAlignment = Alignment.CenterHorizontally){
    Image(
        painter = painterResource(id = R.drawable.ic_explore),
        contentDescription = null,
        modifier = Modifier
            .width(24.dp)
            .height(24.dp)
    )
    Spacer(modifier = Modifier.height(8.dp))
    Text("Bayar")
}

Setelah itu function GopaySection panggil di function HomeScreen supaya ketika dirunning nanti tampil. Lalu ketika di running maka tampilannya akan seperti ini

Buat List dan Komponen Chip

Sebelum kita buat chip nya kita buat function Column() supaya tertata kebawah. Supaya children rata ke kiri maka alignment nya diset ke start. Kemudian untuk title section nya aku buat Text dengan fontSize 24 lalu ketebalan Bold

@Composable
fun HomeContentSection() {

    Column( horizontalAlignment = Alignment.Start ) {
        Text(
            text = "Konten buat kamu",
            style = TextStyle(
                fontWeight = FontWeight.Bold,
                fontSize = 24.sp
            )
        )
        Spacer(modifier = Modifier.height(8.dp))
        
    }
}

OK, kita buat chip item nya dengan membuat base composable function nya di package components. Function ini akan kita pake di List nya nanti biar performa aplikasi tidak terlalu berat jadi kita sendirikan

@Composable
fun BaseChip(selected: Boolean, text: String, modifier: Modifier = Modifier) {
    Surface(
        color = when {
            selected -> Green500
            else -> Color.Transparent
        },
        contentColor = when {
            selected -> MaterialTheme.colors.onPrimary
            else -> Color.LightGray
        },
        shape = CircleShape,
        border = BorderStroke(
            width = 1.dp,
            color = when {
                selected -> MaterialTheme.colors.primary
                else -> Color.LightGray
            }
        ),
        modifier = modifier
    ) {

        Text(
            text = text,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.padding(8.dp)
        )

    }
}

Setelah itu untu membuat list secara horizontal, kita menggunakan composable function LazyRow(). LazyRow ini merupakan kotlin dsl, disini ada items yang memiliki properti count dan itemContent, count adalah size itemnya sementara itemContent merupakan Unit yang berisi item dari list tersebut disini saya isi dengan BaseChip()

LazyRow(
    modifier = Modifier.padding(vertical = 8.dp)
) {
    items(
        count = contents.size,
        itemContent = { index ->
            BaseChip(selected = contents[index].id == 1, text = contents[index].type, modifier = Modifier.padding(8.dp))
        }
    )
}

Ketika dirunning akan terlihat seperti dibawah ini..

Tampilan Feed

Seperti biasa sebelum membuat sesuatu list kita buat item nya terlebih dahulu, kenapa di pisah pertama lebih terstruktur kedua performa lebih cepat karena setiap composable function akan dirender, jika banyak composable function dijadikan satu function maka itu artinya ketika di render hanya satu kali.

Pada fungsinya aku set parameter itemnya menggunakan data class ContentForYou nantinya akan dijadikan konten untuk composable didalamnya. Lalu didalamnya ada Card() untuk menampilkan tampilan material card.

Didalamnya ada Column supaya tampilan lurus ke bawah.

@Composable
fun ContentListItem(content: ContentForYou) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 16.dp),
        shape = RoundedCornerShape(14.dp)
    ) {
        Column {
            GlideImage(
                imageModel = content.imageUrl,
                contentScale = ContentScale.Crop,
            )
            Text(content.title, style = MaterialTheme.typography.h6, modifier = Modifier.padding(horizontal = 14.dp))
            Text(content.shortDesc, modifier = Modifier.padding(horizontal = 14.dp))
        }
    }
}

Untuk menampilkan image dari url maka menggunakan GlideImage() dari library landscapist. Ada properti imageModel, ini diisi image url. Lalu contentScale ini berfungsi untuk penskalaan image. Supaya pas dengan ukuran maka saya set dengan ContentScale.Crop

Lalu….

Tinggal tambahkan saja ke LazyColumn(), oh iya compose ini berfungsi untuk menampilkan list yang vertikal. Sama dengan LazyRow, ini juga menyediakan kotlin dsl items, yang didalamnya ada 2 properti: 1.) size dari kontennya 2.) item nya itu sendiri dengan mengembalikan index

LazyColumn {
    items(
        count = contents.size,
        itemContent = { index -> ContentListItem(contents[index])}
    )
}

✅ Penutup

Berikut tampilannya ketika dirunning di device android, hanya landing page saja, sementara halaman chat dan promo masih belum dibuat

Jika kalian ingin berkontrobusi, langsung saja ke repositori berikut:

https://github.com/farhanroy/compose-gojek-clone

Terima kasih 🎉