Membuat Expand ListView Material Design di Android

Hai All, di sharing kali ini kita akan membuat aplikasi sederhana untuk menampilkan expand list view, berbeda dengan listview sebelumnya. Di tutorial kali ini kita tidak akan menggunakan library mana pun, karena framework yang disediakan oleh Android sudah powerfull untuk menampilkan expand listview standar menurut saya. Class yang digunakan untuk mengimplementasikannya adalah class Adapter. Jadi mari kita langsung saja mencobanya.

1. Buat project baru seperti biasa, disini saya memberi namanya dengan ExpandListView.
2. Pertama kita harus membuat model item untuk model datanya yang nantinya akan ditampilkan.
3. Buat class baru dengan nama item.java pada package project, yang berisikan code seperti berikut:
   

   
   

   	package com.wirasetiawan.expandlistview;
   	import android.os.Parcel;
   	import android.os.Parcelable;
   	/**
   	* Created by wira on 1/19/16.
   	*/
   	public class Item implements Parcelable{
   	public String title;
   	public String desciption;
   	public boolean isExpanded;
   	public Item(){}
   	public Item(Parcel in){
   	title = in.readString();
   	desciption = in.readString();
   	isExpanded = in.readInt() == 1;
   	}
   	@Override
   	public int describeContents(){
   	return 0;
   	}
   	@Override
   	public void writeToParcel(Parcel dest, int flags){
   	dest.writeString(title);
   	dest.writeString(desciption);
   	dest.writeInt(isExpanded ? 1 : 0);
   	}
   	public static final Parcelable.Creator<Item> CREATOR = new Parcelable.Creator<Item>(){
   	@Override
   	public Item createFromParcel(Parcel source){
   	return new Item(source);
   	}
   	@Override
   	public Item[] newArray(int size) {
   	return new Item[size];
   	}
   	};
   	}

   view raw
   
   Item.java
   
   hosted with ❤ by GitHub

4. Selanjutnya yang perlu kita lakukan adalah membuat adapternya, buat class baru dengan nama ExpandableAdapter.java dilokasi yang sama dengan file Item.java, lalu isikan code berikut kedalam file ExpandableAdapter.java tersebut.
   

   
   

   	package com.wirasetiawan.expandlistview;
   	import android.content.Context;
   	import android.support.v7.widget.AppCompatTextView;
   	import android.view.LayoutInflater;
   	import android.view.View;
   	import android.view.ViewGroup;
   	import android.widget.BaseAdapter;
   	import android.widget.FrameLayout;
   	import android.widget.ImageView;
   	import java.util.List;
   	import java.util.Objects;
   	/**
   	* Created by wira on 1/19/16.
   	*/
   	public class ExpandableAdapter extends BaseAdapter {
   	List<Item> items;
   	Context context;
   	public class Row{
   	AppCompatTextView Judul;
   	AppCompatTextView Deskripsi;
   	FrameLayout Wrapper;
   	ImageView Arrow;
   	}
   	public ExpandableAdapter(Context context, List<Item> items){
   	this.items = items;
   	this.context = context;
   	}
   	@Override
   	public int getCount(){
   	return items.size();
   	}
   	@Override
   	public Object getItem(int position){
   	return items.get(position);
   	}
   	@Override
   	public long getItemId(int position){
   	return position;
   	}
   	@Override
   	public View getView(int position, View convertView, ViewGroup parent){
   	Row row;
   	if(convertView == null){
   	row = new Row();
   	convertView = LayoutInflater.from(context).inflate(R.layout.row_item, parent, false);
   	row.Wrapper = (FrameLayout) convertView.findViewById(R.id.wrapper);
   	row.Judul = (AppCompatTextView) convertView.findViewById(R.id.judul);
   	row.Deskripsi = (AppCompatTextView) convertView.findViewById(R.id.deskripsi);
   	row.Arrow = (ImageView) convertView.findViewById(R.id.arrow);
   	convertView.setTag(row);
   	} else {
   	row = (Row) convertView.getTag();
   	}
   	//Memperbaharui tampilan
   	Item item = items.get(position);
   	if(item.isExpanded){
   	row.Wrapper.setVisibility(View.VISIBLE);
   	row.Arrow.setRotation(180f);
   	}else {
   	row.Wrapper.setVisibility(View.GONE);
   	row.Arrow.setRotation(0f);
   	}
   	row.Judul.setText(item.title);
   	row.Deskripsi.setText(item.desciption);
   	return convertView;
   	}
   	}

   view raw
   
   ExpandableAdapter.java
   
   hosted with ❤ by GitHub

