Android - Google Formlar gibi animasyonlarla EditText çizgi rengini nasıl değiştirebilirim?

Question

aşağıda gif gösterildiği gibi formlar google benzer bir animasyon elde etmek çalışıyorum:

EditText alt çizgi dolgu animasyon merkezinden başlayan rengini değiştirmek gerekir. Kolay olabilir ama android için yeni ve bu sorun için herhangi bir çevrimiçi kaynak bulamadım. Herkes bana biraz ipucu verebilir mi, yoksa bazı öğreticilere bunun nasıl yapılacağına dair bir link verebilir mi?

Answer 1

Lütfen bu blog'a bakın. Blog, elde etmek istediğiniz tam olarak aynı animasyon için bir geçici çözüm uygular. Sen FrameLayout#00000000 için EditText arka planını ayarlama ve iki Görüntüleme kullanarak bunu başarabilirsiniz (Üst üste biri, ilk başta görünmez olmak üst bir) alt satırında EditText olarak. EditText odağı artırdığında, Görünümü Görünümü'nü (bir üstte) görünür hale getirebilir ve benzer bir etki elde etmek için View görünümüne ölçek animasyonu ekleyebilirsiniz. Ben gibi görünen bir şey yaptılar

Answer 2

, senin TextView altına koymak olacaktır:

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

xml dosyasında:

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

Sen onu biraz geliştirmek zorunda).

Answer 3

Bence google bunu ViewAnimationUtils.createCircularReveal ile yapıyor. selector_line_bellow.xml: Burada

I (yukarıdaki API 21 içindir ve dikkat edin)

Ayrıca ben

nedenle aşağıdaki gerek daha iyi UX

için dokunma noktasını kullanmak unutmayın bu etkiyi elde nasıl

<?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> 

bizim EditText bu

benzeyecek

ve son dokunuş etkinlik sınıfında veya bu EditText kodu

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