1. Make application interface: The main layout of this app
demo have a text view, a button and an expandable list view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout android:id="@+id/linear1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
>
<Button
android:id="@+id/btn1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:textSize="22dp"
android:text="Buy all cars
you have selected" />
</LinearLayout>
<ExpandableListView
android:id="@+id/expandableListView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/linear1"
android:layout_below="@+id/linear2"
android:groupIndicator="@drawable/group_indicator_selector"
android:background="@android:color/holo_blue_light" >
</ExpandableListView>
<LinearLayout android:id="@+id/linear2"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@android:color/holo_blue_dark"
android:gravity="center">
<TextView
android:id="@+id/text_intro"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center_vertical|center_horizontal"
android:textColor
= "#FFFFFF"
android:text="Select cars
you want to buy" />
</LinearLayout>
</RelativeLayout>
For android:groupIndicator of
expandable list, create res/drawable/group_indicator_selector.xml
and parse all xml content below:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_expanded="true"
android:drawable="@drawable/group_indicator_expanded"
/>
<item android:drawable="@drawable/group_indicator"
/>
</selector>
Now
is the time we customize our expandable list view by create the layout for each
group item and child item of it:
For
group item: Download : Code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<CheckBox android:id="@+id/cbx1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:button="@drawable/checkbox_selector"
/>
<ImageView android:id="@+id/image1"
android:src="@drawable/ic_launcher"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="25dp"
/>
<TextView
android:id="@+id/text1"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginLeft="95dp" android:gravity="center_vertical"
android:text="TextView"
android:textColor
= "#000000"/>
</RelativeLayout>
Customize checkbox in group
item with android:button attribute by
make a checkbox_selector.xml in
drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="@drawable/check" />
<item android:state_checked="false"
android:drawable="@drawable/uncheck" />
</selector>
For children item:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView android:id="@+id/image1"
android:src="@drawable/ic_launcher"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="25dp"
/>
<TextView
android:id="@+id/text1"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="95dp"
android:gravity="center"
android:text="TextView"
android:textColor =
"#000000"/>
</RelativeLayout>
Thus
we have completed the design of the interface. Now begin make some codes.
2. Code
2.1.
We
start by creating the SampleExpandableListAdapter
for ExpandableListView
package com.example.expandablelist;
import java.util.HashMap;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.text.Html;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.ExpandableListAdapter;
public class SampleExpandableListAdapter extends BaseExpandableListAdapter implements ExpandableListAdapter {
public Context context;
CheckBox
checkBox;
private LayoutInflater
vi;
private String[][] data;
int _objInt;
public static Boolean checked[] = new Boolean[1];
HashMap<Long,Boolean> checkboxMap = new HashMap<Long,Boolean>();
private static final int GROUP_ITEM_RESOURCE = R.layout.group_item;
private static final int CHILD_ITEM_RESOURCE = R.layout.child_item;
public String []check_string_array;
public SampleExpandableListAdapter(Context
context, Activity activity, String[][] data) {
this.data = data;
this.context = context;
vi = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
_objInt = data.length;
check_string_array = new String[_objInt];
popolaCheckMap();
}
public void popolaCheckMap(){
SharedPreferences settings =
PreferenceManager.getDefaultSharedPreferences(context);
String buffer = null;
for(int i=0; i<_objInt; i++){
buffer
= settings.getString(String.valueOf((int)i),"false");
if(buffer.equals("false"))
checkboxMap.put((long)i, false);
else checkboxMap.put((long)i, true);
}
}
public class CheckListener implements OnCheckedChangeListener{
long pos;
public void setPosition(long p){
pos = p;
}
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
Log.i("checkListenerChanged", String.valueOf(pos)+":"+String.valueOf(isChecked));
checkboxMap.put(pos,
isChecked);
if(isChecked == true) check_string_array[(int)pos] = "true";
else check_string_array[(int)pos] = "false";
// save
checkbox state of each group
SharedPreferences settings =
PreferenceManager.getDefaultSharedPreferences(context);
SharedPreferences.Editor
preferencesEditor = settings.edit();
preferencesEditor.putString(String.valueOf((int)pos), check_string_array[(int)pos]);
preferencesEditor.commit();
}
}
public String
getChild(int groupPosition, int childPosition) {
return data[groupPosition][childPosition];
}
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
public int getChildrenCount(int groupPosition) {
return data[groupPosition].length;
}
public View
getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
View v = convertView;
String child = getChild(groupPosition,
childPosition);
int id_res = 0;
if(groupPosition == 0){
if(childPosition == 0) id_res =
R.drawable.audi_a4;
if(childPosition == 1) id_res =
R.drawable.audi_q7;
if(childPosition == 2) id_res =
R.drawable.audi_r8;
}
else if(groupPosition == 1){
if(childPosition == 0) id_res =
R.drawable.bmw_m6;
if(childPosition == 1) id_res =
R.drawable.bmw_x6;
}
else if(groupPosition == 2){
if(childPosition == 0) id_res =
R.drawable.ferrari_enzo;
if(childPosition == 1) id_res =
R.drawable.ferrari_f430;
if(childPosition == 2) id_res =
R.drawable.ferrari_f430_italia;
}
if (child != null) {
v = vi.inflate(CHILD_ITEM_RESOURCE, null);
ViewHolder holder = new ViewHolder(v);
holder.text.setText(Html.fromHtml(child));
holder.imageview.setImageResource(id_res);
}
return v;
}
public String
getGroup(int groupPosition) {
return "group-" + groupPosition;
}
public int getGroupCount() {
return data.length;
}
public long getGroupId(int groupPosition) {
return groupPosition;
}
public View
getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
View v = convertView;
String group = null;
int id_res = 0;
long group_id = getGroupId(groupPosition);
if(group_id == 0){
group
= "Audi";
id_res
= R.drawable.audi;
}
else if(group_id == 1){
group
= "BMW";
id_res
= R.drawable.bmw;
}
else if(group_id == 2){
group
= "Ferrari";
id_res
= R.drawable.ferrari;
}
if (group != null) {
v = vi.inflate(GROUP_ITEM_RESOURCE, null);
ViewHolder holder = new ViewHolder(v);
holder.text.setText(Html.fromHtml(group));
holder.imageview.setImageResource(id_res);
holder.checkbox.setFocusable(false);
CheckListener checkL = new CheckListener();
checkL.setPosition(group_id);
holder.checkbox.setOnCheckedChangeListener(checkL);
holder.checkbox.setChecked(checkboxMap.get(group_id));
}
return v;
}
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
public boolean hasStableIds() {
return true;
}
}
2.2. Create view holder class to hold all component of group item or
child item
package com.example.expandablelist;
import android.view.View;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.TextView;
public class ViewHolder {
public TextView text;
public CheckBox checkbox;
public ImageView imageview;
public ViewHolder(View v) {
this.text =
(TextView)v.findViewById(R.id.text1);
this.checkbox = (CheckBox)v.findViewById(R.id.cbx1);
this.imageview = (ImageView)v.findViewById(R.id.image1);
}
}
2.3. Then in the main activity, set
adapter for expandable list view and when user click on the button will show all
groups on expandable list view has checked on checkbox by Toast Message.
package com.example.expandablelist;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.view.View;
import android.widget.Button;
import android.widget.ExpandableListView;
import android.widget.Toast;
public class ExpandablelistActivity extends Activity {
final Context context = this;
private static final String[][] data = {{"audia4","audiq7","audir8"},{"bmwm6","bmwx6"},{"ferrarienzo","ferrarif430","ferrarif430italia"}};
private
ExpandableListView expandableListView;
Button button1;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_expandablelist);
button1 = (Button)findViewById(R.id.btn1);
expandableListView =
(ExpandableListView)findViewById(R.id.expandableListView1);
expandableListView.setAdapter(new SampleExpandableListAdapter(context, this, data));
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
SharedPreferences
settings = PreferenceManager.getDefaultSharedPreferences(context);
String
buffer = null;
String output_String = "";
for(int i=0; i<3; i++){
buffer
= settings.getString(String.valueOf((int)i),"false");
if(buffer.equals("true"))
output_String
+= "group " + i + " ";
}
output_String += "is checked";
Toast.makeText(ExpandablelistActivity.this, output_String, Toast.LENGTH_SHORT).show();
}
});
}
}
package DucNguyen.example.customlistview;
import java.util.List;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class FootballLegendListAdapter extends ArrayAdapter<FootballLegend> {
private int resource;
private LayoutInflater inflater;
private Context context;
public FootballLegendListAdapter ( Context
ctx, int resourceId,
List<FootballLegend> objects) {
super( ctx, resourceId, objects );
resource = resourceId;
inflater = LayoutInflater.from( ctx
);
context=ctx;
}
@Override
public View getView ( int position, View convertView,
ViewGroup parent ) {
convertView
= ( RelativeLayout ) inflater.inflate( resource, null );
FootballLegend
Legend = getItem( position );
TextView
legendName = (TextView) convertView.findViewById(R.id.legendName);
legendName.setText(Legend.getName());
TextView
legendBorn = (TextView) convertView.findViewById(R.id.legendBorn);
legendBorn.setText(Legend.getNick());
ImageView
legendImage = (ImageView) convertView.findViewById(R.id.legendImage);
String
uri = "drawable/" +
Legend.getImage();
int imageResource = context.getResources().getIdentifier(uri, null, context.getPackageName());
Drawable image = context.getResources().getDrawable(imageResource);
legendImage.setImageDrawable(image);
ImageView NationImage = (ImageView)
convertView.findViewById(R.id.Nation);
uri
= "drawable/" +
Legend.getNation();
imageResource = context.getResources().getIdentifier(uri, null, context.getPackageName());
image = context.getResources().getDrawable(imageResource);
NationImage.setImageDrawable(image);
return convertView;
}
}
