Android: RelativeLayout translateY animation with layout_alignParentBottom

Question

I'm working on an Android app with an animation where a vertically central view should be animated from the center to the top of the screen. Below this view is another view containing related content, which is aligned directly below the center view. When the center view animates up, I want the lower view to be 'pinned' to the top but also to the bottom of the screen (as per layout_alignParentBottom="true"). Currently though, as the bottom view animates up a gap is left between the bottom view and the bottom of the screen:

What's the easiest way to animate the bottom view, while keeping it pinned to the bottom of the screen?

Here is my layout XML:

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="newsoni.com.testrelativelayouttranslation.MainActivity">

    <View
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:layout_centerVertical="true"
        android:id="@+id/centerBar" />
    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#00FF00"
        android:layout_below="@+id/centerBar"
        android:id="@+id/bottomPanel" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Do animation"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:id="@+id/btn" />

</RelativeLayout>

Here is my Java:

public class MainActivity extends AppCompatActivity {

    private View mCenter, mBottomPanel;
    private Button mBtn;

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

        mCenter = findViewById(R.id.centerBar);
        mBottomPanel = findViewById(R.id.bottomPanel);
        mBtn = $(R.id.btn);

        mBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                int value = mCenter.getTranslationY() == 0 ? -mCenter.getTop() : 0;
                mCenter.animate()
                        .translationY(value)
                        .setDuration(250)
                        .start();
                mBottomPanel.animate()
                        .translationY(value)
                        .setDuration(250)
                        .start();
            }
        });

    }

    @SuppressWarnings("unchecked")
    public <T extends View> T $(int id) {
        return (T) findViewById(id);
    }
}

Here is a link to the project which you can download:

https://drive.google.com/file/d/0B-mqMIMqm_XHamxENkhIZDJDMHM/view?usp=sharing

Answer 1

我最终使用了标准的Animation并覆盖了applyTransformation来手动更改底视图的LayoutParams 。