Pratama Nur Wijaya Blog

Berkenalan dengan Jetpack Compose

2022-07-23T02:00:00+00:00

Pada pengembangan sebuah aplikasi android untuk membuat user interfacenya kita biasanya akan menggunakan syntax xml sebagaimana yang dikenalkan oleh Google sejak framework android muncul, namun pada akhir ini Google mengeluarkan sebuah cara baru untuk membuat user interface dengan konsep Declarative UI yaitu Jetpack Compose. Pada artikel ini akan membahas mengenai Jetpack Compose dari perspektif Android View XML yang sebelumnya ada.

Dari View berubah menjadi @Composable

Pada Jetpack Compose setiap component yang akan dirender pada screen, akan dibuat menjadi sebuah Kotlin Unit function dan diberi tanda anotasi @Composable sebagi berikut

@Composable
fun Article(title: String, desc: String){
    Card {
        Column {
            Text(title)
            Spacer(Modifier.height(10.dp)
            Text(desc)
        }
    }
}

Fungsi diatas disebut sebagai composable, contoh fungsi diatas akan menampilkan Card dengan title dan description, dengan jarak diantaranya 10.dp.

Setiap title dan description berubah, UI akan terupdate sesuai dengan nilainya. Proses ini pada Jetpack Compose disebut dengan recomposition.

Sebuah composable function hanya bisa dipanggil dari fungsi composable lain. Jika ingin memanggil sebuah composable function pada Activity, kita bisa memanggilnya seperti ini :

class SuperActvity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // composables function dipanggil disini
        }
    }
}

Contoh diatas kita dapat memanggil composables function didalam method setContent {} yang mana method ini berasal dari class ComponentActivity, sedangkan untuk Fragment kita membutuhkan ComposeView, contoh :

class MyFragment : Fragment() {
    override fun onCreateView(
        ....
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // composables function dipanggil disini
            }
        }
    }
}

Listener dan Atribute dengan Modifiers

Ketika menggunakan view, sudah umum kita akan menemukan atribute-atribute yang biasa ada pada view misalkan, click dan touch listener, evelation, alpha, dll. Jetpack compose mengenalkan konsep Modifier yang mana feature ini memberikan fungsionality pada composable tanpa harus terikat dengan composables lainnya, contoh modifier yang dapat digunakan untuk mengubah style composable adalah background(), border(), clip() shadow(), alpha(). sedangkan untuk mengubah posisi dan ukuran composables bisa menggunakan fillMaxWidth(), size(), heightIn(), padding() lalu modifier yang bisa digunakan untuk menambah functionality sebuah composables seperti click, dragging contohnya clickable(), draggable(), toggleable(),swipeable()

Untuk dokumentasi lengkap fungsi Modifier dapat dicek pada halaman berikut

Dari ViewGroups menjadi Rows, Column, Box, LazyColumn, LazyRow

Untuk membuat sebuah UI pada Jetpack Compose kita bisa memulai dari composables function yang biasa digunakan seperti Column, Row, Box, LazyColumn, LazyRow. Fungsi-fungsi composables ini memiliki parameter yang dapat menerima fungsi composables lain.

Kemudian untuk mengatur aligment Horizontal ataupun Vertical, kita bisa menggunakan Column atau Row. Selain itu jika sebelumnya terbiasa dengan atribute layout_weight yang ada diLinearLayout, pada Jetpack Compose juga memiliki fungsi yang sama yaitu modifier weight(), contoh penggunaan

Row {
    Text("Judul")
    Spacer(Modifier.weight(1f)
    Text("1 jam yang lalu")
}

Sedangkan Box pada Jetpack Compose ini merupakan pengganti untuk FrameLayout, dengan Box kita bisa mengatur posisi setiap composables satu dengan lainnya menggunakan modifier align sama halnya ketika menggunakan FrameLayout dengan atribute gravity nya, contoh pada Jetpack Compose

Box {
    Image(
        painter = painterResource(R.drawable.some_image)
    )
    Text(
        "Desc"
        modifier = Modifier
            .padding(4.dp)
            .align(Alignment.BottomEnd),
    )
}

Recyclerview pada Jetpack Compose diganti dengan LazyColumn dan LazyRow, column ini untuk vertical scrolling, sedangkan row untuk yang horizontal scrolling, contoh

val data = listOf("")

LazyColumn(Modifier.fillMaxSize()) {

    items(data) { item ->
        Text(
                item,
                modifier = Modifier.padding(vertical = 10.dp, horizontal = 8.dp)
            )
    }
}

Handling business logic pada Composables function

Sebuah composables function akan selalu merepresentasikan sebuah element pada screen (contoh avatar) atau bisa juga merepresentasikan sebuah halaman utuh, pada Jetpack Compose ada sebuah istilah yang dinamakan (state hoisting)[https://developer.android.com/jetpack/compose/state#state-hoisting] sebuah pattern untuk handle state pada sebuah composables yang mana tujuannya adalah agar sebuah function composables menjadi stateless

Umumnya pattern ini akan selalu memiliki :

value: T : nilai yang akan ditampilkan pada composables
onValueChange: (T) -> Unit : sebuah event yang akan digunakan untuk mengubah value, dimana T adalah value baru yang akan disimpan

@Composable
fun HelloScreen() {
    var name by rememberSaveable { mutableStateOf("") }

    HelloContent(name = name, onNameChange = { name = it })
}

@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Hello, $name",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.h5
        )
        OutlinedTextField(
            value = name,
            onValueChange = onNameChange,
            label = { Text("Name") }
        )
    }
} 

Pada contoh diatas, composables HelloContent memiliki 2 parameter,

name : sebagai value
onNameChange: event untuk mengubah value name

