Android shared element to dialog actvitiy

Question

I've got one activity with an image in a toolbar and an activity that is themed like a dialog with the same image in big. These are the layout files:

my_activity.xml:

...

<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/my_image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:scaleType="centerCrop"
    android:src="@drawable/my_drawable"
    android:transitionName="@string/my_image_transition"
    app:riv_oval="true" />

...

my_dialog_activity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@id/my_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/my_drawable"
        android:tint="@color/accent"
        android:transitionName="@string/my_image_transition" />

</LinearLayout>

The dialog activity becomes a dialog by applying this theme in the manifest:

<style name="MyDialogActivity" parent="Theme.AppCompat.Light.Dialog.MinWidth">
    <item name="windowNoTitle">true</item>
    <item name="android:windowMinWidthMajor">@dimen/abc_dialog_min_width_major</item>
    <item name="android:windowMinWidthMinor">@dimen/abc_dialog_min_width_minor</item>
</style>

Both the activity and the dialog look exactly how I want them to look like.

Now I want to implement a shared element animation with these ImageViews: When the user clicks on the first activity's image, it has to grow and move into the middle of the screen so it fits the bigger dialog's image.

So I wrote this code:

Intent intent = new Intent(MyActivity.this, MyDialogActivity.class);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
        MyActivity.this, v, getString(R.string.my_image_transition)
    );
    startActivityForResult(intent, 999, options.toBundle());
} else {
    startActivityForResult(intent, 999);
}

The animation does actually happen, but the moved image is only visible inside of the dialog's area. So you see an image that comes from the dialog's upper left corner, but you don't see it moving from the first activity outside of the dialog.

Here's a HTML version of how it should look like and what it currently looks like: https://jsfiddle.net/wutqdh9d/1/

why do you need dialog activity for this reason? just animate ur image in main activity to the center and place a view layout with white background and make it appear when the animates end. — ugur, Jun 16 '16 at 21:52
The dialog activity will also contain other views like a Toolbar. — Felix Edelmann, Jun 17 '16 at 11:38

score 6 · Accepted Answer · edited May 23 '17 at 12:24

The Share Element Animation was drawn in the second activity. As you use the Theme.AppCompat.Light.Dialog.MinWidth theme, the second activity's window size is smaller than the drawing area of animation.

Hence, just get rid of using the dialog theme. To change this below:

<style name="MyDialogActivity" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

The second activity layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

<ImageView
        android:id="@id/my_image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/your_icon"
        android:transitionName="@string/my_image_transition"/>

Then it will be this effect(http://gph.is/1UzZZzV).

Hope it help.

Reference: https://stackoverflow.com/a/28508306/3171537

Thanks a lot! I also wrapped the ImageView with a CardView to get the dialog look. What doesn't work is closing the dialog by tapping outside, but this could be solved using some click listeners. — Felix Edelmann, Jun 17 '16 at 14:35
Yep, just add click listener on some layouts. This is very easy. — JohnWatsonDev, Jun 17 '16 at 14:40
How to set call backs from second activity(it has some buttons) to first activity — karthik kolanji, May 16 '19 at 19:16

score -1 · Answer 2 · answered Sep 09 '16 at 02:57

 <style name="dialog_style_activity">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>

Above style is work for me. Reference this style in manifest.xml.

Android shared element to dialog actvitiy

2 Answers2