Show DialogFragment with animation growing from a point

Question

I m showing a DialogFragment when the user taps on a row in a ListView  I d like to animate the showing of the dialog so that it grows from the center of the row  A similar effect can be seen when opening a folder from the launcher   One idea that I ve had is a combination of TranslateAnimation and ScaleAnimation  Is there another way

User · Answer

Add this code on values anim   lt scale     android duration  quot  android integer config longAnimTime quot      android fromXScale  quot 0 2 quot      android fromYScale  quot 0 2 quot      android toXScale  quot 1 0 quot      android toYScale  quot 1 0 quot      android pivotX  quot 50  quot      android pivotY  quot 50  quot   gt   lt alpha     android fromAlpha  quot 0 1 quot      android toAlpha  quot 1 0 quot      android duration  quot  android integer config longAnimTime quot      android interpolator  quot  android anim accelerate decelerate interpolator quot   gt   call on styles xml  lt style name  quot DialogScale quot  gt       lt item name  quot android windowEnterAnimation quot  gt  anim scale in lt  item gt       lt item name  quot android windowExitAnimation quot  gt  anim scale out lt  item gt   lt  style gt   On java code  set Onclick public void onClick View v            fab onclick R style DialogScale   quot Scale quot    Activity  context getWindow   getDecorView   getRootView               Dialogs fab onclick R style DialogScale   quot Scale quot            setup on method  alertDialog getWindow   getAttributes   windowAnimations   type

User · Answer

Use decor view inside onStart in your dialog fragment    Override public void onStart         super onStart          final View decorView   getDialog                getWindow                getDecorView         decorView animate   translationY -100               setStartDelay 300               setDuration 300               start

User · Answer

DialogFragment has a public getTheme   method that you can over ride for this exact reason  This solution uses less lines of code   public class MyCustomDialogFragment extends DialogFragment               Override     public int getTheme             return R style MyThemeWithCustomAnimation

User · Answer

Being DialogFragment a wrapper for the Dialog class  you should set a theme to your base Dialog to get the animation you want   public class CustomDialogFragment extends DialogFragment implements OnEditorActionListener        Override     public View onCreateView LayoutInflater inflater  ViewGroup container          Bundle savedInstanceState                 return super onCreateView inflater  container  savedInstanceState               Override     public Dialog onCreateDialog Bundle savedInstanceState                    Set a theme on the dialog builder constructor          AlertDialog Builder builder                new AlertDialog Builder  getActivity    R style MyCustomTheme             builder            setTitle   Your title             setMessage   Your message             setPositiveButton   OK    new DialogInterface OnClickListener                                       Override               public void onClick DialogInterface dialog  int which                  dismiss                                                        return builder create              Then you just need to define the theme that will include your desired animation  In styles xml add your custom theme    lt style name  MyCustomTheme  parent   android style Theme Panel  gt       lt item name  android windowAnimationStyle  gt  style MyAnimation Window lt  item gt   lt  style gt    lt style name  MyAnimation Window  parent   android style Animation Activity  gt        lt item name  android windowEnterAnimation  gt  anim anim in lt  item gt       lt item name  android windowExitAnimation  gt  anim anim out lt  item gt   lt  style gt        Now add the animation files in the res anim folder     the android pivotY is the key    anim in xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android  gt       lt scale         android interpolator   android anim linear interpolator          android fromXScale  0 0          android toXScale  1 0          android fromYScale  0 0          android toYScale  1 0          android fillAfter  false          android startOffset  200          android duration  200           android pivotX    50           android pivotY    -90         gt       lt translate         android fromYDelta  50           android toYDelta  0          android startOffset  200          android duration  200        gt   lt  set gt    anim out xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android  gt       lt scale         android interpolator   android anim linear interpolator          android fromXScale  1 0          android toXScale  0 0          android fromYScale  1 0          android toYScale  0 0          android fillAfter  false          android duration  200           android pivotX    50                   android pivotY    -90                 gt       lt translate         android fromYDelta  0          android toYDelta  50           android duration  200        gt   lt  set gt    Finally  the tricky thing here is to get your animation grow from the center of each row  I suppose the row is filling the screen horizontally so  on one hand the android pivotX value will be static  On the other hand  you can t modify the android pivotY value programmatically    What I suggest is  you define several animations each of which having a different percentage value on the android pivotY attribute  and several themes referencing those animations   Then  when the user taps the row  calculate the Y position in percentage of the row on the screen  Knowing the position in percentage  assign a theme to your dialog that has the appropriate android pivotY value   It is not a perfect solution but could do the trick for you  If you don t like the result  then I would suggest forgetting the DialogFragment and animating a simple View growing from the exact center of the row   Good luck