Pada kode diatas, composables HelloContent sama sekali tidak akan menyimpan data pada scope functionsya, function HelloContent sudah menjadi sebuah stateless function, setiap perubahan data nama akan dibawa ke-atas (hosting) yakni ke composables HelloScreen

Cheatsheet

References

https://www.composables.co/blog/compose-intro
https://developer.android.com/jetpack/compose/documentation

Apa itu Corutines Dispatchers ?

2021-06-15T02:00:00+00:00

Artikel kali ini kelanjutan dari pembahasan sebelumnya terkait Coroutines, kali ini saya akan coba membahas mengenai Dispatchers, dengan Dispatcher kita bisa menentukan Thread yang akan digunakan untuk menjalankan Coroutine. Berikut ini adalah list Dispatchers yang ada pada Kotlin Coroutines :

Dispatchers.Default

Dispatcher ini akan digunakan ketika kita memanggil sebuah coroutine tanpa menentukan dispatcher yang akan digunakan, dispatcher ini menggunakan shared pool thread yang ada pada JVM, dan secara default jumlah maximum threadnya sama dengan jumlah core processor. Biasa digunakan untuk task yang berkaitan dengan computation.

Dispatchers.IO

Dispatcher yang didesain untuk task yang bersifat IO, dispatcher ini juga menggunakan shared pool thread, dengan catatan jumlah thread yang digunakan untuk task pada dispatcher ini dilimit sesuai dengan value yang ada pada “kotlinx.coroutines.io.parallelism”, by default akan dilimit pada 64 thread atau jumlah core processor (yang paling besar yang akan digunakan).

Dispatchers.Main

Dispatcher yang didesain untuk digunakan main thread (proses UI), dan biasanya berupa single thread, untuk android sendiri selain ada Dispatcher.Main ada juga Dispatcher.Main.immediate, bedanya dengan dispatcher.main biasa adalah coroutine function yang menggunakan dispatcher.main.immediate ini akan jalan duluan dibanding dengan coroutines function yang menggunakan dispatcher main.

contoh :

hasilnya akan print Third statement terlebih dahulu, padahal kode untuk print first statement ada diatas kode third statement

Dispatchers.Unconfined

Dispatcher ini agak beda dengan dispatchers lainnya, jika menggunakan dispatchers ini, coroutine function kita akan dijalankan langsung ke Thread yang saat ini sedang digunakan. Biasanya digunakan ketika sedang melakukan testing.

Kesimpulan

untuk menjalankan code pada UI Thread, gunakan Dispatcher.Main.Immediate
untuk background thread bisa menggunakan Dispatcher.Default atau Dispatcher.IO
dispatcher.unconfined tidak digunakan pada android apps, tidak ada usecase yang cocok

Jadi itulah artikel mengenai Coroutine Dispatchers, semoga bermanfaat. Thanks

Pengalaman belanja via Aliexpress dan bayar pajak

2021-02-19T02:00:00+00:00

Pada kesempatan kali ini saya akan berbagi pengalaman tentang belanja part keyboard dialiexpress dan cara membayar pajaknya, bulan lalu saya coba membeli keycap yang dijual dialiexpress, berikut ini tampilan halaman tokonya

Untuk pengiriman saya memilih menggunakan Aliexpress Standard Shipping dengan biaya hanya Rp3,000 saja, order saya lakukan ditanggal 22 January, dan untuk metode pembayaran bisa menggunakan indomaret/alfamaret, tapi saya memilih menggunakan akun Doku saya, dan pada tanggal 25 status order saya berubah menjadi dispatch

Kurang lebih butuh waktu sampai 2 minggu barang pesanan saya tersebut sampai dijakarta, owh iya untuk tracking posisi kiriman saya ada dimana, saya menggunakan website https://ems.posindonesia.co.id/, berikut tampilan halaman ems

ketika barang telah tiba di Indonesia, dan masuk ke bagian bea cukai, dari tim bea cukai akan melakukan pemeriksaan, apakah harga barang ini telah melebihi batas harga barang yang wajib dikenakan pajak, batasnya untuk saat ini adalah USD3, dan lucunya adalah ketika saya menerima paket saya, dan melihat catatan pengirimannya, dari seller aliexpress declare harga barangnya adalah 3$, padahal nyatanya lebih dari itu

Dari sini kemungkinan yang saya bisa simpulkan adalah, seller aliexpress terbiasa undervalue harga barang yang dikirim ke Indonesia, maka dari itu ketika barang saya sampai di Indonesia dan masuk bea cukai, team bea cukai menghubungi saya untuk menyiapkan document berikut

invoice yang menunjukkan harga barang + biaya kirim
link pembelian
bukti bayar

selanjutnya dari team bea cukai akan menentukan berapa pajak yang harus dibayarkan, perhitungannya adalah 17,5% dari harga barang + biaya kirim, yang mana 10% adalah PPN, 7,5% adalah bea masuk dengan catatan ini saya submit no NPWP saya, jika tidak ada NPWP biayanya bisa lebih besar lagi, jika tidak salah ingat PPN menjadi 20%

lalu team bea cukai akan memberikan kode billing, yang akan kita gunakan untuk membayar pajak tersebut, ada 2 opsi cara membayarnya

1 - bayar sendiri melalui ecommerce, atau 2 - bayar ke bapak pos yang mengantar barang kita

jika kalian bayar sendiri, maka jangan lupa print bukti pembayarannya, karena ketika bapak pos mengantar paket dia belum paham kalo pajaknya sudah saya bayar, jadi berikan saja bukti bayar pajaknya, dan ada biaya handling buat POS nya juga, punya saya cuma Rp5000 biaya administrasi pos. dan total pajak yang harus saya bayar dari harga barang yang saya beli 530rb adalah 99rb cukup fair lah :)))

