Belajar Android membuat Accordion Menu (Expandable ListView)

Accordion Menu diandroid apakah bisa ?.

Kalau yang sudah sering main di web development tentu tidak asing lagi dengan kata-kata accordion menu yang terkenal tentu saja Accordion menu dari Jquery UI. Pertanyaanya kapan sih kita pakai Accordion Menu, menu ini biasanya dipakai apabila kita mempunyai Menu yang banyak dan dikelompokan berdasarkan menu dan Submenunya. Accordion Menu ini sangat cocok diterapkan di Aplikasi Mobile karean dengan Accordion Menu kita menghemat tempat sehingga Menunya dapat terlihat dalam satu Screen. Selain pengelompokkan Menu disini juga bisa untuk menampilkan Informasi detail jadi user tidak perlu pindah Screen. Untuk diandroid model Accordion Menu ini lebih dikenal dengan nama Expandable ListView. Sekarang mari kita mulai.

1. Buat Project dengan nama AccordionMenu

2. Buat layout baru dengan nama accordion_list_child_item.xml lalu ketikkan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dip"
    android:background="#c0c0c0"
    android:orientation="vertical" android:paddingLeft="10dip">

    <TextView
        android:id="@+id/tvChild"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="17dip" />

</LinearLayout>

3. Buat layout baru dengan nama accordion_list_child_group.xml lalu ketikkan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="55dip"
    android:background="#000000"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="15dp"
        android:textColor="#ffffff"
        android:textSize="17dip" />

</LinearLayout>

4. Edit layout activity_main.xml lalu ketikkan kode berikut

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ExpandableListView
        android:id="@+id/ExpList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:groupIndicator="@null" />

</RelativeLayout>

5. Buat Class dengan nama ExpandListChild.java lalu ketikkan kode berikut.

package net.agusharyanto.accordionmenu;

public class ExpandListChild {

	private String Name;
	private String Tag;

	public String getName() {
		return Name;
	}

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

	public String getTag() {
		return Tag;
	}

	public void setTag(String Tag) {
		this.Tag = Tag;
	}
}

6. Buat Class dengan nama ExpandListGroup.java lalu ketikkan kode berikut.

package net.agusharyanto.accordionmenu;

import java.util.ArrayList;

public class ExpandListGroup {

	private String Name;
	private ArrayList<ExpandListChild> Items;

	public String getName() {
		return Name;
	}

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

	public ArrayList<ExpandListChild> getItems() {
		return Items;
	}

	public void setItems(ArrayList<ExpandListChild> Items) {
		this.Items = Items;
	}

}

7. Buat Class dengan nama ExpandListAdapter.java lalu ketikkan kode berikut

package net.agusharyanto.accordionmenu;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

public class ExpandListAdapter extends BaseExpandableListAdapter {

	private Context context;
	private ArrayList<ExpandListGroup> groups;

	public ExpandListAdapter(Context context, ArrayList<ExpandListGroup> groups) {
		this.context = context;
		this.groups = groups;
	}

	public void addItem(ExpandListChild item, ExpandListGroup group) {
		if (!groups.contains(group)) {
			groups.add(group);
		}
		int index = groups.indexOf(group);
		ArrayList<ExpandListChild> ch = groups.get(index).getItems();
		ch.add(item);
		groups.get(index).setItems(ch);
	}

	public Object getChild(int groupPosition, int childPosition) {
		// TODO Auto-generated method stub
		ArrayList<ExpandListChild> chList = groups.get(groupPosition)
				.getItems();
		return chList.get(childPosition);
	}

	public long getChildId(int groupPosition, int childPosition) {
		// TODO Auto-generated method stub
		return childPosition;
	}

	public View getChildView(int groupPosition, int childPosition,
			boolean isLastChild, View view, ViewGroup parent) {
		ExpandListChild child = (ExpandListChild) getChild(groupPosition,
				childPosition);
		if (view == null) {
			LayoutInflater infalInflater = (LayoutInflater) context
					.getSystemService(context.LAYOUT_INFLATER_SERVICE);
			view = infalInflater.inflate(R.layout.accordion_list_child_item,
					null);
		}
		TextView tv = (TextView) view.findViewById(R.id.tvChild);
		tv.setText(child.getName().toString());
		tv.setTag(child.getTag());
		// TODO Auto-generated method stub
		return view;
	}

	public int getChildrenCount(int groupPosition) {
		// TODO Auto-generated method stub
		ArrayList<ExpandListChild> chList = groups.get(groupPosition)
				.getItems();

		return chList.size();

	}

	public Object getGroup(int groupPosition) {
		// TODO Auto-generated method stub
		return groups.get(groupPosition);
	}

	public int getGroupCount() {
		// TODO Auto-generated method stub
		return groups.size();
	}

	public long getGroupId(int groupPosition) {
		// TODO Auto-generated method stub
		return groupPosition;
	}

