Recyclerview is a flexible android studio component for displaying large data sets in a limited field. This time I will try to show you how to create a list view like the one below using Nested RecyclerView (RecyclerView inside RecyclerView).
Okay, let's get started and pay close attention to every step I take!
1. Add recyclerview and cardview dependencies
Please implement both dependencies in the application level gradle, and also make sure you have the latest version. In this case I will show it in the concept / basic principle of creating a nested recyclerview with version 24, so for those of you who read this in the next few months will definitely work with the latest version environment. Therefore, please adjust it later to your case study, whether using java or kotlin.
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.+'
compile 'com.android.support:cardview-v7:24.2.+'Then, to avoid errors stating that this property was not found, this id was not found, blah-blah-blah and other such things, we work on the Frontend side first to create the layout.
2. Edit the activity_main.xml code
Just contain recyclerview, here I use relative layout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/event_recycler_view_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</RelativeLayout>3. Create the event_list_parent_item.xml layout
We consider this layout as a frame for the parent information, which we know from the example image above that the date is the parent information.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">
<TextView
android:id="@+id/event_list_parent_date"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:layout_below="@+id/event_list_parent_date"
android:id="@+id/event_recycler_view_child"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>4. Create the event_list_child_item.xml layout
We consider this layout as a frame for its derivative information, which we know from the example image above that event1, 2, 3, etc. are derivative information.
<?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">
<android.support.v7.widget.CardView
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="48dp">
<TextView
android:id="@+id/event_list_event_name"
android:paddingLeft="10dp"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
</LinearLayout>Now that we are done with the Frontend work, it is time to move to the Backend to do some hard work lol. Let's get started!
5. Create EventInformation class data
We use this class to store date objects and their information objects.
public class EventInformation {
private ArrayList<EventDates> eventsDatesList = new ArrayList<>();
public ArrayList<EventDates> getEventsDatesList() {
return eventsDatesList;
}
public void setEventsDatesList(ArrayList<EventDates> eventsDatesList) {
this.eventsDatesList = eventsDatesList;
}
}6. Create the EventDates class data
This class is used specifically to store dates with String data type. If you notice this class as an object type for the eventsDatesList property in the EventInformationClass class.
public class EventDates {
private String date;
private ArrayList<Events> eventsArrayList;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public ArrayList<Events> getEventsArrayList() {
return eventsArrayList;
}
public void setEventsArrayList(ArrayList<Events> eventsArrayList) {
this.eventsArrayList = eventsArrayList;
}
}7. Create Events class data
We use this class specifically to store information and its ID with String data type. If you notice this class as an object type for the eventsArrayList property in the EventDates class.
public class Events {
private String eventId;
private String eventName;
public String getEventId() {
return eventId;
}
public void setEventId(String eventId) {
this.eventId = eventId;
}
public String getEventName() {
return eventName;
}
public void setEventName(String eventName) {
this.eventName = eventName;
}
}8. Create the EventListParentAdapter class adapter
This class acts as a presenter that is tasked with assembling the Parent frame and adjusting its content (information). In this case, it is the date and its child objects.
public class EventListParentAdapter extends RecyclerView.Adapter<EventListParentAdapter.MyViewHolder> {
//private List<Movie> moviesList;
private EventInformation eventInformation;
private Activity activity;
public EventListParentAdapter(EventInformation eventInformation,Activity activity) {
this.eventInformation = eventInformation;
this.activity = activity;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.event_list_parent_item, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
EventDates eventDates = eventInformation.getEventsDatesList().get(position);
holder.event_list_parent_date.setText(eventDates.getDate());
LinearLayoutManager hs_linearLayout = new LinearLayoutManager(this.activity, LinearLayoutManager.VERTICAL, false);
holder.event_recycler_view_child.setLayoutManager(hs_linearLayout);
holder.event_recycler_view_child.setHasFixedSize(true);
EventListChildAdapter eventListChildAdapter = new EventListChildAdapter(this.activity,eventInformation.getEventsDatesList().get(position).getEventsArrayList());
holder.event_recycler_view_child.setAdapter(eventListChildAdapter);
}
@Override
public int getItemCount() {
return eventInformation.getEventsDatesList().size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView event_list_parent_date;
public RecyclerView event_recycler_view_child;
public MyViewHolder(View view) {
super(view);
event_list_parent_date = (TextView) view.findViewById(R.id.event_list_parent_date);
event_recycler_view_child = (RecyclerView)view.findViewById(R.id.event_recycler_view_child);
}
}
}9. Create the EventListChildAdapter class adapter
This class acts as a presenter whose job is to assemble the child frames and adjust their content (information). In this case, it is event1, 2, 3 etc.
public class EventListChildAdapter extends RecyclerView.Adapter<EventListChildAdapter.MyViewHolder> {
//private List<Movie> moviesList;
private EventInformation eventInformation;
private ArrayList<Events> eventsArrayList;
private Activity activity;
public EventListChildAdapter(Activity activity,ArrayList<Events> eventsArrayList) {
this.eventsArrayList = eventsArrayList;
this.activity = activity;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.event_list_child_item, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(final MyViewHolder holder,final int position) {
Events events = eventsArrayList.get(position);
holder.event_list_event_name.setText(events.getEventName());
holder.event_list_event_name.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.d("event name=",eventsArrayList.get(position).getEventName());
}
});
}
@Override
public int getItemCount() {
return eventsArrayList.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView event_list_event_name;
public MyViewHolder(View view) {
super(view);
event_list_event_name = (TextView) view.findViewById(R.id.event_list_event_name);
}
}
}10. Change the MainActivity class
Now unite the sub-classes into a work unit within the activity by defining them accordingly.
public class MainActivity extends AppCompatActivity {
RecyclerView event_recycler_view_parent;
EventListParentAdapter event_list_parent_adapter;
String jsonString = "{\n" +
" \"Id\" : \"1\",\n" +
" \"Name\" : \"Ganesha\",\n" +
" \"Location\" : \"Bengaluru\",\n" +
" \"Event info\" : [ \n" +
"\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\"Date\" : \"29-9-16\",\n" +
"\t\t\t\t\t\t\t\"events\" : [ \n" +
"\t\t\t\t\t\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventId\" : \"1\",\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventName\" : \"event one\"\n" +
"\t\t\t\t\t\t\t\t\t\t\t}, \n" +
"\t\t\t\t\t\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventId\" : \"2\",\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventName\" : \"event two\"\n" +
"\t\t\t\t\t\t\t\t\t\t\t}\n" +
"\t\t\t\t\t\t\t\t\t\t]\n" +
"\t\t\t\t\t\t}, \n" +
"\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\"Date\" : \"30-9-16\",\n" +
"\t\t\t\t\t\t\t\"events\" : [ \n" +
"\t\t\t\t\t\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventId\" : \"3\",\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventName\" : \"event three\"\n" +
"\t\t\t\t\t\t\t\t\t\t\t}, \n" +
"\t\t\t\t\t\t\t\t\t\t\t{\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventId\" : \"4\",\n" +
"\t\t\t\t\t\t\t\t\t\t\t\t\"eventName\" : \"event four\"\n" +
"\t\t\t\t\t\t\t\t\t\t\t}\n" +
"\t\t\t\t\t\t\t\t\t\t]\n" +
"\t\t\t\t\t\t}\n" +
"\t\t\t\t\t]\n" +
"}";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<EventDates> eventDatesArrayList;
EventInformation eventInformation = new EventInformation();;
try {
//pasing jason data
JSONObject jsonObject = new JSONObject(jsonString);
JSONArray jsonDatesArray = jsonObject.getJSONArray("Event info");
eventDatesArrayList = new ArrayList<>();
for (int indexDates=0;indexDates<jsonDatesArray.length();indexDates++){
EventDates eventDates = new EventDates();
JSONObject jsonDateobject = jsonDatesArray.getJSONObject(indexDates);
String date = jsonDateobject.getString("Date");
eventDates.setDate(date);
JSONArray jsonArrayevents = jsonDateobject.getJSONArray("events");
ArrayList<Events> eventsArrayList = new ArrayList<>();
for (int indexEvents=0;indexEvents<jsonArrayevents.length();indexEvents++){
Events events = new Events();
JSONObject eventObj = jsonArrayevents.getJSONObject(indexEvents);
events.setEventId(eventObj.getString("eventId"));
events.setEventName(eventObj.getString("eventName"));
eventsArrayList.add(events);
}
eventDates.setEventsArrayList(eventsArrayList);
eventDatesArrayList.add(eventDates);
}
eventInformation.setEventsDatesList(eventDatesArrayList);
Log.d("message",eventInformation.toString());
}catch (Exception e){
}
//parent recyclerview
event_recycler_view_parent = (RecyclerView) findViewById(R.id.event_recycler_view_parent);
event_list_parent_adapter = new EventListParentAdapter(eventInformation,MainActivity.this);
event_recycler_view_parent.setHasFixedSize(true);
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
event_recycler_view_parent.setLayoutManager(mLayoutManager);
event_recycler_view_parent.setItemAnimator(new DefaultItemAnimator());
event_recycler_view_parent.setAdapter(event_list_parent_adapter);
}
}That's all, hopefully it's useful, don't forget to like and subscribe! wkwkwk.