Animate layout's background color change

Question

I have a RelativeLayout to which I have set a background from drawable.I was able to change the background of RelativeLayout to another when the RadioButton is checked. But how do I give an animation to it when it changes?

Code: activity_main.xml:

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="@drawable/original"
    android:id="@+id/rel1">
    <RadioButton
        android:id="@+id/radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

original.xml(drawable):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#ffffff">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#2196F3">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

Java Class:

radio.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    if(b){
                    relativeLayout.setBackgroundResource(R.drawable.pressed);
                }
            }
        });

try this https://stackoverflow.com/questions/11419141/fading-in-text-in-android-using-animationutils-loadanimation — Aniruddh Parihar, Oct 02 '17 at 13:42

azizbekian · Answer 1 · 2017-10-02T14:12:49.620

The problem boils down to having somehow clipped corners and animating the layout background. So, in theory, we can set a foreground drawable to the layout and animate background drawable using ArgbEvaluator.

Moving to practice.

Take a look at this answer, where the author shares a mask drawable, which can be handy for your problem:

Apply that drawable as a foreground of your layout:

<RelativeLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:foreground="@drawable/frame"
    android:background="@color/colorAccent" />

In the code, whenever needed to perform animation:



    final int from = ContextCompat.getColor(this, R.color.colorAccent);
    final int to   = ContextCompat.getColor(this, R.color.colorPrimary);

    ValueAnimator anim = new ValueAnimator();
    anim.setIntValues(from, to);
    anim.setEvaluator(new ArgbEvaluator());
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            view.setBackgroundColor((Integer)valueAnimator.getAnimatedValue());
        }
    });

    anim.setDuration(1000);
    anim.start();

Here's what you'll get on output:

If you want to change frame drawable's color, you can wrap it into an xml and apply android:tint.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <bitmap android:src="@drawable/frame" android:tint="#ccaaff"/>
    </item>
</layer-list>

Now set this drawable as the foreground of your layout.

When I set drawable as foreground the radio button became invisible — jobin, Oct 02 '17 at 14:19
When I set colorAccent as background the edges are of diiferent color — jobin, Oct 02 '17 at 14:25

score -1 · Answer 2 · answered Aug 15 '20 at 13:42

The same effect can be achieved entirely in Code

Create Background with Corner of Rectangle Programmatically

    //Background
    backgroundDrawable = GradientDrawable()
    backgroundDrawable.cornerRadius = rectangleCornerRadius
    backgroundDrawable.shape = GradientDrawable.RECTANGLE
    backgroundDrawable.setColor(rectangleColor)
    background = backgroundDrawable

Animate Color Change

  val objectAnimator = ObjectAnimator.ofObject(backgroundDrawable, "color",
        ArgbEvaluator(),
        Color.parseColor("#FFFFFFFF"), 
        Color.parseColor("#FF78c5f9"))

  objectAnimator .setDuration(1000);
  objectAnimator .start();

Animate layout's background color change

2 Answers2