Animate Background View inside a Textview/Button Background Android

Question

I want to implement this button Where the grey background image would be moving from left to right in infinite loop.

Basically the animated grey colour tilted background from left to right.

Thanks in advance.

Answer 1

You can achieve it by this way. First create an animate vector drawable

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="400dp"
            android:height="100dp"
            android:viewportWidth="400"
            android:viewportHeight="100">
            <group android:name="group">
                <path
                    android:name="path"
                    android:fillAlpha="0.16"
                    android:fillColor="#9d9d9d"
                    android:pathData="M 41.149 0 L 125 0 L 84.627 100 L 0 100 L 41.149 0 Z"
                    android:strokeWidth="1" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:duration="1200"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="translateX"
                    android:valueFrom="-125"
                    android:valueTo="400"
                    android:valueType="floatType" />
                <objectAnimator
                    android:duration="200"
                    android:propertyName="translateX"
                    android:startOffset="1200"
                    android:valueFrom="-150"
                    android:valueTo="-150" />
            </set>
        </aapt:attr>
    </target>
</animated-vector>

Next, put it to your layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2C2C2C"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:cardCornerRadius="50dp"
        app:strokeColor="@color/white"
        app:strokeWidth="2dp"
        android:backgroundTint="#00000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Skip to Home"
            android:background="@drawable/avd_anim"
            android:textAllCaps="false"
            android:textSize="24dp"
            app:backgroundTint="@null" />
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Finally, implement it in Activity

val animatedDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.avd_anim)
animatedDrawable?.registerAnimationCallback(object : Animatable2Compat.AnimationCallback() {
        override fun onAnimationEnd(drawable: Drawable?) {
            animatedDrawable.start()
        }
})
findViewById<Button>(R.id.button).background = animatedDrawable
animatedDrawable?.start()

Answer 2

xml: under your button:

<View
     android:id="@+id/shine"
     android:layout_width="30dp"
     android:layout_height="113dp"
     android:layout_marginTop="-7dp"
     android:layout_marginBottom="-7dp"
     android:layout_marginLeft="40dp"
     android:layout_marginRight="-40dp"
     android:background="@drawable/bg_shine"
     android:rotation="20" />

bg_shine:

     <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
           android:centerColor="#AAffffff"
           android:endColor="#00ffffff"
           android:startColor="#00ffffff"/>
       </shape>

and code:

    View shine = view.findViewById(R.id.shine);
    shineAnimation(shine);

and:

    private void shineAnimation(View view) {
    // attach the animation layout Using AnimationUtils.loadAnimation
    Animation anim = AnimationUtils.loadAnimation(requireContext(), R.anim.left_right);
    view.startAnimation(anim);
    // override three function There will error
    // line below the object
    // click on it and override three functions
    anim.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            new Handler(Looper.getMainLooper()).postDelayed(() -> view.startAnimation(anim), 5000);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
}