User · Answer

In DialogFragment  custom animation is called onCreateDialog   DialogAnimation  is custom animation style in previous answer   public Dialog onCreateDialog Bundle savedInstanceState         final Dialog dialog   super onCreateDialog savedInstanceState       dialog getWindow   getAttributes   windowAnimations   R style DialogAnimation      return dialog

User · Answer

Check it out this code  it works for me     Slide up animation   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android   gt        lt translate         android duration   android integer config mediumAnimTime          android fromYDelta  100           android interpolator   android anim accelerate interpolator          android toXDelta  0    gt    lt  set gt       Slide dowm animation   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android   gt        lt translate         android duration   android integer config mediumAnimTime          android fromYDelta  0 p          android interpolator   android anim accelerate interpolator          android toYDelta  100 p    gt    lt  set gt       Style   lt style name  DialogAnimation  gt       lt item name  android windowEnterAnimation  gt  anim slide up lt  item gt       lt item name  android windowExitAnimation  gt  anim slide down lt  item gt   lt  style gt       Inside Dialog Fragment   Override public void onActivityCreated Bundle arg0        super onActivityCreated arg0       getDialog   getWindow        getAttributes   windowAnimations   R style DialogAnimation

User · Answer

If you want to work over APIs you have to do inside your DialogFragemnt- onStart and not inside onCreateDialog     Override     public void onStart                  if  getDialog      null                         return                     getDialog   getWindow   setWindowAnimations                    R style DlgAnimation            super onStart

User · Answer

To get a full-screen dialog with animation  write the following          Styles    lt style name  AppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorAccent lt  item gt       lt item name  actionModeBackground  gt  attr colorPrimary lt  item gt       lt item name  windowActionModeOverlay  gt true lt  item gt   lt  style gt    lt style name  AppTheme NoActionBar  gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  windowNoTitle  gt true lt  item gt   lt  style gt    lt style name  AppTheme NoActionBar FullScreenDialog  gt       lt item name  android windowAnimationStyle  gt  style Animation WindowSlideUpDown lt  item gt   lt  style gt    lt style name  Animation WindowSlideUpDown  parent   android style Animation Activity  gt       lt item name  android windowEnterAnimation  gt  anim slide up lt  item gt       lt item name  android windowExitAnimation  gt  anim slide down lt  item gt   lt  style gt    res anim slide up xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android       android shareInterpolator   android interpolator accelerate quad  gt        lt translate         android duration   android integer config shortAnimTime          android fromYDelta  100           android toYDelta  0    gt   lt  set gt    res anim slide down xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android       android shareInterpolator   android interpolator accelerate quad  gt        lt translate         android duration   android integer config shortAnimTime          android fromYDelta  0           android toYDelta  100    gt   lt  set gt    Java code   public class MyDialog extends DialogFragment         Override     public int getTheme             return R style AppTheme NoActionBar FullScreenDialog           private void showDialog         FragmentTransaction fragmentTransaction   getSupportFragmentManager   beginTransaction        Fragment previous   getSupportFragmentManager   findFragmentByTag MyDialog class getName         if  previous    null            fragmentTransaction remove previous             fragmentTransaction addToBackStack null        MyDialog dialog   new MyDialog        dialog show fragmentTransaction  MyDialog class getName

User · Answer

Have you looked at Android Developers Training on Zooming a View  Might be a good starting point   You probably want to create a custom class extending DialogFragment to get this working   Also  take a look at Jake Whartons NineOldAndroids for Honeycomb Animation API compatibility all the way back to API Level 1

[android] Show DialogFragment with animation growing from a point

Examples related to android

Examples related to android-fragments

Examples related to android-animation