dari qualitynya dengan harga segitu, cukup lumayan, dan materialnya hanyalah pbt, perbandingan dengan boxnya gmk dari uniqey

dari gmk pun sekarang jarang yang memberikan tray plastik,

jika dibandingkan ketebalannya memang jauh, lebih tebal abs nya gmk

Namun tetap cakep kalo dah dipasang dikeyboard

so far untuk experience ngetiknya masih enak ketika pakai keycap gmk, emang harga tidak bohong sih :))

jadi begitulah pengalaman saya membeli barang lewat aliexpress dan bayar pajaknnya.

Sekian, dan terimakasih

Mengatasi Kotlin Android Extensions Deprecated dengan Android ViewBinding

2021-01-16T02:00:00+00:00

Kotlin Android Extensions merupakan sebuah plugins yang sudah lama saya gunakan, semenjak aktif menggunakan Kotlin untuk membuat aplikasi android saya selalu menggunakan plugin ini, tujuannya adalah untuk memudahkan inisiasi sebuah View pada aplikasi android.

Namun pada akhir tahun lalu, Google mengumumkan bahwa Kotlin Android Extensions ini statusnya menjadi Deprecated dan akan digantikan oleh ViewBinding, hal ini dimulai sejak update android studio 4.1 keatas (versi kotlin 1.4.20), bila kalian masih menggunakan KotlinAndroidExtensions dan kalian akan melihat pesan error seperti ini

Penjelasan lengkap kenapa kotlin android extensions deprecated bisa dibaca di blognya Google berikut ini https://android-developers.googleblog.com/2020/11/the-future-of-kotlin-android-extensions.html

Lalu penggantinya adalah ViewBinding, owh ya sebelum lebih lanjut ViewBinding ini tidak sama dengan DataBinding yang sebelumnya telah diperkenalkan, untuk menggunakan ViewBinding, caranya mudah berikut langkah-langkahnya

Update build.gradle

buka file app/build.gradle lalu tambahkan kode berikut

Contoh penggunaan pada Activity

semisal kita punya file layout seperti ini

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_satu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_dua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_satu" />
</androidx.constraintlayout.widget.ConstraintLayout>

dari layout diatas, ViewBinding akan mengenerate file bernama ActivityMainBinding

setiap file layout xml akan digenerate dengan Pascal Format dengan tambahan kata Binding dibelakangnya, selain itu field namenya juga akan digenerate dengan CamelCase Format misal sebelumnya idnya adalah btn_dua setelah digenerate akan menjadi btnDua

lalu untuk menggunakannya didalam Activity kita perlu menulis kode seperti berikut

selanjutnya untuk mengakses field yang ada pada layout kita bisa menulis seperti ini

Contoh penggunaan pada Fragment

lalu bagaimana jika digunakan pada fragment ? contoh, kita punya layout fragment seperti ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SampleFragment">


    <EditText
        android:id="@+id/input_name"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="90dp"
        android:hint="Input Name" />

    <Button
        android:id="@+id/btn_hitme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/input_name"
        android:layout_centerHorizontal="true"
        android:text="Hit Me" />

</RelativeLayout>

kita bisa akses seperti ini

Bonus

Akan cukup merepotkan jika setiap membuat activity/fragment lalu harus melakukan ritual setup ViewBinding seperti diatas, maka dari itu kita bisa membuat sebuah Base Class yang nantinya bisa kita extends ke class fragment/activity yang kita buat, berikut ini base class yang telah saya buat

Activity

abstract class BaseActivityBinding<T : ViewBinding> : AppCompatActivity() {

    private var _binding: ViewBinding? = null
    abstract val bindingInflater: (LayoutInflater) -> T

    @Suppress("UNCHECKED_CAST")
    protected val binding: T
        get() = _binding as T

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        _binding = bindingInflater.invoke(layoutInflater)
        setContentView(requireNotNull(_binding).root)
        setupView(binding)
    }

    abstract fun setupView(binding: T)

    override fun onDestroy() {
        super.onDestroy()
        _binding = null
    }

}

contoh penggunaan

class HomePageActivity : BaseActivityBinding<ActivityHomeBinding>() {

    override val bindingInflater: (LayoutInflater) -> ActivityHomeBinding
        get() = ActivityHomeBinding::inflate

    override fun setupView(binding: ActivityHomeBinding) {
            // call view 
    }


}

Fragment

abstract class BaseFragmentBinding<T : ViewBinding> : Fragment() {

    private var _binding: T? = null
    private val binding get() = _binding!!

    abstract val bindingInflater: (LayoutInflater, ViewGroup?, Boolean) -> T

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = bindingInflater.invoke(inflater, container, false)
        return requireNotNull(_binding).root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        setupView(binding)
    }

    abstract fun setupView(binding: T)

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

contoh penggunaan pada fragment

class ListNewsFragment : BaseFragmentBinding<FragmentListNewsBinding>() {

    override val bindingInflater: (LayoutInflater, ViewGroup?, Boolean) -> FragmentListNewsBinding =
        FragmentListNewsBinding::inflate

    override fun setupView(binding: FragmentListNewsBinding) = with(binding) {
        // setupRecyclerview
        rvListNews.layoutManager = LinearLayoutManager(requireActivity())
        rvListNews.adapter = listNewsAdapter

    }

}

Sekian artikel kali ini, semoga bermanfaat

Tutorial android : Retrofit dan Coroutines

2020-02-24T02:00:00+00:00

Intro

Pada artikel ini saya akan membahas bagaimana caranya menggunakan coroutines dan retrofit secara bersamaan, dengan menggunakan coroutines apa yang kita dapatkan ? kita tidak perlu lagi menggunakan callback

