-->



5/recent-posts/slider2

404

We Are Sorry, Page Not Found

Apologies, but the page you requested could not be found.

Home Page

Tutorial Android Expandable List View

By : On
Expandable Listview digunakan untuk daftar kelompok data dengan kategori. Ia digunakan untuk memperluas dan kelompok ketika pengguna menyentuh header.

Jika Anda belum belajar tentang Listview, maka pelajarilah Listview terlebih dahulu lihat tutorial ini Android Listview Tutorial.

Mari kita mulai dengan membuat project yang baru ..

Contoh Membuat Project Android

1. Pada Android Studio, buatlah project baru.
     => Jika Anda tidak memiliki sebuah project, di layar Welcome klik New Project.
     => Jika Anda telah membuka project, dari menu File, pilih New Project.

    2. Pada Configure your new project, isi kolom berikut seperti di bawah ini.
     => Application name ⇒ ExpandableListView
     => Company domain ⇒ example.com (Misalnya: com.tahukoding.ExpandableListView)
     => Project Location ⇒ memilih lokasi untuk project Anda.

    3. Pada Select the form factors your app will run on, centang untuk Phone and Tablet.
     => Untuk Minimum SDK, pilih API 14: Android 4.0 (IveCreamSandwich). klik Next. 

    4. Pada Add an activity to Mobile, pilih Blank Activity dan klik Next.
    Next ->

    5. Klik tombol Finish untuk membuat project.
    6. Pilih View Anda sebagai Project, Buka file layout untuk kegiatan utama (activity_main.xml) terletak di bawah App ⇒ res ⇒ layout.

    activity_main.xml
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_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"
    android:background = "#abc"
    android:orientation="vertical"
    tools:context="expandablelistview.tahukoding.com.expandablelistview.MainActivity">

    <ExpandableListView
        android:id="@+id/ExpLV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

    7. Membuat xml lain pada layout untuk header daftar grup. Saya membuat file xml bernama (list_group) dan disisipkan kode berikut.

     list_group.xml 
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:background="#bca">

    <TextView
        android:id="@+id/ListHeader"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:textSize="17dp"
        android:textColor="#f9f93d"/>

</LinearLayout>

    8. Buatlah satu lagi xml file bernama (list_item.xml) untuk daftar anak :D . Ini akan berisi elemen TextView sederhana.

     list_item.xml 
    <?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="55dip">

    <TextView
        android:id="@+id/ListItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="17dip"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingLeft="?android:expandableListPreferredItemPaddingLeft"/>

</LinearLayout>

    9. Saya menggunakan kelas adaptor khusus untuk membuat tampilan daftar. Buat file kelas baru dengan nama ExpandableListAdapter.java

     ExpandableListAdapter.java 
    package expandablelistview.tahukoding.com.expandablelistview;

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

import java.util.HashMap;
import java.util.List;

/**
 * Created by ASUS on 12/23/2016.
 */

public class ExpandableListAdapter extends BaseExpandableListAdapter {

    private Context _context;
    private List<String> _listDataHeader;
    private HashMap<String, List<String>> _listdataChild;

    public ExpandableListAdapter (Context context, List<String> listDataHeader,
                                  HashMap<String, List<String>> listChildData) {
        this._context = context;
        this._listDataHeader = listDataHeader;
        this._listdataChild = listChildData;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return this._listdataChild.get(this._listDataHeader.get(groupPosition))
                .get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        final String childText = (String) getChild(groupPosition, childPosition);

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.list_item, null);
        }

        TextView tvListChild = (TextView) convertView.findViewById(R.id.ListItem);
        tvListChild.setText(childText);
        return convertView;

    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return this._listdataChild.get(this._listDataHeader.get(groupPosition)).size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return this._listDataHeader.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        return this._listDataHeader.size();
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

        String headerTitle = (String) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.list_group, null);
        }

        TextView ListHeader = (TextView) convertView.findViewById(R.id.ListHeader);
        ListHeader.setTypeface(null, Typeface.BOLD);
        ListHeader.setText(headerTitle);

        return convertView;

    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return false;
    }

}

    10. Setelah Anda selesai dengan adapter, bukalah MainActivity.java.

     MainActivity.java 
    package expandablelistview.tahukoding.com.expandablelistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    ExpandableListAdapter listAdapter;
    ExpandableListView expListView;
    List<String> listDataHeader;
    HashMap<String, List<String>> listDataChild;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        expListView = (ExpandableListView) findViewById(R.id.ExpLV);

        prepareListData();

        listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);

        expListView.setAdapter(listAdapter);


        expListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                return false;
            }
        });

        expListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {

            @Override
            public void onGroupExpand(int groupPosition) {
                Toast.makeText(getApplicationContext(),
                        listDataHeader.get(groupPosition) + " Expanded",
                        Toast.LENGTH_SHORT).show();
            }
        });

        expListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {

            @Override
            public void onGroupCollapse(int groupPosition) {
                Toast.makeText(getApplicationContext(),
                        listDataHeader.get(groupPosition) + " Collapsed",
                        Toast.LENGTH_SHORT).show();

            }
        });

        expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                Toast.makeText(
                        getApplicationContext(),
                        listDataHeader.get(groupPosition)
                                + " : "
                                + listDataChild.get(
                                listDataHeader.get(groupPosition)).get(
                                childPosition), Toast.LENGTH_SHORT)
                        .show();
                return false;
            }
        });
    }

    private void prepareListData() {
        listDataHeader = new ArrayList<String>();
        listDataChild = new HashMap<String, List<String>>();

        listDataHeader.add("Design");
        listDataHeader.add("Programming");
        listDataHeader.add("Office");

        List<String> Design = new ArrayList<String>();
        Design.add("Photoshop");
        Design.add("Illustrator");
        Design.add("Corel Draw");
        Design.add("Flash");

        List<String> Programming = new ArrayList<String>();
        Programming.add("Java");
        Programming.add("Php");
        Programming.add("C");
        Programming.add("Visual Basic");
        Programming.add("C#");
        Programming.add("C++");

        List<String> Office = new ArrayList<String>();
        Office.add("Word");
        Office.add("Excel");
        Office.add("Power Point");
        Office.add("Acces");

        listDataChild.put(listDataHeader.get(0), Design);
        listDataChild.put(listDataHeader.get(1), Programming);
        listDataChild.put(listDataHeader.get(2), Office);

    }

}

    Coba jalankan project Anda, maka hasilnya sebagai berikut. 
    [full-width]
    Google+ Linked In Pin It
    1 comment:

    Subscribe to: Post Comments (Atom)
    All Rights Reserved by Tahu Koding © 2015 - 2016