Recyclerview adalah komponen android studio yang fleksibel untuk menampilkan kumpulan data besar di dalam bidang terbatas. Kesempatan kali ini saya akan coba tunjukan kepada teman-teman cara membuat tampilan list seperti di bawah ini menggunakan Nested RecyclerView (RecyclerView di dalam RecyclerView).
Baik, mari kita mulai dan perhatikan baik-baik setiap langkah yang saya lakukan!
1. Tambahkan dependensi recyclerview dan cardview
Silakan implementasikan kedua dependensi tersebut di gradle tingkat aplikasi, dan pastikan juga Anda memiliki versi paling baru. Dalam kasus ini saya akan menunjukannya secara konsep / prinsip dasar membuat nested recyclerview dengan versi 24, jadi bagi Anda yang membaca ini beberapa bulan kedepan pasti bakal bekerja dengan environment versi paling baru. Oleh sebab itu, silakan nanti sesuaikan saja dengan studi kasus Anda, baik yang pake java atau 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.+'
Kemudian, agar Anda terhindar dari error yang menyatakan bahwa property ini tidak ditemukan, id ini tidak ditemukan, bla-bla-bla dan tetek mbengek semacamnya, maka kita bekerja di sisi Frontend terlebih dahulu untuk membuat layoutnya.
2. Rombak Kode activity_main.xml
Cukup berisi recyclerview saja, di sini saya menggunakan 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. Buat layout event_list_parent_item.xml
Layout ini kita anggap sebagai bingkai untuk informasi induknya, yang mana kita tahu dari contoh gambar di atas bahwa tanggal adalah induk informasinya.
<?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. Buat layout event_list_child_item.xml
Layout ini kita anggap sebagai bingkai untuk informasi turunannya, yang mana kita tahu dari contoh gambar di atas bahwa event1, 2, 3, dst.. adalah informasi turunan.
<?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>
Setelah kita selesai dengan pekerjaan Frontend, sekarang saatnya kita pindah ke Backend untuk melakukan beberapa pekerjaan sulit wkwkwk. Mari kita mulai!
5. Buat data class EventInformation
Class ini kita gunakan untuk menampung object tanggal beserta object informasinya.
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. Buat data class EventDates
Class ini kita gunakan khusus untuk menampung tanggal dengan tipe data String. Jika Anda perhatikan class ini sebagai tipe object untuk property eventsDatesList di class EventInformationClass.
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. Buat data class Events
Class ini kita gunakan khusus untuk menampung informasi beserta id-nya dengan tipe data String. Jika Anda perhatikan class ini sebagai tipe object untuk property eventsArrayList di class EventDates.
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. Buat adapter class EventListParentAdapter
Class ini berperan sebagai presenter yang bertugas merakit bingkai Induk dan menyesuaikan kontennya (informasinya). Dalam hal ini adalah tanggal dan object turunannya.
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. Buat adapter class EventListChildAdapter
Class ini berperan sebagai presenter yang bertugas merakit bingkai anak dan menyesuaikan kontennya (informasinya). Dalam hal ini adalah event1, 2, 3 dst..
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. Rombak class MainActivity
Sekarang satukan sub-sub class tadi menjadi satuan unit kerja di dalam activity dengan cara mendefinisikannya sedemikian rupa.
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);
}
}
Sekian, semoga bermanfaat, jangan lupa like dan subscribe! wkwkwk.