sebelum menggunakan coroutines

sesudah menggunakan coroutines

Implementation

Pada contoh ini saya akan coba buat apps sederhana dengan flow diagram sebagai berikut

hal pertama yang perlu ditambahkan adalah dependency coroutines dan retrofit, tambahkan baris berikut pada file app/build.gradle

selanjutnya untuk api, saya menggunakan api https://jsonplaceholder.typicode.com/todos/1 untuk demo, saya simpan dalam sebuah file bernama Webservices.kt

kemudian untuk class repository saya buat seperti ini

selanjutnya tinggal memanggil class repository tersebut dari activity atau fragmentnya, pertama kita harus implementasi CoroutineScope terlebih dahulu, agar bisa menggunakan builder launch untuk coroutines,

selanjutnya untuk pemanggilan repositorynya kita perlu memanggilnya didalam builder launch seperti ini

withContext(Dispatchers.IO) disini digunakan untuk memastikan bahwa repository.getTodo dijalankan di coroutine dengan context Dispatchers.IO

Integration ViewModel

lalu bagaimana jika ingin dipanggil melalu ViewModel ? pertama perlu implement dependency terlebih dahulu,

pada library tersebut terdapat builder untuk viewModel, kita tinggal memanggilnya dengan perintah viewModelScope otomatis langsung dapat menjalankan coroutines didalam viewmodel

Error Handling

Untuk error handling coroutines bisa menggunakan try catch, contoh seperti ini

contoh kode lengkap dapat diakses pada repo berikut ini

Basic Coroutines

Apa itu coroutines

Apa itu Kotlin Coroutines ? Bagian 2

2020-02-20T05:00:00+00:00

Menjalankan Coroutines

Untuk menjalankan coroutines kita membutuhkan Coroutines Builder beberapa coroutines builder

runBlocking
launch
async

runBlocking

Builder paling simple yang dapat digunakan namun tidak disarankan untuk digunakan di production code, builder ini akan memblocking thread yang sedang berjalan sampai fungsi coroutines yang ada didalamnya selesai dikerjakan

online-compiler

import kotlinx.coroutines.*

fun main() {
    print("Halo") 
    
    runBlocking {
        delay(3000L)
    }
    
    print("Dunia")
}

pada contoh diatas ketika program dijalankan akan langsung memuncullkan text “Halo” lalu akan ada jeda selama 3 detik kemudian baru memunculkan text “Dunia”

launch

Builder satu ini adalah builder yang cocok untuk mengerjakan suatu task secara async, atau lebih dikenal dengan istilah “Fire n Forget”, contoh penggunaan builder launch

online-compiler

import kotlinx.coroutines.*

fun main() {
    
    GlobalScope.launch {
        delay(1000L)
        print("Dunia")
    }
    
    println("Halo")
    
    runBlocking {
        delay(2000L)
    }
}

program pertama kali akan menjalankan coroutines yang ada didalam builder launch, karena saya beri delay selama 1 sec, maka akan ada jeda waktu, ketika jeda tersebut program tetap menjalankan perintah selanjutnya yaitu print Helo, maka program akan menampilkan text Helo, kemudian ketika jeda 1 sec telah terlampui maka tampilan text Dunia akan muncul, runblocking pada akhir program digunakan untuk memastikan jvm masih tetap hidup sehingga muncul semua textnya, jika tidak dilakukan delay maka yang tampil hanya text Halo

async

Builder ini digunakan ketika kita membutuhkan kembalian nilai dari sebuah suspend function, contohnya seperti ini

online-compiler

import kotlinx.coroutines.*

fun main() {
    
   val result: Deferred<String> = GlobalScope.async {
        delay(2000L)
        "Dunia"
    }

    runBlocking {
        print("Halo ${result.await()}")
    }
}

pada baris 11, perintah print akan menunggu result tersedia dulu yang mana result adalah hasil dari builder function di baris 5, caranya adalah dengan menambahkan “.await()”

Apa itu Kotlin Coroutines ?

2020-02-20T02:00:00+00:00

Pada artikel ini saya akan menulis tentang Coroutines, apa itu Coroutines ? Coroutines adalah cara untuk mengatasi masalah concurrency atau async programming, penjelasan simplenya mengupbah pemanggilan async code menjadi seperti sync code, contoh seperti ini

Retrofit

Retrofit + Coroutines

Kotlin teams sendiri menyebut coroutines adalah lightweight thread, jadi coroutines ini mirip thread tapi ada perbedaannya, persamaan antara coroutines dan thread adalah :

sama-sama sequence of instruction
multiple coroutines atau thread dapat dijalankan secara concurent
multiple coroutines atau thread sharing resource memory

dan untuk perbedaannya adalah :

coroutines disebut lightweight thread
coroutines jalan diatas thread

Penjelasan mengenai lightweight thread, thread biasanya dibandingkan dengan lamanya waktu yang digunakan untuk pemrosesan data, jadi lightweight thread adalah thread yang membutuhkan waktu lebih singkat dalam pemrosesannya sedangkan heavyweight thread adalah kebalikannya butuh waktu lebih banyak untuk pemrosesannya. Dan selain itu thread akan selalu dihandle oleh operating system sedangkan coroutines dihandle oleh user.

Coroutines tidak hanya ada pada bahasa pemrograman kotlin, namun juga ada dibahasa lain seperti C#, Scala, Clojure dan lain-lain.

Ada 2 jenis coroutines yaitu :

Stackless
Stackfull

Kotlin menggunakan coroutines yang berjenis stackless. link terkait stackless & stackfull link

Pada android coroutines dapat digunakan untuk mengatasi 2 problem utama :

