Expandable List Empty Space Mobile Device

Question

I am a developer trying to make an information page for an application in development. What this uses is an expandable list, that looks as follows when not expanded:

This is the generic android design with a certain color background. When a certain group is expanded, the list looks as follows:

While the second (expanded) look is what my app in general exhibits (flat colored icons over a pastel black background), the un-expanded view looks very dull and not-so professional.

Now, I am in no way a qualified UX designer, just a developer in a low budget team. How can I make this un-expanded (first screenshot) design stand out or rather, what are the mistakes I am doing that makes this unexpanded view look so dull?

Thanks.

Answer 1

I believe the screenshots you've provided are more than enough to give you some tips on how to improve the looks of your not expanded screen.

Try the following:

• add some generic icons to each main category. You can either use some flat (2 colour) icons or those colourful pictograms. Use it wisely, otherwise your app may turn into fun-fair advertisement.
• use varied font size, i.e. "Battery information" can have some small-font explanation like "Battery usage, estimated remaining time" etc.
• use correct indent, i.e.when you expand "Hardware information", the sub-items should be indented to indicate that they are the subcategories and not the following main categories.