add sections in recyclerview

Question

I have made recyclerview and now I wanted to add header in recyclerview(I mean 1 header in top of recyclerview, others maybe in middle of recyclerview)

this is my mainactivity hope hint given in arraylist will clarify my question more:

public class MainActivity extends AppCompatActivity {

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

        RecyclerView …
            ...(layoutManager);

        ArrayList<Rv> rvList = new ArrayList<>();

// I want to add here "header 1"
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Robert Doenry Jr.", "IronMan"));
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Tom Holland", "Spider Man"));
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Chris Evans", "Captain America"));
//I want to add here header 2
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Mark Ruffalo", "Hulk"));
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Chris Hemsworth","Thor"));
//I want to add here header 3
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Tom Hiddleston", "Loki"));
        rvList.add(new Rv(R.mipmap.ic_launcher_round, "Zoe Saldana", "Gamora"));

        RvAdapter adapter = new RvAdapter(rvList);
        recyclerView.setAdapter(adapter);
    }
}

and this is my adapter for this recyclerView:

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.RvHolderView> {

    public ArrayList<Rv> rvList;

    public RvAdapter(ArrayList<Rv> rvList) {
        this.rvList = rvList;
    }

    @NonNull
    @Override
    public RvHolderView onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
      View view =  LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.rv_view, viewGroup, false);
        return new RvHolderView(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RvHolderView rvHolderView, int i) {
        Rv current = rvList.get(i);
        rvHolderView.imageView.setImageResource(current.getImage());
        rvHolderView.text1.setText(current.getText1());
        rvHolderView.text2.setText(current.getText2());
    }

    @Override
    public int getItemCount() {
        return rvList.size();
    }

    public static class RvHolderView extends RecyclerView.ViewHolder {
        public ImageView imageView;
        public TextView text1;
        public TextView text2;
        public RvHolderView(@NonNull View itemView) {
            super(itemView);
             imageView = itemView.findViewById(R.id.img);
             text1 = itemView.findViewById(R.id.texta);
            text2 = itemView.findViewById(R.id.textb);
         }
    }
}

Answer 1

You can make it by different types. You can add type field in your Rv example:

rvList.add(new Rv(R.mipmap.ic_launcher_round, "Robert Doenry Jr.", "IronMan", "header"));
rvList.add(new Rv(R.mipmap.ic_launcher_round, "Robert Doenry Jr.", "IronMan","item"));
rvList.add(new Rv(R.mipmap.ic_launcher_round, "Tom Holland", "Spider Man","item"));

And in recycler view you can override getItemViewType

Example:

 override fun getItemViewType(position: Int): Int {
        return if(itemList(position).type.equals("header")) 0 else 1
    }

And in onCreateViewHolder or in onBindViewHolder by different type create different ViewHolders

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return when (type) {
               type1 -> //do your staff
               type2 -> //do your staff
               else -> //do your Staff
    }
}

Answer 2

What you need is a multi type recycler view:

Suppose Header of list is just an ImageView and the other items of the list are just a text like below:

• Header(ImageView)
• Item(TextView)
• Item(TextView)
• Item(TextView)

These are steps you should follow:

1. Define an interface to add viewType to your items

   interface RecyclerData { val viewType: Int }

2. For each viewType define a data class:

    enum class ItemsViewType{ HEADER, ITEM } data class PrimaryItem(val headerImageUri:String): RecyclerData { override val viewType = ItemsViewType.HEADER.ordinal } data class SecondaryItem(val itemContent:String): RecyclerData { override val viewType = ItemsViewType.ITEM.ordinal }

3. Create your RecyclerView Adapter:

    class MyBeautifulAdapter<T: RecyclerData>: RecyclerView.Adapter<RecyclerViewHolder<T>>(){ var items: ArrayList<T> = arrayListOf() set(value) { field = value notifyDataSetChanged() } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewHolder<T> { return when(viewType){ ItemsViewType.HEADER.ordinal -> HeaderViewHolder(LayoutInfaltor.from(parent.context).inflate(R.layout.row_header,parent,false)), ItemsViewType.ITEM.ordinal -> ItemViewHolder(LayoutInflator.from(parent.context).inflate(R.layout.row_secondary,parent,false)) } } override fun getItemViewType(position: Int): Int { return items[position].viewType } override fun onBindViewHolder(holder: RecyclerViewHolder<T>, position: Int) { holder.bind(items[position]) }

4. ViewHolders:

    open class RecyclerViewHolder<T: RecyclerData>(val itemView: View): RecyclerView.ViewHolder(itemView){ open fun bindData(item:T){ } } class HeaderViewHolder(private val view:View): RecyclerViewHolder<PrimaryItem>(view){ override fun bindData(item: PrimaryItem) { // load header image he } } class ItemViewHolder(private val view:View): RecyclerViewHolder<SecondaryItem>(view){ override fun bindData(item: SecondaryItem) { // set textView content here } }