Android单击按钮时展开动画

Question

I try to make some tests with UX and animation. I want at a click on a button to expand it until the button has the size of his parent layout. Here is my very simple interface :

I succeed to create my own animation, it's just a simple class that takes the begin X, the end X, the begin Y and the end Y. Here is the class :

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class ExpandAnimation extends Animation {
    protected final View view;
    protected float perValueH, perValueW;
    protected final int originalHeight, originalWidth;

    public ExpandAnimation(View view, int fromHeight, int toHeight, int fromWidth, int toWidth) {
        this.view = view;
        this.originalHeight = fromHeight;
        this.originalWidth = fromWidth;
        this.perValueH = (toHeight - fromHeight);
        this.perValueW = (toWidth - fromWidth);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        view.getLayoutParams().height = (int) (originalHeight + perValueH * interpolatedTime);
        view.getLayoutParams().width = (int) (originalWidth + (perValueW * interpolatedTime)*2);
        view.requestLayout();
    }

    @Override
    public boolean willChangeBounds() {
        return true;
    }
}

The animation is pretty good and works as expected :

Here is my main loop :

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button left;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        left = (Button) findViewById(R.id.left);
        left.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        left.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ViewGroup parent = (ViewGroup) view.getParent();
                ExpandAnimation animation = new ExpandAnimation(view, view.getBottom(), parent.getTop(), view.getLeft(), parent.getRight());
                animation.setDuration(3000);
                animation.setFillAfter(true);
                view.startAnimation(animation);
            }
        });
    }
}

But I have 3 major issues :

• First, the text is gone and I don't know why...
• On the other hand, I want that my animation come over others views, but when I tried it wasn't working how can I achieve this ?
• And last but not least, at the end of my animation, the button is gone and there is just an ugly artefact... How can I avoid that ?

Edit : my layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:weightSum="3"
        android:padding="15dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="bottom">

        <Button
            android:id="@+id/left"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Retenter"
            android:textSize="15dp"
            android:textColor="#FFF"
            android:background="#FF33CC44" />

    </LinearLayout>
</RelativeLayout>

Edit2 : The artefact which appears at the end of the animation is due to the method setLayerType(View.LAYER_TYPE_SOFTWARE, null).

Answer 1

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    view.getLayoutParams().height = (int) (originalHeight + perValueH * interpolatedTime);
    view.getLayoutParams().width = (int) (originalWidth + (perValueW * interpolatedTime));
    view.requestLayout();
}

remove *2 will result below.