Friday, 6 January 2017

Android Populating Different View/Layout On RecyclerView's Item

Sometime on your recyclerview's item, you need to place different view/layout on each item. For example on item index 0 you need to place a form login and on item index 1 you need to place a form register, etc.


Okay, that's the imagine of how to place a different layout on recyclerview's item. Now we start the coding.

PREPARATION

Compile the following library on your build.gradle (app:module)

compile 'com.android.support:recyclerview-v7:25.0.0'

IMPLEMENTATION

This project place 3 different item on recyclerview's item. So first we create all the layout before start java code

1. activity_main.xml

2. view_input_usernamepassword.xml 

3. view_please_wait.xml

4. view_detail_usernamepassword.xml

After the layouts are finish, now we create all the java class that we used on this project. Start from :
 
1. ItemModel.java

In order program know that item index 0 for Layout A, item index 1 for Layout B and etc, you have to give an indicator in your Object/Mode/Data before transfer to your adapter.

In this project I put an index inside my model class as an indicator. The model namely as ItemModel.java. Paste the following code :

2. ViewAdapter.java

Like i explained above (on the first paragraph), you have to create you inner class in ViewHolder (Whatever how much it is). If you wanna put 4 different layout, so create 4 different inner class of ViewHolder.

After that, you should to extends RecyclerView.Adapter<RecyclerView.ViewHolder> and then implement all of its methods.

Which method that explain that index 1 for layout A and etc?

For that, you have to override method getItemViewType(int position) manually. Create the condition using if and else. On this method you will use the indicator of your model as the key.

@Override
public int getItemViewType(int position) {
    ItemModel item = mListItemModel.get(position);
    if(item.getIndex()==0){
        return 0;
    }else if(item.getIndex()==1){
        return 1;
    }else if(item.getIndex()==2){
        return 2;
    }
    return super.getItemViewType(position);
}

These index or number got from model that we input on MainActivity (explained later).

After you create the condition, in onCreateViewHolder(ViewGroup parent, int viewType) you have to create the condition using case (or anything that related!). The logic is, if method getItemViewType() return index x, than put Layout x. Take a look at the code follows :

To get that the layout x has been return on method onCreateViewHolder(ViewGroup parent, int viewType), you must use an instanceof on method onBindViewHolder(RecyclerView.ViewHolder holder, final int position) . Take a look at the following sample code :

I hope you'll understand how to steps to create a complex adapter like above. Here is the full code of ViewAdapter.java :

3. MainActivity.java

In this class, as usual, just to set the data, define the recyclerview and set the adapter's data to recyclerview. Here the full code of MainActivity.java :

That's all. Compile and run the project. Hope it works well. Thank you.


EmoticonEmoticon