Wednesday, 14 October 2015

Beware EditText on API 21


Beware EditText on API 21

Check out these two EditTexts. One is on an API 21 device, the other on an API 22 device.
See the difference? It's even more pronounced with "show layout bounds" enabled:
The height and vertical alignment of the EditTexts are different! This was caused by a change in the background of EditText between v21 and v22 (diff).
This change can cause sadness if your EditText is vertically aligned with otherViews, such as this case in Trello:
The text should be aligned with the icons, yet clearly it's not. The screenshot above is from 5.0; any other version of Android looks perfectly fine.
This problem crops up even if you're using AppCompat. AppCompat usually defers to the system material styles on v21+, which is the source of the problem.


Both solutions I've come up with use resource qualifiers to handle API 21 in a special manner.
One possibility is to import your own EditText background assets for API 21. Unless your app is filled with vertically-aligned EditTexts this seems like more effort than it's worth, since precision-targeting the background of EditTexts for just a single API version is tricky.
The hackier (but easier) solution is to just define different margins or paddings based on the API level. For example, I found that they're ~6dp off, so you end up with resources like this:
<!-- values/dimens.xml -->  
<dimen name="edit_text_spacing">6dp</dimen>

<!-- values-v21/dimens.xml -->  
<dimen name="edit_text_spacing">0dp</dimen>

<!-- values-v22/dimens.xml -->  
<dimen name="edit_text_spacing">6dp</dimen>  
I'd be the first to admit it's ugly, but if there's only a handful of places you're fixing the problem, it's not so bad.

No comments:

Post a Comment