Menghandle heavy task yang dapat menghalangi main thread sehingga mengakibatkan aplikasi lagging
Memberikan keamanan ketika memanggil heavy task dari main thread contoh : networking, write ke database

Contoh Coroutine

Diatas adalah contoh kode kotlin yang menggunakan coroutines, jika kode tersebut dijalankan maka akan menghasilkan sebagai berikut :

Halooo
Dunia . . .

Pada contoh diatas, pada kode 1 saya menggunakan GlobalScope.launch apakah ini ? untuk menjalankan coroutine dibutuhkan Coroutine Scope dan pada contoh diatas saya menggunakan GlobalScope yang berarti lifecycle coroutinenya mengikuti lifecycle seluruh aplikasi.

pada no 2 saya memanggil suspending function untuk melakukan delay selama 2sec, pada no 3 saya outputkan text, jika program dijalankan maka yang akan muncul pertama kali adalah kode no 4 hal ini karena kode 1 dijalankan pada coroutine, apabila kita tidak menuliskan Thread.sleep(2000) yang mana maksudnya adalah untuk mempause thread selama 2 sec, maka program tidak akan pernah menampilkan kata Dunia . . .

Bersambung

Apa itu coroutines bagian 2

Mengatasi adb android no permission user in plugdev pada Linux

2019-10-23T02:00:00+00:00

Pada artikel kali ini saya akan membahas bagaimana cara solving masalah adb no permission pada sistem operasi linux, contoh pada gambar dibawah ini, saat saya mencoba menjalankan perintah adb devices ternyata tidak berjalan dengan bagaimana semestinya.

Berbekal hasil googling akhirnya mendapatkan solusi, dari solusi itu saya coba tulis ulang dalam bahasa indonesia untuk keperluan dokumentasi dimasa mendatang.

Langkah pertama adalah mencari vendor id dari device android yang saya gunakan menggunakan perintah lsusb

dari perintah tersebut vendor id = 2d95

selanjutnya adalah membuat udev rule, disini saya menggunakan text editor gedit

$ sudo gedit /etc/udev/rules.d/51-android.rule

lalu masukkan kode berikut

SUBSYSTEM=="usb", ATTRS{idVendor}=="2d95", MODE="0666"

dimana idVendor disesuaikan dengan id vendor device anda

selanjutnya adalah reload rule

$ sudo udevadm control --reload-rules

lalu reconnect device anda dan check ulang menggunakan perintah adb devices

Sekian catatan singkat darisaya,

Terimakasih.

Tutorial Android : Membuat Image Slider Carousel Dengan RecyclerView

2018-07-26T05:00:00+00:00

Pada artikel sebelumnya sudah saya bahas bagaimana membuat recyclerview dengan library groupie, dan pada artikel tersebut saya juga memberikan pernyataan bahwa groupie juga dapat mempermudah kita untuk membuat view yang memiliki banyak type atau case multiviewtype dengan recyclerview.

contohnya seperti apa ? misal halaman homepage aplikasi e-commerce yang ada di Indonesia, misal bukalapak

untuk bagian yang saya beri tanda nomor, itu kita akan pisah atau buatkan viewtypenya sendiri, misal untuk nomor 1 viewtypenya saya berinama BannerCarouselItem lalu untuk nomor 2 saya beri nama ProductCategoryItem, selanjutnya ? mari kita mulai coba buat

Untuk kode yang saya gunakan, saya masih menggunakan kode pada artikel sebelumnya, pertama kita buat dulu untuk view banner carouselnya, apabila diperhatikan carousel tersebut terdiri dari

viewpager (gambar yang dapat berpindah)
viewpagerindicator (yang berbentuk bulat2 kecil bagian kiri bawah)
sebuah button kecil ada pada bagian kanan

Persiapan layout

langkah pertama kita perlu membuat view untuk carousel banner kita, buat sebuah layout xml beri nama item_carousel_banner.xml

lalu isinya

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              xmlns:attrs="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagerBanner"
        android:layout_width="match_parent"
        android:layout_height="@dimen/banner_height"
        android:focusableInTouchMode="true"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.rd.PageIndicatorView
            android:id="@+id/indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            app:piv_animationType="scale"
            app:piv_dynamicCount="true"
            app:piv_selectedColor="@color/colorPrimary"
            app:piv_unselectedColor="@color/gray_700"
            attrs:piv_padding="12dp"
            attrs:piv_radius="8dp"/>

        <Button
            android:id="@+id/btnSemuaPromo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="16dp"
            android:text="Semua Promo"
            android:textSize="12sp"
            />
    </RelativeLayout>


</LinearLayout>

pada layout ini untuk indicator saya menggunakan library dari https://github.com/romandanylyk/PageIndicatorView, pastikan untuk terlebih dahulu menambahkan library tersebut ke file app/build.gradle

Persiapan Model

untuk modelnya saya membuat seperti ini

data class BannerPromo(val name: String,
                       val image: String)

Item Layout

lalu untuk item layout groupie saya buat menjadi seperti ini

interface BannerListener {
    fun onSeeAllPromoClick()
    fun onBannerClick(promo: BannerPromo)
}

class BannerCarouselItem(private val banners: List<BannerPromo>,
                         private val supportFragmentManager: FragmentManager,
                         private val listener: BannerListener) : Item() {

    override fun bind(viewHolder: ViewHolder, position: Int) {
        val viewPagerAdapter = BannerAdapter(supportFragmentManager, banners)
        viewHolder.itemView.viewPagerBanner.adapter = viewPagerAdapter
        viewHolder.itemView.indicator.setViewPager(viewHolder.itemView.viewPagerBanner)

        viewHolder.itemView.btnSemuaPromo.setOnClickListener {
            listener.onSeeAllPromoClick()
        }
    }

    override fun getLayout(): Int = R.layout.item_carousel_banner
}

