एंड्रॉइड - Google फॉर्म की तरह एनीमेशन के साथ एडिटटेक्स्ट लाइन रंग कैसे बदलें?

Question

मैं नीचे के रूप में gif में दिखाया गया एक एनीमेशन इसी प्रकार गूगल को प्राप्त करने के लिए कोशिश कर रहा हूँ:

EditText का लब्बोलुआब यह भरने एनीमेशन केंद्र से शुरू के साथ रंग बदलना चाहिए। यह आसान हो सकता है लेकिन मैं एंड्रॉइड के लिए नया हूं और मुझे इस समस्या के लिए कोई ऑनलाइन संसाधन नहीं मिला। क्या कोई मुझे थोड़ा सा संकेत दे सकता है या कुछ ट्यूटोरियल के लिए एक लिंक प्रदान कर सकता है कि मैं यह कैसे कर सकता हूं?

Answer 1

कृपया इस blog देखें। ब्लॉग उसी एनीमेशन के लिए एक वर्कअराउंड लागू करता है जिसे आप प्राप्त करना चाहते हैं। आप #00000000 करने के लिए अपने EditText की पृष्ठभूमि की स्थापना और में दो दृश्य का उपयोग कर FrameLayout द्वारा इस लक्ष्य को हासिल कर सकते हैं (दूसरे के ऊपर एक, शीर्ष एक पहली बार में अदृश्य होने) का लब्बोलुआब यह EditText के रूप में। जब एडिटटेक्स्ट लाभ फोकस करता है तो आप देख सकते हैं (शीर्ष पर एक) दृश्यमान और पर स्केल एनीमेशन जोड़ें समान प्रभाव प्राप्त करने के लिए देखें।

Answer 2

मैं कुछ है कि तरह लग रहा है था, मैं इसे अपने 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); 
} 
} 

अपने xml फ़ाइल में:

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

आप इसे एक छोटा सा सुधार करने के लिए है;)।

Answer 3

मुझे लगता है कि Google ViewAnimationUtils.createCircularReveal के साथ ऐसा करता है। selector_line_bellow.xml:

यहाँ कैसे मैं इस आशय हासिल की (ध्यान दें यह एपीआई 21 के लिए है और इसके बाद के संस्करण)

भी ध्यान रखें कि मैं बेहतर UX

के लिए स्पर्श बिंदु का उपयोग

तो हम निम्नलिखित की जरूरत है

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

हमारे EditText इस

तरह दिखेगा

और अंतिम स्पर्श अपनी गतिविधि कक्षा में है या जहां इस EditText उपयोग किया जाएगा कोड

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