Easy Mode Android UI Design

November 20, 2016

If you’d rather have a working app than waste time on making a pretty UI, or if the idea of making a pretty UI is intimidating, then this is for you.

I can’t make you a great designer (heck, I’m definitely not one), but I can at least give a few tips on how to make one that’s acceptable.

1: Use predefined values

When I see paddingLeft="3dp" I cry. And paddingLeft="@dimen/main_list_profile_image_margin_left" is just as bad.

Do yourself a favor. You’re a programmer. Reuse variables.

This is what I copy/paste into every project I work on.

    <dimen name="spacingHuge">32dp</dimen>
    <dimen name="spacingLarge">24dp</dimen>
    <dimen name="spacingMedium">16dp</dimen>
    <dimen name="spacingSmall">8dp</dimen>
    <dimen name="spacingTiny">4dp</dimen>
    <!-- -->
    <!-- Optional -->
    <dimen name="textTitle">20sp</dimen>
    <dimen name="textSubtitle">16sp</dimen>
    <dimen name="textHint">12sp</dimen>

These will cover 95% of your spacing needs. In fact, spacingSmall and spacingMedium will cover 50% on their own.

Why? Because a good UI is consistent, and because material design is based on a grid of 8dp. By using values that always keep you on the grid, you are turning on Easy Mode for UI design.

2: Don’t make your own color scheme*

Purple, green, and yellow. Lovely

Better safe than sorry. Use something like MaterialPalette.com to choose from two approved material design colors. You can still go wrong, but it’ll be a lot more difficult.

And remember: when in doubt, use blue and orange.

*unless you’re confident enough in design to do so, in which case maybe you should be giving me pointers

3: Use Google’s icons

This is a no-brainer for many people, and yet we still see many, many icons that look like they were taken directly from iOS or clipart.

Guys, Google has a lot of free material icons.

https://materialdesignicons.com/

This is your new icon repository. All of Google’s icons are there and searchable, along with lots more created by the community that fit in seamlessly.

Arrows for all

If the exact icon you want isn’t there and you can’t find another one that will work, then you may need an artist. For most of us, though, this will be enough.

Conclusion

There you have it. Three simple ways to make a UI that doesn’t suck too badly. Got any other tips? Let me know!


Follow @davidwhitman    Star    Issue

Android Dev