saya tambahkan interface untuk click listener button lihat semua promo, lalu di class inilah saya juga melakukan inisiasi untuk banner adapter,

banner adapter disini digunakan untuk menampilkan fragment bannernya sendiri yang berisi gambar promo

class BannerAdapter(fragmentManager: FragmentManager,
                    private val banners: List<BannerPromo>) : FragmentPagerAdapter(fragmentManager) {

    override fun getItem(pos: Int): Fragment {
        return BannerFragment.newInstance(banners[pos].image)
    }

    override fun getCount(): Int = banners.size

}

class BannerFragment : Fragment() {

    companion object {
        /**
         * new instance pattern for fragment
         */
        @JvmStatic
        fun newInstance(url: String): BannerFragment {
            val newsFragment = BannerFragment()
            val args = Bundle()
            args.putString("img", url)
            newsFragment.arguments = args
            return newsFragment
        }
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_banner, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val url = arguments?.getString("img")

        url.let {
            Picasso.get().load(url).into(imgBanner)
        }
    }


}

fungsi fragment ini adalah untuk menampilkan view/gambar promo banner yang akan kita passing melalui banner adapter, untuk layoutnya sendiri seperti ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="@dimen/banner_height"
                tools:context=".BannerFragment">

    <ImageView
        android:id="@+id/imgBanner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>

</RelativeLayout>

Gabungkan semua di activity

lalu selanjutnya tinggal menggabungkan bagian-bagian yang telah kita buat di class activity yang akan digunakan, kurang lebih masih sama dengan artikel saya sebelumnya tentang groupie library,

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val promos = listOf(
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                ),
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                ),
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                )
        )

        rvMain.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = groupAdapter
        }

        // declare banner carousel
        val bannerCarouselItem = BannerCarouselItem(promos, supportFragmentManager, this)


        groupAdapter.add(bannerCarouselItem)
    }

pertama inisiasi dulu data promo, selanjutnya tinggal kita inisiasi item untuk banner carousel, lalu terakhir set ke groupAdapter , hasil akhir bisa dilihat di video berikut

selanjutnya adalah membuat item berbentuk grid untuk menampilkan produk-produk yang dijual, pertama buat dulu layout untuk grid category product ini, buat file xml item_product_category.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:fontFamily="@font/roboto"
        android:text="Product category"
        android:textColor="@color/textPrimary"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvProductCategory"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

    </android.support.v7.widget.RecyclerView>
</LinearLayout>

Class item ProductCategoryItem

class ProductCategoryItem(private val groupAdapter: GroupAdapter<ViewHolder>) : Item() {

    override fun bind(viewHolder: ViewHolder, position: Int) {
        val dimenDp = viewHolder.itemView.context.resources.getDimensionPixelSize(R.dimen._2sdp)
        val column = 3

        viewHolder.itemView.rvProductCategory.apply {
            adapter = groupAdapter
            layoutManager = GridLayoutManager(viewHolder.itemView.context, column)
            addItemDecoration(GridItemDecoration(dimenDp, column))
        }
    }

    override fun getLayout(): Int = R.layout.item_product_category
}

class ini untuk handle gridlayout product categorynya, disini saya menggunakan recyclerview untuk menampilkan secara grid, dan juga saya menambahkan itemdecoration agar sedikit rapi

class GridItemDecoration(private val mSizeGridSpacingPx: Int, private val mGridSize: Int) : RecyclerView.ItemDecoration() {

    private var mNeedLeftSpacing = false

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        val frameWidth = ((parent.width - mSizeGridSpacingPx.toFloat() * (mGridSize - 1)) / mGridSize).toInt()
        val padding = parent.width / mGridSize - frameWidth
        val itemPosition = (view.layoutParams as RecyclerView.LayoutParams).viewAdapterPosition
        if (itemPosition < mGridSize) {
            outRect.top = 0
        } else {
            outRect.top = mSizeGridSpacingPx
        }
        if (itemPosition % mGridSize == 0) {
            outRect.left = 0
            outRect.right = padding
            mNeedLeftSpacing = true
        } else if ((itemPosition + 1) % mGridSize == 0) {
            mNeedLeftSpacing = false
            outRect.right = 0
            outRect.left = padding
        } else if (mNeedLeftSpacing) {
            mNeedLeftSpacing = false
            outRect.left = mSizeGridSpacingPx - padding
            if ((itemPosition + 2) % mGridSize == 0) {
                outRect.right = mSizeGridSpacingPx - padding
            } else {
                outRect.right = mSizeGridSpacingPx / 2
            }
        } else if ((itemPosition + 2) % mGridSize == 0) {
            mNeedLeftSpacing = false
            outRect.left = mSizeGridSpacingPx / 2
            outRect.right = mSizeGridSpacingPx - padding
        } else {
            mNeedLeftSpacing = false
            outRect.left = mSizeGridSpacingPx / 2
            outRect.right = mSizeGridSpacingPx / 2
        }
        outRect.bottom = 0
    }
}

Layout untuk tiap product item

selanjutnya perlu juga untuk membuat layout untuk tiap icon productnya, saya membuat item_product.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:padding="16dp">

    <ImageView
        android:id="@+id/productImage"
        android:layout_width="80dp"
        android:layout_height="80dp"/>

    <TextView
        android:id="@+id/productName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:fontFamily="@font/roboto"
        android:text="Badai Uang"
        android:textColor="@color/textPrimary"/>

</LinearLayout>

lalu untuk class itemnya sebagai berikut

interface ProductListener {
    fun onProductClicked(product: Product)
}

