ExpandableListView

Custom ExpandableListview

Hi expandable List-view is two level tree view provided by Android. In this view contains two types of categories. First type is Group-Elements and second one is Child-Elements. And also called parent and child elements. The main aim of this example is customise the expandable list-view as picture a shown bellow. Means I covered some important topics about expandable list-view when I face in my experience.

Below code is main.xml contains the expandable list-view.

<!--?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="fill_parent"><expandablelistview android:id="@+id/android:list"android:layout_width="fill_parent" android:layout_height="fill_parent"android:groupindicator="@drawable/group_indicator.xml"><textview android:id="@+id/android:empty"android:layout_width="fill_parent" android:layout_height="fill_parent"android:text="@string/main_no_items"></textview></expandablelistview></linearlayout>

group_row.xml this is contains the layout for Expandable list view group view structure.

<!--?xml version="1.0" encoding="utf-8"? --><linearlayout android:id="@+id/groupname"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="40dip"><textview android:id="@+id/tvGroupName" android:layout_width="wrap_content"android:layout_height="40dip" android:textsize="16sp"android:textstyle="bold" android:paddingleft="30dip" android:gravity="center_vertical"></textview></linearlayout>

child_row.xml this is contains the layout for Expandable list view group structure.

<!--?xml version="1.0" encoding="utf-8"? --><linearlayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal" android:layout_width="fill_parent"android:layout_height="40dip" android:gravity="center_vertical"><textview android:id="@+id/tvPlayerName" android:paddingleft="50dip"android:textsize="14sp" android:layout_width="wrap_content"android:layout_height="30dip" android:gravity="center_vertical"></textview></linearlayout>

First read the reference of the expandable listview from xml to activity class.

public class ExpList extends ExpandableListActivity {/** * strings for group elements */static final String arrGroupelements[] = { "India", "Australia", "England","South Africa" };/** * strings for child elements */static final String arrChildelements[][] = {{ "Sachin Tendulkar", "Raina", "Dhoni", "Yuvi" },{ "Ponting", "Adam Gilchrist", "Michael Clarke" },{ "Andrew Strauss", "kevin Peterson", "Nasser Hussain" },{ "Graeme Smith", "AB de villiers", "Jacques Kallis" } };DisplayMetrics metrics;int width;ExpandableListView expList;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);expList = getExpandableListView();metrics = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(metrics);width = metrics.widthPixels;// this code for adjusting the group indicator into right side of the// viewexpList.setIndicatorBounds(width - GetDipsFromPixel(50), width- GetDipsFromPixel(10));expList.setAdapter(new ExpAdapter(this));expList.setOnGroupExpandListener(new OnGroupExpandListener() {@Overridepublic void onGroupExpand(int groupPosition) {Log.e("onGroupExpand", "OK");}});expList.setOnGroupCollapseListener(new OnGroupCollapseListener() {@Overridepublic void onGroupCollapse(int groupPosition) {Log.e("onGroupCollapse", "OK");}});expList.setOnChildClickListener(new OnChildClickListener() {@Overridepublic boolean onChildClick(ExpandableListView parent, View v,int groupPosition, int childPosition, long id) {Log.e("OnChildClickListener", "OK");return false;}});}public int GetDipsFromPixel(float pixels) {// Get the screen's density scalefinal float scale = getResources().getDisplayMetrics().density;// Convert the dps to pixels, based on density scalereturn (int) (pixels * scale + 0.5f);}}

For customising the Exp Listview main thing is adapter. Android provides BaseExpandableListAdapter for customising the view. Bellow is the code for design of Adapter.

/** * This is adapter for expandable list-view for constructing the group and child * elements. */public class ExpAdapter extends BaseExpandableListAdapter {private Context myContext;public ExpAdapter(Context context) {myContext = context;}@Overridepublic Object getChild(int groupPosition, int childPosition) {return null;}@Overridepublic long getChildId(int groupPosition, int childPosition) {return 0;}@Overridepublic View getChildView(int groupPosition, int childPosition,boolean isLastChild, View convertView, ViewGroup parent) {if (convertView == null) {LayoutInflater inflater = (LayoutInflater) myContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);convertView = inflater.inflate(R.layout.child_row, null);}TextView tvPlayerName = (TextView) convertView.findViewById(R.id.tvPlayerName);tvPlayerName.setText(arrChildelements[groupPosition][childPosition]);return convertView;}@Overridepublic int getChildrenCount(int groupPosition) {return arrChildelements[groupPosition].length;}@Overridepublic Object getGroup(int groupPosition) {return null;}@Overridepublic int getGroupCount() {return arrGroupelements.length;}@Overridepublic long getGroupId(int groupPosition) {return 0;}@Overridepublic View getGroupView(int groupPosition, boolean isExpanded,View convertView, ViewGroup parent) {if (convertView == null) {LayoutInflater inflater = (LayoutInflater) myContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);convertView = inflater.inflate(R.layout.group_row, null);}TextView tvGroupName = (TextView) convertView.findViewById(R.id.tvGroupName);tvGroupName.setText(arrGroupelements[groupPosition]);return convertView;}@Overridepublic boolean hasStableIds() {return false;}@Overridepublic boolean isChildSelectable(int groupPosition, int childPosition) {return true;}}

group_indicator.xml
This the code for changing the default indicator image.

<!--?xml version="1.0" encoding="utf-8"? --><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_empty="true" android:drawable="@drawable/arrowright"><item android:state_expanded="true" android:drawable="@drawable/arrowdown"><item android:drawable="@drawable/arrowright"></item></item></item></selector>