Android: ExpandableListActivity icons overlapping text

Question

I'm trying to build a very simple ExpandableListActivity based on the API Demos Sample Code:

Unfortunately, even though the demo just uses the default layout, the layout doesn't look right. It seems the text isn't indented enough, such that the expand/collapse icons overlap the list item text, as the screenshot demonstrates.

Why is this happening and how can I fix it?

Thanks!

Answer 1

The problem lies in the getGenericTextView() method of the sample code:

// Set the text starting position
textView.setPadding(36, 0, 0, 0);

setPadding(...) sets the padding (intrinsic space) in pixels, meaning the result of this indenting approach will differ per device. You seem to be using an hdpi device with a relatively large horizontal screen resolution, resulting in visually too little space on the lefthand side of the TextView. For some more explanation on this issue, please read the documentation here.

That being said, you can easily overcome the problem by setting a density independent pixel (d(i)p) value, such that the visually indented space will be identical across different resolutions. You can use the TypedValue utility class for this:

int dips = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 36, getResources().getDisplayMetrics());

Alternatively you could inflate a TextView from xml, on which you can set the density independent properties at design time, in stead of doing it on the fly at runtime.