Android - Wie ändert man EditText Linienfarbe mit Animation wie Google Forms?

Question

Ich versuche, eine Animation ähnlich zu erreichen Formen Google wie unten in der gif gezeigt:

Unterm Strich von EditText sollte Farbe mit Füllung ändern Animation aus dem Zentrum zu starten. Es könnte einfach sein, aber ich bin neu bei Android und ich habe keine Online-Ressource für dieses Problem gefunden. Kann mir jemand einen kleinen Hinweis geben oder einen Link zu einem Tutorial geben, wie kann ich das machen?

Answer 1

Bitte beachten Sie diese blog. Der Blog implementiert eine Problemumgehung für genau die gleiche Animation, die Sie erreichen möchten. Sie können dies erreichen, indem Sie den Hintergrund Ihrer EditText-#00000000 Einstellung und Verwendung von zwei Ansichten in FrameLayout (Ein übereinander, die obersten unsichtbar auf dem ersten zu sein) als untere Zeile EditText. Wenn EditText Fokus erhält dann können Sie die Ansicht (eine auf der Oberseite) sichtbar machen und Skalaanimation zur Ansicht hinzufügen, um ähnlichen Effekt zu erzielen.

Answer 2

ich etwas tat, das so aussieht, würde ich es unter die Textview setzen:

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 der XML-Datei:

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

Sie haben es ein wenig zu verbessern;).

Answer 3

Ich denke Google tut es mit ViewAnimationUtils.createCircularReveal.

Hier ist, wie ich diesen Effekt erreicht (beachten Sie, es ist für api 21 und höher)

Beachten Sie auch, dass ich Berührungspunkt für eine bessere UX

verwenden, so müssen wir folgendes: 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> 

unsere EditText wird wie folgt aussehen

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

und letzte Note ist in Ihrer Aktivitätsklasse oder wo auch immer diese EditText wird hinzufügen, um dieses Stück

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