How to work with ExpandableListView?

Question

Wellcome all

I have a ExpanableListView that i'm testing. I have a problem with the expand icon of the items. The icon is being painted overlaying the text title of each item. It means that for example, if the title of the first items is "Ducados", the icon is overlaying "Du" and only "cados" is visible

What can i do to align the text on the right of the expand icon?

this is the code:

public class MainActivity extends ExpandableListActivity {
ExpandableListAdapter mAdapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Set up our adapter
    mAdapter = new MyExpandableListAdapter();
    setListAdapter(mAdapter);
    registerForContextMenu(getExpandableListView());
}

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
    menu.setHeaderTitle("Sample menu");
    menu.add(0, 0, 0, "Sample action");
}

@Override
public boolean onContextItemSelected(MenuItem item) {
    ExpandableListContextMenuInfo info = (ExpandableListContextMenuInfo) item.getMenuInfo();

    String title = ((TextView) info.targetView).getText().toString();

    int type = ExpandableListView.getPackedPositionType(info.packedPosition);
    if (type == ExpandableListView.PACKED_POSITION_TYPE_CHILD) {
        int groupPos = ExpandableListView.getPackedPositionGroup(info.packedPosition);
        int childPos = ExpandableListView.getPackedPositionChild(info.packedPosition);
        Toast.makeText(this, title + ": Child " + childPos + " clicked in group " + groupPos, Toast.LENGTH_SHORT).show();
        return true;
    } else if (type == ExpandableListView.PACKED_POSITION_TYPE_GROUP) {
        int groupPos = ExpandableListView.getPackedPositionGroup(info.packedPosition);
        Toast.makeText(this, title + ": Group " + groupPos + " clicked", Toast.LENGTH_SHORT).show();
        return true;
    }

    return false;
}

public class MyExpandableListAdapter extends BaseExpandableListAdapter {
    // Sample data set.  children[i] contains the children (String[]) for groups[i].
    private String[] groups = { "Names", "Designation", "Gender", "Company" };
    private String[][] children = {
            { "abc", "xyz", "ash", "anu" },
            { "SSE", "TJ", "PM", "SE" },
            { "Male", "Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female Female " },
            { "yyyyyy", "xxxxx" }
    };

    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 TextView getGenericView() {
        // Layout parameters for the ExpandableListView
        AbsListView.LayoutParams lp = new AbsListView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        TextView textView = new TextView(MainActivity.this);
        textView.setLayoutParams(lp);
        textView.setTextSize(20);
        // Center the text vertically
        textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
        return textView;
    }

    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        TextView textView = getGenericView();
        textView.setText(getChild(groupPosition, childPosition).toString());
        textView.setTextSize(15);
        return textView;
    }

    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 = getGenericView();
        textView.setText(getGroup(groupPosition).toString());
        return textView;
    }

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

    public boolean hasStableIds() {
        return true;
    }   
}
}

Thanks

Answer 1

I remember running into a similar issue in one of my own apps.

In your getGenericView method, you can use TextView.setPadding to specify the left padding of the text so that it appears further to the right, and is not overlapped by the icon. Since the method sets the padding in pixels (which will vary depending on the screen's density), it is important to convert the pixels to density-independent pixels so that the padding and appearance is standardized from screen to screen.

Here's a full example of the method from my own code:

public TextView getGenericView() {
    // Padding values (in pixels)
    int left = 36; // to avoid being overlapped by the icon
    int right = 0; // not needed
    int top = 15; // space out the list a bit more
    int bottom = top; // space out the list a bit more

    // Get density of screen to convert px to dp
    float scale = m_Context.getResources().getDisplayMetrics().density;

    // Layout parameters for the ExpandableListView
    AbsListView.LayoutParams lp = new AbsListView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

    TextView textView = new TextView(MyActivity.this);
    textView.setLayoutParams(lp);
    // Center the text vertically
    textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
    // Set the text starting position
    textView.setPadding((int)(left * scale), (int)(top * scale), right, (int)(bottom * scale)); // left, top, right, bottom
    textView.setTextSize(20);
    return textView;
}

If you have multiple ExpandableListViews throughout your app, it may be better to specify the pixel sizes in the your app resources (res/values/dimen.xml) rather than here at the top of getGenericView, so that it is defined (and can be changed) in one place and you can reference it in all the lists.

Hope this helps!