Wednesday, November 20, 2013
Android Expandable ListView Example
android
,
android expandable listview
,
androidlistview
,
expandable
,
expandable listview
,
expandable listview in android
,
listview
6 comments
:
Hi,
- In this example, we will see how to create a simple expandable list view using Android’s ExpandableListView widget.
- Expandable List allows two levels – groups which can individually be expanded to show its children.
- This example uses custom adapter for ExpandableListView which extends BaseExpandableList adapter to populate items associated with this view.
- This expandable list view example explains the following;
- Each child item has a TextView and ImageView with delete icon.
- Toast is displayed when a child item is clicked. This is processed in setOnChildClickListener.
- Child item can be deleted by clicking on delete icon.
In order to create we need three xml layout files
1. First one for Main Layout
2. Second one for Listview Group item
3. Thrid one for ListView child item
activity_main.xml:
<?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="fill_parent"
android:orientation="vertical"
android:background="#f4f4f4" >
<ExpandableListView
android:id="@+id/exp_listview1"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
list_item.xml:
<?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="wrap_content"
android:orientation="vertical"
android:padding="8dp"
android:background="#000000">
<TextView
android:id="@+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17dp"
android:textColor="#f9f93d" />
</LinearLayout>
list_childitem.xml:
<?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:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dip"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
</LinearLayout>
4. Iam using Custom adapter class in Listview.create new java class file is called ExpandableListAdapter.java and extend the BaseexpandableListAdapter.java
5.This listview returns two methods
getGroupView()--returns view for list group header.
getChildView()--returns view for list child item.
ExpandableListAdapter.java :
package com.example.expandlistview;
import java.util.HashMap;
import java.util.List;
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;
public class ExpandableListAdapter extends BaseExpandableListAdapter {
private Context _context;
private List<String> _listDataHeader; // header titles
// child data in format of header title, child title
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 childPosititon) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.get(childPosititon);
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
final String childText = (String) getChild(groupPosition, childPosition);
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_childitem, null);
}
TextView txtListChild = (TextView) convertView
.findViewById(R.id.textView1);
txtListChild.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 infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_item, null);
}
TextView lblListHeader = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setTypeface(null, Typeface.BOLD);
lblListHeader.setText(headerTitle);
return convertView;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
6.create the class MainActivity.java class.I created required data needed for listview and pass to adapter class.
MainActivity.java
package com.example.expandlistview;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.Toast;
public class MainActivity extends Activity {
ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
String itemclicked,header;
HashMap<String, List<String>> listDataChild;
int position;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the listview
expListView = (ExpandableListView) findViewById(R.id.lvExp);
// preparing list data
preparedlist();
listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
// setting list adapter
expListView.setAdapter(listAdapter);
expListView.setDividerHeight(2);
expListView.setGroupIndicator(null);
expListView.setClickable(true);
// Listview Group click listener
expListView.setOnGroupClickListener(new OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
Toast.makeText(getApplicationContext(),
"Group Clicked " + listDataHeader.get(groupPosition),
Toast.LENGTH_SHORT).show();
return false;
}
});
// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {
@Override
public void onGroupExpand(int groupPosition) {
Toast.makeText(getApplicationContext(),listDataHeader.get(groupPosition) + " Expanded",
Toast.LENGTH_SHORT).show();
}
});
// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {
@Override
public void onGroupCollapse(int groupPosition) {
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Collapsed",
Toast.LENGTH_SHORT).show();
}
});
// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
header=listDataHeader.get(groupPosition);
// TODO Auto-generated method stub
Toast.makeText(
getApplicationContext(),
listDataHeader.get(groupPosition)
+ " : "
+ listDataChild.get(
listDataHeader.get(groupPosition)).get(
childPosition),Toast.LENGTH_SHORT).show();
return false;
}
});
}
private void preparedlist()
{
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();
// Adding child data
listDataHeader.add("Business");
listDataHeader.add("Entertainment");
listDataHeader.add("Health");
listDataHeader.add("Markets");
listDataHeader.add("Media");
listDataHeader.add("Internet");
listDataHeader.add("Sports");
listDataHeader.add("Technology");
listDataHeader.add("Special Interest");
List<String> Business=new ArrayList<String>();
Business.add("Breaking Business News");
Business.add("International Business News");
/* Business.add("sectors");
Business.add("Latest Financial News");
*/
List<String> Entertainment=new ArrayList<String>();
Entertainment.add("Arts");
Entertainment.add("Books");
Entertainment.add("Breaking Entertaiment");
Entertainment.add("Movies");
Entertainment.add("Music");
Entertainment.add("Television");
Entertainment.add("Weried");
List<String> Health=new ArrayList<String>();
Health.add("Aging News");
Health.add("Breaking Health News");
Health.add("Cancer News");
Health.add("Fitness News");
Health.add("Healthcare News");
Health.add("Medical News");
Health.add("Natural Health News");
Health.add("Physcology News");
Health.add("Public Health News");
List<String> Markets=new ArrayList<String>();
Markets.add("Breaking Financial Market News");
Markets.add("Stock Markets News");
Markets.add("Commodities News");
Markets.add("Foreign Exchange News");
Markets.add("Tech Markets News");
Markets.add("UK Market News");
Markets.add("US Market News");
Markets.add("World Market News");
List<String> Media=new ArrayList<String>();
Media.add("Breaking Media News");
Media.add("Broadcasting News");
Media.add("Journalism News");
Media.add("Newspapers News");
Media.add("TV News");
List<String> Internet=new ArrayList<String>();
Internet.add("Breaking Internet News");
Internet.add("Domain Names News");
Internet.add("Internet Marketing News");
Internet.add("Search Engines News");
Internet.add("Viruses News");
Internet.add("Website Development News");
List<String> Sports=new ArrayList<String>();
Sports.add("Atheletics News");
Sports.add("Baseball News");
Sports.add("BasketBall News");
Sports.add("Boxing News");
Sports.add("Breaking Sports News");
Sports.add("circket News");
Sports.add("Soccer News");
Sports.add("Swimming News");
Sports.add("Tennins News");
Sports.add("wrestling News");
List<String> Technology=new ArrayList<String>();
Technology.add("Breaking Technology News");
Technology.add("Communication News");
Technology.add("Computer Games News");
Technology.add("Computer News");
Technology.add("Software News");
Technology.add("Database News");
Technology.add("Viruses News");
Technology.add("Wireless News");
Technology.add("Telecom News");
List<String> Interest=new ArrayList<String>();
Interest.add("");
listDataChild.put(listDataHeader.get(0), Business); // Header, Child data
listDataChild.put(listDataHeader.get(1), Entertainment);
listDataChild.put(listDataHeader.get(2), Health);
listDataChild.put(listDataHeader.get(3), Markets);
listDataChild.put(listDataHeader.get(4), Sports);
listDataChild.put(listDataHeader.get(5), Technology);
listDataChild.put(listDataHeader.get(7), Interest);
}
}
7.Here the output is shown below
Subscribe to:
Post Comments
(
Atom
)
And where is the delete icon and its functionality?
ReplyDeleteHi if i want insert gridview image inside expandable listiew. how i do?
ReplyDeleteThis comment has been removed by the author.
ReplyDeletehello
ReplyDeleteit is very nice tutorial but i want to populate expandable listview from sqlite
thank you
Nice tutorial but where you are getting values from sqlite database? These are all hard code values....
ReplyDeletePlease create tutorial of getting value from sqlite database and display on expandable listview with multiple rows and columns with child click event
Learning Code Examples
ReplyDelete