Android - How to change EditText line color with animation like Google Forms?

Question

I am trying to achieve an animation similar to google forms as shown in the gif below:

The bottom line of EditText should change color with fill animation starting from the center. It might be easy but I am new to android and I didn't find any online resource for this problem. Can anybody just give me a slight hint or provide a link to some tutorial on how can i do that?

Answer 1

Please refer to this blog. The blog implements a workaround for exactly the same animation you want to achieve. You can achieve this by setting the background of your EditText to #00000000 and using two Views in FrameLayout (One on top of another, the top one being invisible at first) as bottom line of EditText. When EditText gains focus then you can make the View (one on the top) visible and add scale animation to the View to achieve similar effect.