Android - How to change EditText line color with animation like Google Forms?
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;
}
});
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.