5. Tentunya kita akan mendapatkan error pada Project, hal ini dikarenakan kita belum membuat layout row_item.xml. Untuk itu kita perlu membuat layout tersebut didalam folder res/layout, lalu isikan code berikut kedalamnya.
   

   
   

   	<?xml version="1.0" encoding="utf-8"?>
   	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
   	android:layout_width="match_parent" android:layout_height="match_parent"
   	android:animateLayoutChanges="true">
   	<RelativeLayout
   	android:id="@+id/rl_title_wrapper"
   	android:layout_width="fill_parent"
   	android:layout_height="wrap_content"
   	android:minHeight="?listPreferredItemHeight">
   	<android.support.v7.widget.AppCompatTextView
   	android:id="@+id/judul"
   	android:padding="16dp"
   	android:layout_width="fill_parent"
   	android:layout_height="wrap_content"/>
   	<ImageView
   	android:id="@+id/arrow"
   	android:src="@drawable/ic_arrow_down"
   	android:layout_alignParentRight="true"
   	android:layout_alignParentEnd="true"
   	android:layout_centerInParent="true"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content" />
   	</RelativeLayout>
   	<FrameLayout
   	android:id="@+id/wrapper"
   	android:layout_below="@+id/rl_title_wrapper"
   	android:layout_width="fill_parent"
   	android:layout_height="wrap_content">
   	<android.support.v7.widget.AppCompatTextView
   	android:id="@+id/deskripsi"
   	android:padding="16dp"
   	android:layout_width="fill_parent"
   	android:layout_height="wrap_content"/>
   	</FrameLayout>
   	</RelativeLayout>

   view raw
   
   row_item.xml
   
   hosted with ❤ by GitHub

6. Selanjutnya menyediakan fungsinya pada activity utama, yaitu pada file MainActivity.java. Update file tersebut sehingga menjadi seperti berikut:
   

   
   

   	package com.wirasetiawan.expandlistview;
   	import android.os.Bundle;
   	import android.support.design.widget.FloatingActionButton;
   	import android.support.design.widget.Snackbar;
   	import android.support.v7.app.AppCompatActivity;
   	import android.support.v7.widget.Toolbar;
   	import android.view.View;
   	import android.view.Menu;
   	import android.view.MenuItem;
   	import android.widget.AdapterView;
   	import android.widget.ListView;
   	import java.util.ArrayList;
   	import java.util.List;
   	public class MainActivity extends AppCompatActivity {
   	@Override
   	protected void onCreate(Bundle savedInstanceState) {
   	super.onCreate(savedInstanceState);
   	setContentView(R.layout.activity_main);
   	Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
   	setSupportActionBar(toolbar);
   	final ListView lvItems = (ListView) findViewById(R.id.lv_items);
   	ExpandableAdapter adapter = getAdapter();
   	lvItems.setAdapter(adapter);
   	lvItems.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   	@Override
   	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
   	ExpandableAdapter adapter = (ExpandableAdapter) parent.getAdapter();
   	Item item = (Item) adapter.getItem(position);
   	if (item != null) {
   	if (item.isExpanded) {
   	item.isExpanded = false;
   	} else {
   	item.isExpanded = true;
   	}
   	}
   	adapter.notifyDataSetChanged();
   	}
   	});
   	FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
   	fab.setOnClickListener(new View.OnClickListener() {
   	@Override
   	public void onClick(View view) {
   	Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
   	.setAction("Action", null).show();
   	}
   	});
   	}
   	private ExpandableAdapter getAdapter(){
   	List<Item> items = new ArrayList<>();
   	for(int i = 0; i < 50; i++){
   	Item item = new Item();
   	item.title = "Title Item " + i;
   	item.desciption = "Description for Title Item "+ i;
   	item.isExpanded = false;
   	items.add(item);
   	}
   	return new ExpandableAdapter(this, items);
   	}
   	@Override
   	public boolean onCreateOptionsMenu(Menu menu) {
   	// Inflate the menu; this adds items to the action bar if it is present.
   	getMenuInflater().inflate(R.menu.menu_main, menu);
   	return true;
   	}
   	@Override
   	public boolean onOptionsItemSelected(MenuItem item) {
   	// Handle action bar item clicks here. The action bar will
   	// automatically handle clicks on the Home/Up button, so long
   	// as you specify a parent activity in AndroidManifest.xml.
   	int id = item.getItemId();
   	//noinspection SimplifiableIfStatement
   	if (id == R.id.action_settings) {
   	return true;
   	}
   	return super.onOptionsItemSelected(item);
   	}
   	}

   view raw
   
   MainActivity.java
   
   hosted with ❤ by GitHub

7. Terakhir adalah membuat wadah untuk menampung daftar item yang telah kita buat sebelumnya pada file activity_main.xml. Copy-kan code dibawah ini pada file tersebut, tepat sebelum tag script ini

   </android.support.design.widget.CoordinatorLayout>
   

   
   

   	<ListView
   	android:id="@+id/lv_items"
   	android:layout_width="fill_parent"
   	android:layout_height="fill_parent"/>

   view raw
   
   activity_main.xml
   
   hosted with ❤ by GitHub

8. Coba jalankan aplikasi, seharusnya sih tidak ada error. Jika pun ada silahkan berbagi di kolom komentar dibawah ini. Well, diasumsikan tidak error, dan aplikasi akan berjalan seperti gambar dibawah ini.
   

Nah cukup sekian pembahasan kali ini, untuk source code bisa di download di GitHub ini. Semoga bermanfaat …