class ProductItem(private val product: Product,
                  private val listener: ProductListener) : Item() {

    override fun bind(viewHolder: ViewHolder, position: Int) {
        viewHolder.itemView.productName.text = product.name
        Picasso.get().load(product.img).into(viewHolder.itemView.productImage)

        viewHolder.itemView.setOnClickListener {
            listener.onProductClicked(product)
        }
    }

    override fun getLayout(): Int = R.layout.item_product

}

lalu langkah terakhir ubah class activity menjadi seperti berikut

class MainActivity : AppCompatActivity(), HeroListener, BannerListener, ProductListener {

    // declare adapter from groupadapter
    private var groupAdapter = GroupAdapter<ViewHolder>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val promos = listOf(
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                ),
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                ),
                BannerPromo(name = "Puncak badai uang",
                        image = "https://s2.bukalapak.com/uploads/promo_partnerinfo_bloggy/2842/Bloggy_1_puncak.jpg"),
                BannerPromo(
                        name = "hati hati ada guncangan badai uang",
                        image = "https://s4.bukalapak.com/uploads/promo_partnerinfo_bloggy/5042/Bloggy_1.jpg"
                )
        )

        val products = listOf(
                Product(name = "Steam",
                        img = "http://www.stickpng.com/assets/images/58aefdc2c869e092af51ee6f.png"),
                Product(name = "Starbucks",
                        img = "https://news.starbucks.com/uploads/images/Logo/_preview/Starbucks_Logo_Hi-res.jpg"),
                Product(name = "Steam",
                        img = "http://www.stickpng.com/assets/images/58aefdc2c869e092af51ee6f.png"),
                Product(name = "Starbucks",
                        img = "https://news.starbucks.com/uploads/images/Logo/_preview/Starbucks_Logo_Hi-res.jpg"),
                Product(name = "Steam",
                        img = "http://www.stickpng.com/assets/images/58aefdc2c869e092af51ee6f.png"),
                Product(name = "Starbucks",
                        img = "https://news.starbucks.com/uploads/images/Logo/_preview/Starbucks_Logo_Hi-res.jpg"),
                Product(name = "Steam",
                        img = "http://www.stickpng.com/assets/images/58aefdc2c869e092af51ee6f.png"),
                Product(name = "Starbucks",
                        img = "https://news.starbucks.com/uploads/images/Logo/_preview/Starbucks_Logo_Hi-res.jpg"),
                Product(name = "Steam",
                        img = "http://www.stickpng.com/assets/images/58aefdc2c869e092af51ee6f.png"),
                Product(name = "Starbucks",
                        img = "https://news.starbucks.com/uploads/images/Logo/_preview/Starbucks_Logo_Hi-res.jpg")
        )



        rvMain.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = groupAdapter
        }

        // declare banner carousel
        val bannerCarouselItem = BannerCarouselItem(promos, supportFragmentManager, this)
        groupAdapter.add(bannerCarouselItem)

        Section().apply {
            add(makeProductCategory(products))
            groupAdapter.add(this)
        }
    }

    private fun makeProductCategory(products: List<Product>): ProductCategoryItem {
        val productItemGroupAdapter = GroupAdapter<ViewHolder>()
        products.map {
            productItemGroupAdapter.add(ProductItem(it, this))
        }
        return ProductCategoryItem(productItemGroupAdapter)
    }

    override fun onProductClicked(product: Product) {
        Toast.makeText(this, "clicked ${product.name}", Toast.LENGTH_SHORT).show()
    }

    override fun onSeeAllPromoClick() {
        Toast.makeText(this, "see all promo", Toast.LENGTH_SHORT).show()
    }

    override fun onBannerClick(promo: BannerPromo) {
    }

    override fun onHeroClick(hero: Hero) {
        Toast.makeText(this, "hero clicked ${hero.name}", Toast.LENGTH_SHORT).show()
    }
}

hasil akhirnya akan seperti berikut ini

untuk source code code diatas bisa diakses ke https://github.com/pratamawijaya/SimpleRecyclerviewKotlin/tree/homepage

jangan lupa share, dan semoga bermanfaat

Tutorial Android : Membuat Recyclerview secara simple menggunakan Groupie

2018-07-26T02:00:00+00:00

Setelah pada artikel-artikel sebelumnya kita belajar membuat recyclerview di android, kali ini saya akan membahas bagaimana cara membuat recyclerview lebih simple dan cepat, cepat disini maksudnya adalah proses membuatnya tidak lama, kenapa saya bilang lama ? karena untuk membuat sebuah recyclerview kita melalui beberapa tahapan sebagai berikut :

membuat recyclerview
membuat adapter
membuat holder
membuat layout item

Salah satu cara agar ketika membuat recyclerview lebih simple dan cepat adalah dengan menggunakan library, salah satunya adalah Groupie.

Groupie adalah library yang membantu kita untuk menghandle recyclerview yang kompleks, cara menggunakan library ini, langkah2nya adalah :

Menambahkan Dependency

tambahkan

implementation 'com.xwray:groupie:2.1.0'

selain itu groupie juga memiliki module untuk kotlin dan kotlin android extension, yang membuat kalian tidak akan perlu menulis ViewHolder lagi, cara setupnya tinggal tambahkan

implementation 'com.xwray:groupie-kotlin-android-extensions:2.1.0'

Deklarasi adapter

langkah pertama kita perlu mendeklarasi GroupAdapter, groupadapter ini sebenarnya adalah RecyclerView.Adapter yang langsung bisa kalian gunakan ke RecyclerView kalian

val groupAdapter = GroupAdapter<ViewHolder>()
recyclerview.adapter = groupadapter

Deklarasi Item

