[Java for Android App Development] DHD22800:
Expandable List View

Hi guys.

I want to show you how to make an Expandable List View in HTC style.

Here are the images for expaded state: https://www.dropbox.com/s/3bv2sptohezn1g9/expand_states.zip?dl=0 download it and place pngs in /res/drawable-xhdpi.

Your adapter's layout (list_item.xml):

<?xml version="1.0" encoding="utf-8"?>
<com.htc.widget.HtcListItem xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:htc="http://schemas.android.com/apk/res/com.htc"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
android:id="@+id/list_item_img"
android:layout_width="@android:dimen/app_icon_size"
android:layout_height="@android:dimen/app_icon_size" />

<com.htc.widget.HtcListItem2LineText
android:id="@+id/list_item" />

<ImageView
android:id="@+id/group"
android:layout_width="@android:dimen/app_icon_size"
android:layout_height="@android:dimen/app_icon_size"
android:src="@drawable/common_expand" />

</com.htc.widget.HtcListItem>

Your Adapter:

public class ExpandableListAdapter extends BaseExpandableListAdapter {

private Context _context;
private List<String> _listDataHeader; // header titles
private List<String> _listDataHeaderSummary;
private HashMap<String, List<String>> _listDataChild;
private ImageView expState;

public ExpandableListAdapter(Context context, List<String> listDataHeader,
List<String> listDataHeaderSummary,
HashMap<String, List<String>> listChildData) {
this._context = context;
this._listDataHeader = listDataHeader;
this._listDataHeaderSummary = listDataHeaderSummary;
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_item, null);
}

HtcListItem2LineText listItem = (HtcListItem2LineText) convertView.findViewById(R.id.list_item);
convertView.findViewById(R.id.list_item_img).setVisibility(View.GONE);
listItem.setPrimaryText(childText);
listItem.setSecondaryTextVisibility(View.GONE);
((ImageView) convertView.findViewById(R.id.group)).setVisibility(View.GONE);
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);
String headerSummary = (String) getGroup2(groupPosition);
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.listitem_about, null);
}

HtcListItem2LineText listItem = (HtcListItem2LineText) convertView.findViewById(R.id.list_item);
convertView.findViewById(R.id.list_item_img).setVisibility(View.GONE);
listItem.setPrimaryText(headerTitle);
listItem.setSecondaryText(headerSummary);

expState = (ImageView) convertView.findViewById(R.id.group);
expState.setScaleType(android.widget.ImageView.ScaleType.CENTER_INSIDE);
return convertView;
}

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

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

@Override
public void onGroupCollapsed(int groupPosition) {
super.onGroupCollapsed(groupPosition);
if (expState!=null)
expState.setImageResource(R.drawable.common_expand);
}

@Override
public void onGroupExpanded(int groupPosition) {
super.onGroupExpanded(groupPosition);
if (expState!=null)
expState.setImageResource(R.drawable.common_collapse);
}
}

Now you can setup list like this:

//declare global variables
ExpandableListAdapter listAdapter;
HtcExpandableListView expListView;
List<String> listDataHeader, listDataHeaderSummary;
HashMap<String, List<String>> listDataChild;

/*
* Preparing the list data
*/
private void prepareListData() {
listDataHeader = new ArrayList<String>();
listDataHeaderSummary = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();
listDataChildLinks = new HashMap<String, List<String>>();

listDataHeader.add("Some header");
listDataHeaderSummary.add("His summary");

listDataHeader.add("2nd header");
listDataHeaderSummary.add("2nd summary");

// Adding child data
List<String> first = new ArrayList<String>();
first.add("1st element - 1st child");
first.add("1st element - 2nd child");

List<String> second = new ArrayList<String>();
second.add("2nd element - 1st child");
second.add("2nd element - 2nd child");
second.add("2nd element - 3nd child");

//Headers and Childs
listDataChild.put(listDataHeader.get(0), first);
listDataChild.put(listDataHeader.get(1), second);
}

And setup ExpandableListView:

Activity/Fragment layout:

<?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="match_parent"
android:orientation="vertical" >

<com.htc.widget.HtcListItemSeparator
android:id="@+id/separator_credits"
android:fontFamily="sans-serif-condensed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:htc="http://schemas.android.com/apk/res/com.htc"
android:text="@string/credits"/>

<com.htc.widget.HtcExpandableListView
android:id="@+id/lvExp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"/>

</LinearLayout>

Java code for activity/fragment (place it in onCreate/onCreateView):

// get the listview
expListView = (HtcExpandableListView) view.findViewById(R.id.lvExp);

// preparing list data
prepareListData();

//Findind HtcListItemSepartor element in View and setting it some text
HtcListItemSeparator credits = (HtcListItemSeparator) view.findViewById(R.id.separator_credits);
credits.setText(0, "Credits");

//Setupping Adapter
listAdapter = new ExpandableListAdapter(getActivity(),
listDataHeader,
listDataHeaderSummary,
listDataChild,
listDataChildLinks);

// setting list adapter
expListView.setAdapter(listAdapter); //Set adapter to HtcExpandableListView
expListView.setDividerHeight(0); //Set Height to 0 because we not want dividers

Home you like :