There’s a lot of silence and confusion around this topic for a lot of designers who are tasked to design native Android apps for their companies or friends even. Especially new mobile app designers who solely rely on Google Materials website without ever picking up an Android OS phone and experiencing the platform first hand. This is why you see a lot of variations and rouge text inputs and inputs in general in all apps. That’s why this article will take a deeper dive into the right way to do you text inputs in your Android app and why. I’ll also show you different states so you know how to handle those correctly. Ready? Here we go!
The Wrong Way
Now at first glance looking solely at Google Materials Website, you’ll think text fields should be done as what they call, floating text input fields. WRONG!!! Pick up a phone and even bad apps that don’t follow Material and Google apps don’t follow this. The example shown below is Gmail, Calendar, Contacts, etc… This is more web and not a native app. The user may not consciously be aware of this or be able to call it out, but they will FEEL it and sub-consciously know something isn’t right. Come on? Even you have opened up an app and just have this nagging feeling that something is right, right?
The Right Way
Anyone who has used a smartphone either Android or iPhone knows what a native text input field is. It’s instinctual at this point. It’s a strong mental model that’s been established since the birth of smartphones. Oddly enough Google Material Design website only has a blurb about it and it’s hard to find much online about it either. I think this is SO Bizarre but as someone who constantly looking to build consistent and good apps for my users, I pick up the Pixel, Samsung S8 and any other Android OS phone I can to experience what is in the real world and not on a website, users will never look at. What did I find? I found Gmail, Google Calendar and so many more. Even apps that don’t follow Material strictly use these Full-Width Text Input Fields. When you see it, I bet you’ll be like OF COURSE!! LOL. Because even iOS uses these. It’s just a strong established pattern. Which is why I’m SHOCKED Google Material Design doesn’t call this out more clearly.
Other reasons we should only use Full-Width Text Input fields in native Android app designs are:
- It gets really ugly and clunky for the user if you are mixing list tiles with floating text fields, both because floating text fields should never live in a list tile but float on the background (white) and also because it’s confusing to look at with lines showing what you can click on and then other lines to type into that look different. Please, don’t get me started.
- Full-width keeps everything uninformed and thus keeping the user more focused on their task and less overwhelmed. When their eye hits it they feel like it’ll be easy and not complex. It also smoothly let you mix text input fields with selectors, dropdown menus, expansion panels and more which I go into more in other articles and articles to come.
- It’s an established pattern that will reduce friction and frustration on your users. And who doesn’t want that!
When Not To Use These
Currently in Google Material Design 1.0 and 2.0 there is no validation error patterns around full-width text input fields. So I would recommend not using these if you need to validate the users input and produce errors if something is wrong. In this case you should use a floating text input field or now as they are called, filled or outlined per Material Guidelines. This is your call as a designer and you could create error patterns around full-width text fields, but if you do this, please make sure that the user is clear on what is going on and how to proceed. You will be breaking a mental model they are use to and they will have to think for a second to figure out what went wrong and how to fix it. This is why I recommend only using these full-width text fields that you find in Gmail and other Google native apps, when you have no validation.
I hope this helps! Go design with excellence!
GMAIL FULL-WIDTH TEXT INPUT FIELD EXAMPLE