Is it possible to add padding to the end view in an Activity Transition?

1k Views Asked by At

I'm not sure if this is a defect or if I'm doing something wrong here. When I have an ImageView as a shared element between two activities, if the end image view has padding, the image view no longer respects the nav bar at the bottom of the screen. If I move the padding into the container view, or switch to using a margin instead, it works fine.

Video of animation with padding on second imageView: https://www.youtube.com/watch?v=hg4bc6h2u5o&feature=youtu.be

Video of animation without padding on second imageView: https://www.youtube.com/watch?v=pW4hyAfn9Hs&feature=youtu.be

First activity xml:

<LinearLayout
    android:id="@+id/title_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="@dimen/header_elevation"
    android:orientation="vertical"
    android:transitionGroup="true">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/header_elevation"
        android:background="?attr/colorPrimary" />

    ...
    <!-- other header layouts -->

    </LinearLayout>
</LinearLayout>

<View
    android:id="@+id/header_title_cover"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/title_container"
    android:layout_alignTop="@+id/title_container"
    android:background="?android:colorAccent"
    android:elevation="@dimen/header_elevation"
    android:visibility="invisible" />

<ImageView
    android:id="@+id/comic_cover"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:contentDescription="@string/placeholder_image_description"
    android:src="@drawable/dog_eat_cat"
    />

Second activity xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/image"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:paddingTop="80dp"
    />

</RelativeLayout>

First activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Slide ts = new Slide(Gravity.TOP);
    ts.excludeTarget(android.R.id.statusBarBackground, true)
            .excludeTarget(android.R.id.navigationBarBackground, true);
    getWindow().setReenterTransition(ts);
    getWindow().setExitTransition(ts);

    ... // set up views
}


public void openActivity() {
    imageView.setTransitionName(PagesActivity.SHARED_IMAGE_NAME);

    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
            image, PagesActivity.SHARED_IMAGE_NAME);
    startActivity(intent, options.toBundle());
}

Second Activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().getEnterTransition().excludeTarget(android.R.id.statusBarBackground, true)
            .excludeTarget(android.R.id.navigationBarBackground, true);
    getWindow().getReturnTransition().excludeTarget(android.R.id.statusBarBackground, true)
            .excludeTarget(android.R.id.navigationBarBackground, true);

    ... //Load views
    imageView.setTransitionName(SHARED_IMAGE_NAME);
}
0

There are 0 best solutions below