	public View getGroupView(int groupPosition, boolean isLastChild, View view,
			ViewGroup parent) {
		ExpandListGroup group = (ExpandListGroup) getGroup(groupPosition);
		if (view == null) {
			LayoutInflater inf = (LayoutInflater) context
					.getSystemService(context.LAYOUT_INFLATER_SERVICE);
			view = inf.inflate(R.layout.accordion_list_group_item, null);
		}
		TextView tv = (TextView) view.findViewById(R.id.tvGroup);
		tv.setText(group.getName());
		// TODO Auto-generated method stub
		return view;
	}

	public boolean hasStableIds() {
		// TODO Auto-generated method stub
		return true;
	}

	public boolean isChildSelectable(int arg0, int arg1) {
		// TODO Auto-generated method stub
		return true;
	}

}

8. Edit MainActivity.java lalu ketikkan kode berikut.

package net.agusharyanto.accordionmenu;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListView;

public class MainActivity extends Activity {
	/** Called when the activity is first created. */
	private ExpandListAdapter ExpAdapter;
	private ArrayList<ExpandListGroup> ExpListItems;
	private ExpandableListView ExpandList;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ExpandList = (ExpandableListView) findViewById(R.id.ExpList);
		ExpListItems = SetStandardGroups();
		ExpAdapter = new ExpandListAdapter(MainActivity.this, ExpListItems);
		ExpandList.setAdapter(ExpAdapter);
	}

	public ArrayList<ExpandListGroup> SetStandardGroups() {
		ArrayList<ExpandListGroup> list = new ArrayList<ExpandListGroup>();
		ArrayList<ExpandListChild> list2 = new ArrayList<ExpandListChild>();
		ExpandListGroup gru1 = new ExpandListGroup();
		gru1.setName("File");
		ExpandListChild ch1_1 = new ExpandListChild();
		ch1_1.setName("New");
		ch1_1.setTag(null);
		list2.add(ch1_1);
		ExpandListChild ch1_2 = new ExpandListChild();
		ch1_2.setName("Open");
		ch1_2.setTag(null);
		list2.add(ch1_2);
		ExpandListChild ch1_3 = new ExpandListChild();
		ch1_3.setName("Close");
		ch1_3.setTag(null);
		list2.add(ch1_3);
		gru1.setItems(list2);

		list2 = new ArrayList<ExpandListChild>();
		ExpandListGroup gru2 = new ExpandListGroup();
		gru2.setName("Edit");
		ExpandListChild ch2_1 = new ExpandListChild();
		ch2_1.setName("Undo");
		ch2_1.setTag(null);
		list2.add(ch2_1);
		ExpandListChild ch2_2 = new ExpandListChild();
		ch2_2.setName("Copy");
		ch2_2.setTag(null);
		list2.add(ch2_2);
		ExpandListChild ch2_3 = new ExpandListChild();
		ch2_3.setName("Paste");
		ch2_3.setTag(null);
		list2.add(ch2_3);
		gru2.setItems(list2);

		list2 = new ArrayList<ExpandListChild>();
		ExpandListGroup gru3 = new ExpandListGroup();
		gru3.setName("Report");
		ExpandListChild ch3_1 = new ExpandListChild();
		ch3_1.setName("Daily Report");
		ch3_1.setTag(null);
		list2.add(ch3_1);
		ExpandListChild ch3_2 = new ExpandListChild();
		ch3_2.setName("Monthly Report");
		ch3_2.setTag(null);
		list2.add(ch3_2);
		ExpandListChild ch3_3 = new ExpandListChild();
		ch3_3.setName("Annual Report");
		ch3_3.setTag(null);
		list2.add(ch3_3);
		gru3.setItems(list2);
		list.add(gru1);
		list.add(gru2);
		list.add(gru3);
		return list;
	}

}

9. Saatnya jalankan Aplikasi,

Sentuh Salah satu Menu

Wah ternyata bisa juga yah buat menua Accordion di Android.

Oh ia untuk yang masih kesulitan Instalasai Software untuk develop Aplikasi Android bisa download petunjuknya di

http://www.slideshare.net/agusslideshare/langkahlangkah-instalasi-software-untuk-develop-aplikasi-android

Tak terasa sudah bulan Februari di tahun 2014, tadinya mau niat lebih rajin posting tapi Alhamdulillah dibulan januari kemarin banyak kegiatan untuk ngisi pelatihan Android. Jadi baru bisa posting hari ini.

Untuk Adik-adik mahasiswa, tetap semangat yah terutama bagi yang sedang mengerjakan tugas akhir kalau bisa curahkanlah segala kemampuan untuk menyelesiakannya karena biasanya kalau tidak selesai disemester ini bisanya akan semakin malas untuk menyelesaikannya disemester selanjutnya karena teman-teman seangkatan yang saling memotivasi sudah pada lulus.

Semoga Bermanfaat

Salam Hangat

Agus Haryanto

Sumber : http://www.dreamincode.net

2 comments to Belajar Android membuat Accordion Menu (Expandable ListView)

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>