Android – ¿Cómo cambiar el color de la línea EditText con animaciones como Google Forms?

Estoy tratando de lograr una animación similar a los formularios de google como se muestra en el gif a continuación: Introduzca aquí la descripción de la imagen

La línea inferior de EditText debe cambiar el color con la animación del relleno que comienza del centro. Podría ser fácil, pero soy nuevo en android y no encontré ningún recurso en línea para este problema. ¿Puede alguien simplemente darme una ligera sugerencia o proporcionar un enlace a algún tutorial sobre cómo puedo hacer eso?

    Por favor refiérase a este blog . El blog implementa una solución para exactamente la misma animación que desea lograr. Puede lograr esto configurando el fondo de su EditText a #00000000 y utilizando dos vistas en FrameLayout (una encima de otra, la primera invisible al principio) como línea inferior de EditText . Cuando EditText gana el foco entonces usted puede hacer que la Vista (una en la parte superior) sea visible y añadir animación de escala a la Vista para lograr un efecto similar.

    Creo que Google lo hace con ViewAnimationUtils.createCircularReveal .

    Aquí es cómo conseguí este efecto (nota que es para api 21 y arriba)

    También tenga en cuenta que el uso de punto de contacto para UX mejor

    Por lo que necesitamos seguir: 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> 

    Nuestro EditText se verá así

     <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"/> 

    Y el último toque está en su clase de actividad o donde quiera que este EditText se utilice agregue este pedazo de código

     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; } }); 

    Hice algo que parece, lo pondría bajo su 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); } } 

    En su archivo xml:

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

    Tienes que mejorar un poco;).

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.