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

I think google does it with ViewAnimationUtils.createCircularReveal.

Here is how I achieved this effect (note it is for api 21 and above)

Also note that I use touch point for better UX

so we need following: selector_line_bellow.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true"
          android:state_focused="true">
        <layer-list>
            <item android:bottom="-25dp">
                <shape android:shape="line">
                    <solid android:color="@android:color/transparent"/>
                    <stroke
                        android:width="3dp"
                        android:color="#017ba7"/>
                </shape>
            </item>

        </layer-list>
    </item>

    <!-- default-->
    <item >
        <layer-list>
            <item android:bottom="-25dp">
                <shape android:shape="line">
                    <solid android:color="@android:color/transparent"/>
                    <stroke
                        android:width="3dp"
                        android:color="#11017ba7"/>
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

our EditText will look like this

<EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:background="@drawable/selector_line_bellow"
                android:layout_margin="@dimen/margin_big"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:layout_height="wrap_content"/>

and last touch is in your activity class or wherever this EditText will be used add this piece of code

editText.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction()==MotionEvent.ACTION_DOWN) {
                ViewAnimationUtils.createCircularReveal(editText,
                        (int) event.getX(),
                        (int) event.getY(),
                        0,
                        editText.getHeight() * 2).start();
            }
            return false;
        }
    });

Answer 2

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.