<![CDATA[Sage42]]>2013-01-30T00:00:26+08:00http://www.sage42.org/Octopress<![CDATA[Make better android buttons with image and text]]>2013-01-20T00:03:00+08:00http://www.sage42.org/blog/2013/01/20/make-better-android-buttons-with-image-and-textToday the design comes in from the designer for what I thought at first look was a pair of simple buttons with text and icon.
Turns out, it wasn’t so simple.
The Design
Now I incorrectly assumed that buttons like those at the top were pretty common place either I’m wrong or judging from the stackoverflow.com articles
others are creating buttons that aren’t as ‘pixel perfect’ as my situation requires.
Anyhow, on with the code:
Version 1: Text Button with Drawable
Using what appears to the the ‘standard’ approach.
As you can see, there is an inconsistent spacing between the text and the drawable.
While I can move the drawable in from the left using android:drawablePadding=”-dp”
this still with result in inconsistent results.
This is particularly obvious when the some non-english languages where the length of “OK” and “CANCEL” can differ quite a bit.
Version 2: Compound Drawable with onClick
Resorting to just a standard compound drawable (image and button together) doesnt get you any closer, its still the same 2 problems.
Problem 1: The padding on the drawable is relative to the outside of the “button” instead of being relative to the text.
Problem 2: The text and drawable together are not centered in the “button”.
Version 3: Way too much code, but it works.
When I “waste” so much time on something that is seemingly so trivial I tend to resort to a “sledgehammer” approach.
This is an approach that I know works even though I consider it ugly and not at all well crafted.
Conclusion
I think I would feel less disgusted by this result if I could find some time to refactor it into some standard component.
The performance will still suffer slightly from the complicated layout but at least the coding experience and readability of the code would be greatly increase.
