Like in the previous part we have seen, how simple to list items using Epoxy Databinding.

In this post, we gonna use CustomView to list items on RecyclerView/EpoxyRecyclerView

Listing with Epoxy CustomView is very simple like we create CustomView in Android. We just need to add annotations to define Epoxy stuff

4. Show List using CustomView

Epoxy CustomView: ItemCustomView

package com.dastnaiqbal.epoxysample.customview

import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout
import android.widget.TextView
import com.airbnb.epoxy.ModelView
import com.airbnb.epoxy.TextProp
import com.dastnaiqbal.epoxysample.R

/**
 *
 * "Iqbal Ahmed" created on 05/09/2020
 */

@ModelView(autoLayout = ModelView.Size.MATCH_WIDTH_WRAP_HEIGHT)
class ItemCustomView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
    private val TAG = this::class.java.simpleName

    val textView: TextView

    init {
        val view = inflate(context, R.layout.itemcustomview, this)
        textView = view.findViewById(R.id.tv)
    }

    @TextProp
    fun setText(charSequence: CharSequence) {
        textView.text = charSequence
    }
}

As you can see in the above code, we haven’t done any fancy stuff, it’s a simple custom view, we create in Android.

The only thing we did for Epoxy is added annotation @ModelView and @TextProp. @ModelView generates EpoxyModel class which we can use in the Controller to set data. @TextProp generates few setText methods which will accept CharSequence, @StringRes, or Editable. same as TextView.setText().

Layout itemcustomview.xml

<?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="wrap_content">

    <TextView
        android:id="@+id/tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:padding="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="TextView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Now we just have to implement ItemCustomViewController to set all the data on EpoxyRecyclerView/RecyclerView, ItemCustomViewController is same like SimpleDatabindingController or SimpleViewHolderController

Controller ItemCustomViewController

package com.dastnaiqbal.epoxysample.customview

import com.airbnb.epoxy.TypedEpoxyController

/**
 *
 * "Iqbal Ahmed" created on 05/09/2020
 */
class ItemCustomViewController : TypedEpoxyController<List<String>>() {
    private val TAG = this::class.java.simpleName

    override fun buildModels(data: List<String>?) {
        data?.forEachIndexed { index, s ->
            itemCustomView {
                id(index)
                text(s)
            }
        }
    }
}

As you can it’s the same like other controllers which we have defined for databinding and viewholder, the only thing we can notice here is itemCustomView{} block

So we have defined our layout, our controller, now we just need to attach in RecyclerView

MainActivity.kt

package com.dastnaiqbal.epoxysample

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.dastnaiqbal.epoxysample.customview.ItemCustomViewController
import com.dastnaiqbal.epoxysample.databinding.SimpleDataBindingController
import com.dastnaiqbal.epoxysample.dataclass.SimpleDataController
import com.dastnaiqbal.epoxysample.viewholder.SimpleViewHolderController
import kotlinx.android.synthetic.main.activity_main.*

/**
 *
 * "Iqbal Ahmed" created on 22/08/2020
 */

class MainActivity : AppCompatActivity() {
    private val dataClassController by lazy {
        SimpleDataController()
    }

    private val viewHolderController by lazy {
        SimpleViewHolderController()
    }

    private val dataBindingController by lazy {
        SimpleDataBindingController()
    }

    private val customViewController by lazy {
        ItemCustomViewController()
    }

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

        /**
         * Listing using Data Clas
         */
//        rv.adapter = dataClassController.adapter
//        dataClassController.setData(ArrayList<String>().apply {
//            repeat(10) {
//                add("Item Data Class #$it")
//            }
//        })

        /**
         * Listing using ViewHolder
         */
//        rv.adapter = viewHolderController.adapter
//        viewHolderController.setData(ArrayList<String>().apply {
//            repeat(10) {
//                add("Item View Holder #$it")
//            }
//        })

        /**
         * Listing using Databinding
         */
//        rv.adapter = dataBindingController.adapter
//        dataBindingController.setData(ArrayList<String>().apply {
//            repeat(10) {
//                add("Item Databinding #$it")
//            }
//        })

        /**
         * Listing using CustomView
         */
        rv.adapter = customViewController.adapter
        customViewController.setData(ArrayList<String>().apply {
            repeat(10) {
                add("Item CustomView #$it")
            }
        })
    }
}

Congratulations You populated your list in Epoxy using CustomView as EpoxyModel.

In this post, we used Epoxy CustomView and Simple Controller,

In the Next post, we gonna use Pagination and we will see how pagination works in Epoxy?

SourceCode Link: https://github.com/DastanIqbal/EpoxySample/tree/epoxy/customview

Happy Coding !!