Creating a custom RecyclerView : Header and Item List

Question

Hello I'm trying to create this list as in the image below, tried using RecyclerView, but it didn't work!

https://i.stack.imgur.com/A3CaB.png

my api, i'm using retrofit

[
  {
    "id": "1",
    "name": "TV",
    "list": [
      {
        "idp": "1",
        "namep": "TV 43"
      },
      {
        "idp": "2",
        "namep": "TV 32"
      }
    ]
  },
  {
    "id": "2",
    "name": "Couch",
    "list": [
      {
        "idp": "3",
        "namep": "Couch for 3 people"
      },
      {
        "idp": "4",
        "namep": "Couch for 2 people"
      }
    ]
  }
]

@KasımÖzdemir it's not a HeaderView I want to use!! see my image. — Camila F, May 19 '20 at 19:51
Yes, I saw the image. You should do something like this. You may just have a second recyclerView in your item section. — Kasım Özdemir, May 19 '20 at 19:54
So, header item includes TextView, list item includes RecyclerView. You will have two adapters. One of them is for the main recyclerView. the other is for the list. — Kasım Özdemir, May 19 '20 at 20:03
@KasımÖzdemir can shows an example? I'm not very good at java. — Camila F, May 19 '20 at 20:07
I added an answer. You can try this. There can be some mistakes , I didn't try code. — Kasım Özdemir, May 19 '20 at 20:52

Kasım Özdemir · Accepted Answer · 2020-05-19T22:08:36.040

Main.class

public class Main {

    @SerializedName("id")
    @Expose
    private String id;
    @SerializedName("name")
    @Expose
    private String name;
    @SerializedName("list")
    @Expose
    private ArrayList<List> list = null;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public ArrayList<List> getList() {
        return list;
    }

    public void setList(ArrayList<List> list) {
        this.list = list;
    }
}

List.class

public class List {

    @SerializedName("idp")
    @Expose
    private String idp;
    @SerializedName("namep")
    @Expose
    private String namep;

    public String getIdp() {
        return idp;
    }

    public void setIdp(String idp) {
        this.idp = idp;
    }

    public String getNamep() {
        return namep;
    }

    public void setNamep(String namep) {
        this.namep = namep;
    }

}

header_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#673AB7"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

list_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/listRV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/list_item"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#000000"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

MainAdapter

public class MainAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;
    ArrayList<Main> mainArrayList;

    public MainAdapter(ArrayList<Main> mainArrayList) {
        this.mainArrayList = mainArrayList;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == TYPE_HEADER) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.header_layout, parent, false);
            return new VHItem(v);
        } else if (viewType == TYPE_ITEM) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout, parent, false);
            return new VHHeader(v);
        }

        throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");

    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof VHHeader) {
            Main main = getItem(position / 2);
            VHHeader vhHeader = (VHHeader) holder;
            vhHeader.header.setText(main.getName());
        }else if(holder instanceof VHItem) {
            Main main = getItem(position / 2);
            VHItem vhItem = (VHItem) holder;
            ListAdapter listAdapter = new ListAdapter(main.getList());
            vhItem.listRV.setLayoutManager(new LinearLayoutManager(holder.itemView.getContext()));
            vhItem.listRV.setAdapter(listAdapter);
        }
    }

    @Override
    public int getItemCount() {
        return mainArrayList.size() * 2;
    }

    @Override
    public int getItemViewType(int position) {
        if (isPositionHeader(position))
            return TYPE_HEADER;

        return TYPE_ITEM;
    }

    private boolean isPositionHeader(int position) {
        return position%2 == 0;
    }

    private Main getItem(int position) {
        return mainArrayList.get(position);
    }

    class VHHeader extends RecyclerView.ViewHolder {
        TextView header;

        public VHHeader(View itemView) {
            super(itemView);
            header = itemView.findViewById(R.id.header);
        }
    }

    class VHItem extends RecyclerView.ViewHolder {
        RecyclerView listRV;

        public VHItem(View itemView) {
            super(itemView);
            listRV = itemView.findViewById(R.id.listRV);
        }
    }
}

ListAdapter

public class ListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    ArrayList<List> listArrayList;

    public ListAdapter(ArrayList<List> listArrayList) {

        this.listArrayList = listArrayList;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new VHItem(v);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        VHItem vhItem = (VHItem) holder;
        vhItem.list_item.setText(listArrayList.get(position).getIdp() + " - " + listArrayList.get(position).getNamep());
    }

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


    class VHItem extends RecyclerView.ViewHolder {
        TextView list_item;

        public VHItem(View itemView) {
            super(itemView);
            list_item = itemView.findViewById(R.id.list_item);
        }
    }
}

Call MainAdapter:

MainAdapter mainAdapter = new MainAdapter(products);
recyclerPro.setHasFixedSize( true ); 
recyclerPro.setLayoutManager(new LinearLayoutManager(this)); 
recyclerPro.setAdapter(mainAdapter);

can I create a FOR within onResponse, to populate the 2 adapters? — Camila F, May 19 '20 at 21:11
You just call MainAdapter. Populate mainArrayList and set MainAdapter. Already your response(json) is ArrayList — Kasım Özdemir, May 19 '20 at 21:17
I didn't add main.xml. You can create it and add a RecyclerView — Kasım Özdemir, May 19 '20 at 21:21
`public void onResponse(Call call, Response response) { if( response.isSuccessful() ){ resultado = response.body(); produts = resultado.items; configurarRecyclerView(); } }` I'm not able to create — Camila F, May 19 '20 at 21:28
is my ArrayList Main.class, `private List
produts = new ArrayList<>();` — Camila F, May 19 '20 at 21:44
` public void configurarRecyclerView(){ adapterPro = new AdapterPro(main, this); recyclerPro.setHasFixedSize( true ); recyclerPro.setLayoutManager(new LinearLayoutManager(this)); recyclerPro.setAdapter( adapterPro ); //Configura evento de clique recyclerVideos.addOnItemTouchListener( new RecyclerItemClickListener(..........` make an example for me! — Camila F, May 19 '20 at 22:01
You are sending main to adapter. You need to send the products. — Kasım Özdemir, May 19 '20 at 22:05
Okay, Happy coding again. Good luck for you. Good night for me. — Kasım Özdemir, May 19 '20 at 22:15

Creating a custom RecyclerView : Header and Item List

1 Answers1