Multiple View Type in RecyclerView in Android

Today I am focusing about the multiple view type in recyclerView.  RecyclerView provides many awesome feature to build awesome app.  In one of them is multiple view type RecyclerView.

Now the people wants app with complex layout and design with multiple view style. Users mind has changed they do not like single view recyclerView. They are like one place cover almost things in single design. So in this case multiple view type is play very important role to build this type of design and layout.

RecyclerView adapter provides the multiple view type according to your requirement. It will inflate only those view which is required that position.  In this article I am showing the four different type of view.  Here are the details.

1. Header View Type.
2. One Column View Type.
3. Two Column View Type.
4. Footer ViewType.

Header and footer is very common to add different View on top of Item of RecyclerView and Footer View you can add the bottom of the item of the recyclerView. In between you can change view type multiple types. Here in this example I used two different View Type One column and two column View type. Here is snap shot that helps to understand.





Ok sounds good. Lets check how you can make your adapter multiple view type.

build.gradle app level

apply plugin: 'com.android.application'
apply plugin: 'com.neenbedankt.android-apt'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.sunil.multityperecyclerview"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.0'
    testCompile 'junit:junit:4.12'

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

    compile 'com.jakewharton:butterknife:8.4.0'
    apt 'com.jakewharton:butterknife-compiler:8.4.0'

    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'de.hdodenhof:circleimageview:2.0.0'
    compile 'com.android.support:percent:25.0.0'
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    String imageUrl[] = Constant.image;
    String names[] = Constant.name;

    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        List list = getList();
        MultiTypeRecyclerAdapter adapter = new MultiTypeRecyclerAdapter(this, list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        recyclerView.setAdapter(adapter);

    }

    private List getList() {
        List list = new ArrayList<>();
        for (int i = 0; i < imageUrl.length; i++) {
            ItemModel model = new ItemModel();
            model.setName(names[i]);
            model.setImagePath(imageUrl[i]);
            list.add(model);
        }
        return list;
    }
}

MultiTypeRecyclerAdapter.java

public class MultiTypeRecyclerAdapter extends RecyclerView.Adapter {

    private List itemModels;
    private Context context;
    private int HEADER_TYPE =0;
    private int FOOTER_TYPE = 1;
    private int ONE_COLUMN_ROW_TYPE = 2;
    private int TWO_COLUMN_ROW_TYPE =3;

    public MultiTypeRecyclerAdapter(Context context, List wallTalls) {
        this.itemModels = wallTalls;
        this.context = context;
    }

    @Override
    public int getItemCount() {
        return itemModels.size()+2;
    }

    @Override
    public int getItemViewType(int position) {

        if (position == 0){
            return HEADER_TYPE;
        }else if (position == itemModels.size()+1){
            return FOOTER_TYPE;
        }else if (position % 2 == 0){
            return ONE_COLUMN_ROW_TYPE;
        }else{
            return TWO_COLUMN_ROW_TYPE;
        }
    }


    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        View itemView = null;
        if (viewType == HEADER_TYPE){
            itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.header_view, viewGroup, false);
            return new HeaderViewHolder(itemView);
        }else if (viewType == FOOTER_TYPE){
            itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.footer_view, viewGroup, false);
            return new FooterViewHolder(itemView);
        }else if (viewType == ONE_COLUMN_ROW_TYPE){
            itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout_one_column, viewGroup, false);
            return new OneColumnViewHolder(itemView);
        }else if (viewType == TWO_COLUMN_ROW_TYPE){
            itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout_two_column, viewGroup, false);
            return new TwoColumnViewHolder(itemView);
        }else{
            // default one column row
            itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout_one_column, viewGroup, false);
            return new OneColumnViewHolder(itemView);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        if (holder instanceof HeaderViewHolder){

        }else if (holder instanceof FooterViewHolder){


        }else if (holder instanceof OneColumnViewHolder){

            ItemModel model = itemModels.get(position-1);
            String imageUrl = model.getImagePath();
            if (imageUrl != null && !imageUrl.isEmpty()){
                Glide.with(context)
                        .load(imageUrl)
                        // .placeholder(R.drawable.i)
                        .into(((OneColumnViewHolder)holder).imageView);

            }
            ((OneColumnViewHolder)holder).name.setText(model.getName());

        }else if (holder instanceof TwoColumnViewHolder){

            ItemModel model = itemModels.get(position-1);
            String imageUrl = model.getImagePath();
            if (imageUrl != null && !imageUrl.isEmpty()){
                Glide.with(context)
                        .load(imageUrl)
                        .into(((TwoColumnViewHolder)holder).imageView);

                Glide.with(context)
                        .load(imageUrl)
                        .into(((TwoColumnViewHolder)holder).imageView1);


            }
            ((TwoColumnViewHolder)holder).name.setText(model.getName());
            ((TwoColumnViewHolder)holder).name1.setText(model.getName());

        }else{

            ItemModel model = itemModels.get(position-1);
            String imageUrl = model.getImagePath();
            if (imageUrl != null && !imageUrl.isEmpty()){
                Glide.with(context)
                        .load(imageUrl)
                        // .placeholder(R.drawable.i)
                        .into(((OneColumnViewHolder)holder).imageView);

            }
            ((OneColumnViewHolder)holder).name.setText(model.getName());
        }

    }


    public static class OneColumnViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.name)
        TextView name;
        @BindView(R.id.imageView)
        ImageView imageView;

        public OneColumnViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public static class TwoColumnViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.name)
        TextView name;
        @BindView(R.id.imageView)
        ImageView imageView;

        @BindView(R.id.name1)
        TextView name1;
        @BindView(R.id.imageView1)
        ImageView imageView1;

        public TwoColumnViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public static class HeaderViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.headerView)
        TextView header;

        public HeaderViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }


    public static class FooterViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.footerView)
        TextView footer;

        public FooterViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
}


Thanks for reading this post. I hope it will help you to understand.

No comments:

Post a Comment

Debug Database in Android

In my last tutorial, we have learned how we can use persistence database in android. We also understood which database wrapper we can use...

Contact Me

Name

Email *

Message *