Android Simple Section RecylerView

In this tutorial I will create a simple Sectioned RecyclerView that will show 2 sections and a few items in each section and how to move an item from one section to another.

Note: For RecyclerView I used AndroidX imports and not android.support.v7.widget.RecyclerView!

Setup

We need to import the recycler view from AndroidX. The build.gradle file should look like the following:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.sectionedrecyclerview"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.recyclerview:recyclerview:1.1.0-beta01'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

The main screen

The following xml describes how the main screen should look like. The main screen contains the RecyclerView we want to display.

activity_main.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="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    android:padding="10dp">
    <Button
        android:id="@+id/button"
        android:text="Move Item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/sectioned_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Below we will create the xml layout for a section. It will contain a TextView for section title and a RecyclerView for the list of items within the section.

list_section.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/section_item_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/item_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="7dp" />
</LinearLayout>

The section

list_item.xml

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

Now we will create a Section model that will contain:

  • the section title
  • the items that will show in a section.

Section.java

package com.example.sectionedrecyclerview;

import java.util.List;

public class Section {
    private String sectionTitle;
    private List<String> allItemsInSection;
    public Section(String sectionTitle, List<String> allItemsInSection) {
        this.sectionTitle = sectionTitle;
        this.allItemsInSection = allItemsInSection;
    }
    public String getSectionTitle() {
        return sectionTitle;
    }
    public void setSectionTitle(String sectionTitle) {
        this.sectionTitle = sectionTitle;
    }
    public List<String> getAllItemsInSection() {
        return allItemsInSection;
    }
    public void setAllItemsInSection(List<String> allItemsInSection) {
        this.allItemsInSection = allItemsInSection;
    }
}

And here is the important part of the tutorial. For a sectioned RecyclerView we will need to create 2 adapters: one for the items within a section, and one for the sections.

ItemAdapter.java

package com.example.sectionedrecyclerview;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ViewHolder> {
    List<String> items;
    public ItemAdapter(List<String> items) {
        this.items = items;
    }
    @NonNull
    @Override
    public ItemAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(@NonNull ItemAdapter.ViewHolder holder, int position) {
        String itemName = items.get(position);
        holder.bind(itemName);
    }
    @Override
    public int getItemCount() {
        return items.size();
    }
    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView itemName;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            itemName = itemView.findViewById(R.id.list_item_text_view);
        }
        public void bind(String item) {
            itemName.setText(item);
        }
    }
}

Let’s create the adapter for our sections!

SectionAdapter.java

package com.example.sectionedrecyclerview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class SectionAdapter extends RecyclerView.Adapter<SectionAdapter.ViewHolder> {
    private List<Section> sectionList;
    private Context context;
    private ItemAdapter itemAdapter;
    public SectionAdapter(Context context, List<Section> sections) {
        sectionList = sections;
        this.context = context;
    }
    @NonNull
    @Override
    public SectionAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_section, parent, false);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Section section = sectionList.get(position);
        holder.bind(section);
    }
    @Override
    public int getItemCount() {
        return sectionList.size();
    }
    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView sectionName;
        private RecyclerView itemRecyclerView;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            sectionName = itemView.findViewById(R.id.section_item_text_view);
            itemRecyclerView = itemView.findViewById(R.id.item_recycler_view);
        }
        public void bind(Section section) {
            sectionName.setText(section.getSectionTitle());
            // RecyclerView for items
            LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false);
            itemRecyclerView.setLayoutManager(linearLayoutManager);
            itemAdapter = new ItemAdapter(section.getAllItemsInSection());
            itemRecyclerView.setAdapter(itemAdapter);
        }
    }
    public void moveItem(int toSectionPosition, int fromSectionPosition) {
        List<String> toItemsInSection = sectionList.get(toSectionPosition).getAllItemsInSection();
        List<String> fromItemsInSection = sectionList.get(fromSectionPosition).getAllItemsInSection();
        if (fromItemsInSection.size() > 3) {
            toItemsInSection.add(fromItemsInSection.get(3));
            fromItemsInSection.remove(3);
            // update adapter for items in a section
            itemAdapter.notifyDataSetChanged();
            // update adapter for sections
            this.notifyDataSetChanged();
        }
    }
}

Now in the MainActivity class we should setup the sections list and populate both sections and items lists with data. In our examples we will just add hardcoded data using 2 for loops 🙂

MainActivity.java

package com.example.sectionedrecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    
    private List<String> itemArrayList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = findViewById(R.id.sectioned_recycler_view);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);
        final List<Section> sections = new ArrayList<>();
        //add sections
        for (int i = 0; i <= 1; i++) {
            itemArrayList = new ArrayList<>();
            //add items to a section
            for (int j = 0; j <= 4; j++) {
                itemArrayList.add("Item " + j + " Section " + i);
            }
            //add the section and items to array list
            sections.add(new Section("Section " + i, itemArrayList));
        }
        final SectionAdapter adapter = new SectionAdapter(this, sections);
        recyclerView.setAdapter(adapter);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (itemArrayList.size() > 3) {
                    adapter.moveItem(0, 1);
                }
            }
        });
    }
}

You can take a look below at our very simple Sectioned RecyclerView 🙂

Sectioned RecyclerView