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:

  • Convert magnetic field X, Y, Z values from device into global reference frame
  • Android: Failed to ensure directory
  • WindowManager with Animation (is it possible?)
  • How to attach back the Android emulator to ADB?
  • Load files bigger than 1M from assets folder
  • Emulate Nexus 7
  • 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

    Related posts:

    RecyclerView Scrolling Performance
    selector not working with layout and image view
    Google Drive API - the name must not be empty: null (But I had passed valid account name to GoogleAc...
    Set Focus on EditText
    Where can i download Eclipse Android bundle
    Capture RatingBar Click
  • Valid values for android:fontFamily and what they map to?
  • Android Camera Focus Mode
  • Glide - load single frame from video at specific time?
  • Memory leak in Fragment
  • How to open a second activity on click of button in android app
  • Smooth removal of items within a custom listview
  • 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.