TextInputLayout with a drawable without the padding Hint

Sometimes you need a custom view

In the office, we are building a new app, and the UI team build a layout a little different to what I was expecting, if your UI team build something like this for you, don’t worry, everything is possible in the software world. So let’s get started. This is the layout we are going to build today:

Our little view we are gonna build

If you are a fast thinker you will go for the obvious solution for the first part of the Layout, you will put a TextInputLayout and a TextInputEditText inside of it, with the right margins and font sizes.
What about the second one? You probably will put a drawableLeft inside a secondary TextInputEditText and a drawablePadding to archive this layout, but this is probably not the correct way to go, ‘cause once you put the drawable and the hint goes to the top of the TextInputLayout, will have padding just after the drawable you set.

After thinking a little I thought we should make a custom view that should extend TextInputLayout and make a couple of modifications to a couple of classes.

TextInputLayout custom class

This view will work, no matter the drawable size, the first step start on the init() function that we have, inside the TextInputLayout class we are going to search for the object called collapsingTextHelper, this is a secondary class that is in charge of put the hint at the top of the view.

TextInputLayout searching for collapsingTextHelper

Inside the CollapsingTextHelper class, we can notice that we have access to the rect functions to make the calculations for space in the hint, inside this class, we are going to search for the filed collapsedBounds which is a Rect Object in charge of drawing the title.

collapsedBound = Rect()

And finally, we are going to look for the function called recalculate, that is almost self-explanatory, make the recalculations for the parts of the view

Recalculate function available

After making this changes over our init function in our custom view, we need to make a couple of changes onLayout function that will go exactly after onMesure and before onDraw, onLayout will assign a size and position to all of its children.

Finally, you should implement your class like this:

Implementation of your custom view

If you have any question, feel free to reach me out
Happy Coding 👩🏻‍💻