Android - How do I change the color of an EditText line using animations like Google Forms?

Question

I am trying to create an animation similar to Google forms, as shown in the gif below:

The bottom line of the EditText should change color with fill animation, starting at the center. It may be easy, but I am new to android and I have not found any online resource for this problem. Can someone just give me a little hint or provide a link to some tutorial on how I can do this?

Answer 1

Please refer to the blog . The blog has a workaround for the very 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 the other, the top one invisible at first) as the bottom line of the EditText . When EditText gains focus, you can make the View visible (one on top) and add scale animations to the View to achieve a similar effect.

Answer 2

I think google does this using ViewAnimationUtils.createCircularReveal .

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

Also note that I use a touch point for a better UX

so we need the 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 the last touch is in your activity class or wherever this EditText is 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 3

I did something similar, I would put it under my TextView:

 package com.example.trist_000.teststack; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import android.view.animation.Animation; import android.view.animation.Transformation; public class customm extends View { private class myanim extends Animation{ public myanim(){ this.setRepeatMode(INFINITE); this.setRepeatCount(INFINITE); this.setDuration(2000); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { super.applyTransformation(interpolatedTime, t); time =(getWidth()/2)*interpolatedTime; postInvalidate(); } } public customm(Context context) { super(context); } public customm(Context context, AttributeSet attrs) { super(context, attrs); myanim anim = new myanim(); this.startAnimation(anim); } Paint paint = new Paint(); float time = 0; @Override public void onDraw(Canvas canvas){ paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(4); paint.setAntiAlias(true); paint.setColor(Color.BLACK); paint.setStrokeWidth(1); canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, paint); paint.setStrokeWidth(2); paint.setColor(Color.RED); canvas.drawLine(getWidth() / 2, getHeight()/2, (getWidth()/2)-time, getHeight()/2, paint); canvas.drawLine(getWidth() / 2,getHeight()/2, (getWidth()/2) +time, getHeight()/2, paint); super.onDraw(canvas); } } 

In your xml file:

 <com.example.trist_000.teststack.customm android:layout_width="300dp" android:layout_height="5dp" /> 

You need to improve it a bit;).