Tutorial RecyclerView cuman 15 detik dengan FrogoRecyclerView cocok buat Prototype untuk Client / Tugas Kuliah

RecyclerView merupakan inti dari aplikasi android menurut penulis, kegunaan recyclerview yaitu menampilkan jumlah list yang banyak tanpa membuat aplikasi menjadi lelet.

Nah kali ini Penulis akan membuat Tutorial Recyclerview dengan cepat menggunakan library yang penulis buat, yaitu frogo-recycler-view.

Tutorial kali ini penulils menggunakan 3 bantuan library :

1. frogo-recycler-view (Library Recycler View)
2. frogo-ui-kit (Library untuk UI bantuan)

amirisback/frogo-recycler-view

amirisback/frogo-ui-kit

Oke langsung ke tutorialnya aja ya.

• Create New Project Android Studio
• Pilih empty project
• Tambahkan jitpack repository pada file build.gradle : project

maven { url 'https://jitpack.io' }

• Tambahkan dependency frogo-recycler-view yang ada di link diatas sesuai versi terbarunya pada file build.gradle : module. disini saya menggunakan bantuan frogo-ui-kit untuk bantuan template ui.

// library frogo-recycler-view
implementation 'com.github.amirisback:frogo-recycler-view:3.5.0'
// library frogo-ui-kit
implementation 'com.github.amirisback:frogo-ui-kit:1.0.5'

• Buat FrogoRecyclerView xml code pada file activity_main.xml, untuk bantuan frogo_dimen dan layout frogo_rv_list_type_1 itu berasal dari frogo-ui-kit. penulis menggunakan sample list recyclerview

<com.frogobox.recycler.widget.FrogoRecyclerView
    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:id="@+id/frogo_rv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/frogo_dimen_16dp"
    android:clipToPadding="false"
    tools:context=".MainActivity"
    tools:listitem="@layout/frogo_rv_list_type_1"/>

• Deklarasi ViewBinding UI activity_main.xml

• Kita buat kotlin data class Mahasiswa.kt yang berelemen val nama

data class Mahasiswa(
    val nama: String
)

• Setelah itu kita buat function untuk mengisi data class tersebut di MainActivity.kt

private fun listData(): MutableList<Mahasiswa> {
    val listString = mutableListOf<Mahasiswa>()
    listString.add(Mahasiswa("Muhammad Faisal Amir"))
    listString.add(Mahasiswa("Feronika Nur M"))
    listString.add(Mahasiswa("Dinda Nur Halisa"))
    listString.add(Mahasiswa("Muhammad Lukman Hakim"))
    return listString
}

• Buat Function setupFrogoRecyclerView untuk deklarasi frogo-recycler-view di MainActivity.kt

private fun setupFrogoRecyclerView() {

    val adapterCallback = object :
        IFrogoViewAdapter<Mahasiswa> {
        override fun setupInitComponent(view: View, data: Mahasiswa) {
            // Init component content item recyclerview
            view.findViewById<TextView>(R.id.frogo_rv_list_type_1_tv_title).text = data.nama
        }

        override fun onItemClicked(data: Mahasiswa) {
            // setup item clicked on frogo recycler view
        }

        override fun onItemLongClicked(data: Mahasiswa) {
            // setup item long clicked on frogo recycler view
        }
    }

    binding.frogoRv.injector<Mahasiswa>()
        .addData(listData())
        .addCustomView(R.layout.frogo_rv_list_type_1)
        .addEmptyView(null)
        .addCallback(adapterCallback)
        .createLayoutLinearVertical(false)
        .build()
}

• Terakhir panggil function setupFrogoRecyclerView() di function onCreate pada MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(LayoutInflater.from(this))
    setContentView(binding.root)
    setupFrogoRecyclerView()
}

• Beginilah keseluruhan MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(LayoutInflater.from(this))
        setContentView(binding.root)
        setupFrogoRecyclerView()
    }

    private fun listData(): MutableList<Mahasiswa> {
        val listString = mutableListOf<Mahasiswa>()
        listString.add(Mahasiswa("Muhammad Faisal Amir"))
        listString.add(Mahasiswa("Feronika Nur M"))
        listString.add(Mahasiswa("Dinda Nur Halisa"))
        listString.add(Mahasiswa("Muhammad Lukman Hakim"))
        return listString
    }

    private fun setupFrogoRecyclerView() {

        val adapterCallback = object :
            IFrogoViewAdapter<Mahasiswa> {
            override fun setupInitComponent(view: View, data: Mahasiswa) {
                // Init component content item recyclerview
                view.findViewById<TextView>(R.id.frogo_rv_list_type_1_tv_title).text = data.nama
            }

            override fun onItemClicked(data: Mahasiswa) {
                // setup item clicked on frogo recycler view
            }

            override fun onItemLongClicked(data: Mahasiswa) {
                // setup item long clicked on frogo recycler view
            }
        }

        binding.frogoRv.injector<Mahasiswa>()
            .addData(listData())
            .addCustomView(R.layout.frogo_rv_list_type_1)
            .addEmptyView(null)
            .addCallback(adapterCallback)
            .createLayoutLinearVertical(false)
            .build()
    }


}

• Sekarang saatnya mencoba, MARI KITA COBA !!!

Sudah itu saja tutorial dari penulis, untuk lengkapnya bisa langsung kunjungi link librarynya disana lengkap tutorialnya dijamin easy to use.

Untuk mempermudah pembaca penulis mengupload project tutorial diatas di github penulis, silahkan mencoba !!! XOXO

amirisback/mediumstory-frogo-recycler-view

Nah sekian dulu dari penulis, mudah mudahan dapat mencerahkan pengerjaan android kalian, semangat mengembangkan project kalian. XD

Silahkan kunjungi :

• Linkedin : linkedin.com/in/faisalamircs
• Instagram : instagram.com/faisalamircs
• GitHub : github.com/amirisback

Lets jump outside the box!!!