Shared element transition with Dialog Activity

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:

  • Different font for Some activities using Calligraphy Library
  • Java method for android:layout_gravity
  • Android record square Video
  • Android DDMS (Monitor) does not start if user profile contains a space in it
  • How to pass int array of color resource ids from array.xml to SwipeRefreshLayout.setColorSchemeResources
  • Remove header from listView
  • sample app

    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.:

    working

  • Creating a setError() for the Spinner
  • Tint menu icons
  • what's wrong with hardcoded string in android xml file?
  • “Unknown Application ABI:” while 'debug as native application'
  • Using the Android SDK on a Mac, Eclipse is really slow. How can I speed it up?
  • Android: What is R? Why is it so Cryptic?
  • One Solution collect form web for “Shared element transition with Dialog Activity”

    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.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.