lalu selanjutnya buat class untuk assign value ke tiap itemnya

class HeroItem(private val hero: Hero) : Item() {

    override fun bind(viewHolder: ViewHolder, position: Int) {
        viewHolder.itemView.txtHeroName.text = hero.name
        Picasso.get().load(hero.image).into(viewHolder.itemView.imgHeroes)
    }

    override fun getLayout(): Int = R.layout.item_hero
}

method getLayout ini adalah layout apa yang akan digunakan untuk tiap itemnya, lalu method bind ini adalah dimana kalian dapat meng-set value ke tiap-tiap itemnya

Set adapter ke Recyclerview

Selanjutnya adalah bagaimana menggunakan item ini ke recyclerview dan adapter yang sudah dideklarasi sebelumnya

class MainActivity : AppCompatActivity(), HeroListener {

    // declare adapter from groupadapter
    private var groupAdapter = GroupAdapter<ViewHolder>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val listHeroes = listOf(
                Hero(name = "Spider-Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/9/30/538cd33e15ab7/standard_xlarge.jpg"),
                Hero(name = "Black Panther", image = "https://i.annihil.us/u/prod/marvel/i/mg/1/c0/537ba2bfd6bab/standard_xlarge.jpg"),
                Hero(name = "Iron Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/a0/55b6a25e654e6/standard_xlarge.jpg"),
                Hero(name = "Dead Pool", image = "https://i.annihil.us/u/prod/marvel/i/mg/5/c0/537ba730e05e0/standard_xlarge.jpg"),
                Hero(name = "Captain Marvel", image = "https://i.annihil.us/u/prod/marvel/i/mg/c/10/537ba5ff07aa4/standard_xlarge.jpg"),
                Hero(name = "Ant Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/90/54ad7297b0a59/standard_xlarge.jpg"),
                Hero(name = "Spider-Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/9/30/538cd33e15ab7/standard_xlarge.jpg"),
                Hero(name = "Black Panther", image = "https://i.annihil.us/u/prod/marvel/i/mg/1/c0/537ba2bfd6bab/standard_xlarge.jpg"),
                Hero(name = "Iron Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/a0/55b6a25e654e6/standard_xlarge.jpg"),
                Hero(name = "Dead Pool", image = "https://i.annihil.us/u/prod/marvel/i/mg/5/c0/537ba730e05e0/standard_xlarge.jpg"),
                Hero(name = "Captain Marvel", image = "https://i.annihil.us/u/prod/marvel/i/mg/c/10/537ba5ff07aa4/standard_xlarge.jpg"),
                Hero(name = "Ant Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/90/54ad7297b0a59/standard_xlarge.jpg")
        )

        // inisiasi recyclerview layout manager dan adapter
        rvMain.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = groupAdapter
        }

        // looping hero
        listHeroes.map {
        	// masukkan hero ke groupadater
            groupAdapter.add(HeroItem(it))
        }
    }

    override fun onHeroClick(hero: Hero) {
        Toast.makeText(this, "hero clicked ${hero.name}", Toast.LENGTH_SHORT).show()
    }
}

kode diatas adalah kode yang saya gunakan di artikel sebelumnya, kuncinya untuk memasukkan tiap item ke recyclerview adalah pada kode groupAdapter.add(HeroItem(it))

simple, cepat dan mudah untuk dicustom, misal kita memiliki multi view type, tinggal kita buatkan class item untuk view tersebut, contoh saya buat satu lagi class Item

class HeroSecondItem(private val hero: Hero) : Item() {

    override fun bind(viewHolder: ViewHolder, position: Int) {
        viewHolder.itemView.txtHeroName.text = hero.name
        Picasso.get().load(hero.image).into(viewHolder.itemView.imgHeroes)
    }

    override fun getLayout(): Int = R.layout.item_hero_second
}

yang saya bedakan disini adalah layoutnya, untuk second item ini LinearLayout orientation saya ubah menjadi horizontal, hasilnya adalah

untuk item dengan nama awal “D” maka akan menggunakan item dengan layout orientation horizontal,

kode pada tutorial ini dapat diunduh di link-github

Pratama Nur Wijaya Blog

Berkenalan dengan Jetpack Compose

Dari View berubah menjadi @Composable

Listener dan Atribute dengan Modifiers

Dari ViewGroups menjadi Rows, Column, Box, LazyColumn, LazyRow

Handling business logic pada Composables function

Cheatsheet

Apa itu Corutines Dispatchers ?

Dispatchers.Default

Dispatchers.IO

Dispatchers.Main

Dispatchers.Unconfined

Kesimpulan

Pengalaman belanja via Aliexpress dan bayar pajak

Mengatasi Kotlin Android Extensions Deprecated dengan Android ViewBinding

Update build.gradle

Contoh penggunaan pada Activity

Contoh penggunaan pada Fragment

Bonus

Activity

Fragment

Tutorial android : Retrofit dan Coroutines

Intro

Implementation

Integration ViewModel

Error Handling

Basic Coroutines

Apa itu Kotlin Coroutines ? Bagian 2

Menjalankan Coroutines

runBlocking

launch

async

Apa itu Kotlin Coroutines ?

Contoh Coroutine

Mengatasi adb android no permission user in plugdev pada Linux

Tutorial Android : Membuat Image Slider Carousel Dengan RecyclerView

Persiapan layout

Persiapan Model

Item Layout

Banner Adapter untuk viewpager

Fragment untuk gambar banner

Gabungkan semua di activity

Class item ProductCategoryItem

Layout untuk tiap product item

Tutorial Android : Membuat Recyclerview secara simple menggunakan Groupie

Menambahkan Dependency

Deklarasi adapter

Deklarasi Item

Set adapter ke Recyclerview