how to display list of folders and files using android's expandable listview?

Question

I'm trying to display a list of files and folders and I know how to do it in listview. However, for better ui usage, I would rather do it like the image below.

This is what I initially did with just ListView:

I have 2 activities. On the 1st activity,

1. it shows 3 folders that are created by me (sort of works as system folder)
2. when I click on 1 of the folders, it will intent to the 2nd activity, showing the files that are in that folder only.

not only that, on the 2nd activity,

1. when i clicked on a button, the listview will change from normal listview to a check-list type listview, so that user can delete multiple files.

so what I hope to do is, following the image shown above..

1. on the blue highlight, it will show the 3 folders.
2. when i clicked on the arrow button, it will show the files correspond to it
3. with a edit button included, the listview showing vehicles (vehicle no.1, no.2 etc) will change to a check-list, so that user could delete multiple files.

how do I do that ? as I've never 'touched' an expandable listview before.

Answer 1

create a custom ExpandableListView adapter:

public class customListAdapter extends BaseExpandableListAdapter {

    private File folder1;
    private File folder2;

    private String[] groups = {};
    private String[][] children = {};

    public customListAdapter() {
        // Sample data set.  children[i] contains the children (String[]) for groups[i].
        folder1 = new File (Environment.getExternalStorageDirectory(),"/Folder1");
        folder2 = new File (Environment.getExternalStorageDirectory(),"/Folder2");

        String[] fileList1 = folder1.list();
        String[] fileList2 = folder2.list();

        Arrays.sort(fileList1);
        Arrays.sort(fileList2);

        groups = new String[] { "Folder1" , "Folder2" };
        children = new String[][] { fileList1, fileList2 };
    }//constructor


    public Object getChild(int groupPosition, int childPosition) {
        return children[groupPosition][childPosition];
    }

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

    public int getChildrenCount(int groupPosition) {
        return children[groupPosition].length;
    }

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

        TextView textView = new TextView(this);
        textView.setBackgroundColor(Color.BLACK);
        textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
        textView.setPadding(100, 5, 0, 5);
        textView.setTextColor(Color.WHITE);
        textView.setTextSize(23);
        textView.setId(1000);

        textView.setText(getChild(groupPosition, childPosition).toString());
        return textView;
    }//getChildView

    public Object getGroup(int groupPosition) {
        return groups[groupPosition];
    }

    public int getGroupCount() {
        return groups.length;
    }

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

    public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
            ViewGroup parent) {
        TextView textView = new TextView(this);
        textView.setBackgroundColor(Color.WHITE);
        textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
        textView.setPadding(100, 0, 0, 0);
        textView.setTextColor(Color.BLACK);
        textView.setTextSize(25);
        textView.setText(getGroup(groupPosition).toString());

        return textView;
    }

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

    public boolean hasStableIds() {
        return true;
    }

}//customListAdapter

then, reference it using:

setContentView(R.layout.preferedlayout);
// Set up our adapter
listAdapter = new customListAdapter();

expLV = (ExpandableListView) findViewById(R.id.expList);
expLV.setAdapter(listAdapter);

hope this help other people. =)

Answer 2

If i understood your question correctly, you can set an adapter in your ListView that will be inflate some sort of layout you want.

example:

listView = (ListView)findViewById(R.id.feedList);
MyAdapter adapter = new MyAdapter(this, items, Color.WHITE);
listView.setAdapter(adapter);

items is ArrayList of some sort entities

adapter Code:

public class MyAdapter extends BaseAdapter {
private ArrayList<MyItem> items = null;
private LayoutInflater layoutInflater = null;
MyAdapter(Context context, ArrayList<MyItem> items, int bgColor){
    this.items = items;
    layoutInflater = LayoutInflater.from(context);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View row = layoutInflater.inflate(R.layout.my_layout, null);
    ImageView imageView = (ImageView) row.findViewById(R.id.image);
    imageView.setImageResource(R.drawable.my_image);
    TextView text = (TextView) row.findViewById(R.id.title);
    text.setText("Hi");
    return row;
}
}