Shared element transition with Dialog Activity

Question

I put together a very simple app that uses shared element transitions when starting an activity with Dialog theme (source code on github).

I got the following result:

As you can see there are 2 problems with the transition/animation:

1. The animation is only visible in the area of the dialog activity so it clips and looks ugly.
2. There is no transition/animation when I tap outside the activity to go back.

How can I fix these problems? Any help would be appreciated.

EDIT: After Quanturium's answer I did the following things to get it working:

Use the following theme instead of a Dialog theme:

<style name="AppTheme.Transparent" parent="AppTheme">
    <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>

Use a CardView as the background for Dialog look and for rounded corners and shadows.

Call finishAfterTransition(); when user taps outside the CardView.

Now it looks like this (code), the CardView needs refining to better match the Dialog, but it's working at least.:

Answer 1

An activity transition works like this. When you start your second activity, it is displayed on top of your first one with a transparent background. The shared elements are positioned the same way they are on the first activity and then animated to the correct position specified on the second activity.

In your case you are using android:theme="@style/Theme.AppCompat.Dialog" which mean the size of the second activity's drawing area is smaller than the one from the first activity. This explains the clipping and the no transition when clicking outside.

What you want to do is get rid of that theme, and implement your own layout with a dark background / shadow in order to be able to execute your smooth transition.