How to show Dialog on Android using the disclosure effect from material design?

Question

I have an Activity with a FloatingActionButton . When I press FAB, AlertDialog displayed. I want to revitalize its appearance using something like the disclosure effect or curved movement from Android Material Design . the documentation contains only an example of changing the visibility of existing views.

How can I achieve this for AlertDialog ?

Answer 1

If you have a custom view (defined in XML), you can try the following:

 AlertDialog a = new AlertDialog.Builder(this)...blablabla; View v = a.findViewById(R.layout.example); // get the center for the clipping circle int cx = (v.getLeft() + v.getRight()) / 2; int cy = (v.getTop() + v.getBottom()) / 2; // get the final radius for the clipping circle int finalRadius = Math.max(v.getWidth(), v.getHeight()); // create the animator for this view (the start radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(v, cx, cy, 0, finalRadius); // make the view visible and start the animation v.setVisibility(View.VISIBLE); anim.start(); 

To hide it using reverse animation:

 View v = <yourAlertDialog>.findViewById(R.layout.example); // get the center for the clipping circle int cx = (v.getLeft() + v.getRight()) / 2; int cy = (v.getTop() + v.getBottom()) / 2; // get the initial radius for the clipping circle int initialRadius = v.getWidth(); // create the animation (the final radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(v, cx, cy, initialRadius, 0); // make the view invisible when the animation is done anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); v.setVisibility(View.INVISIBLE); } }); // start the animation anim.start(); 

Answer 2

I did something similar by calling the setOnShowListener dialog before I show the dialog. I still need to clarify the animation, but this is the beginning:

 dialogToAnimate.setOnShowListener(new OnShowListener() { @Override public void onShow(DialogInterface dialog) { // Remember that ViewAnimationUtils will not work until API 21. final View view = dialogToAnimate.getWindow().getDecorView(); final int centerX = view.getWidth() / 2; final int centerY = view.getHeight() / 2; // TODO Get startRadius from FAB // TODO Also translate animate FAB to center of screen? float startRadius = 20; float endRadius = view.getHeight(); Animator animator = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius); animator.setDuration(1000); animator.start(); } }); 

Answer 3

Alert dialog with disclosure effect for the above API 21 =>

 public final void customAlertDialog(final Activity mActivity) { AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(mActivity); final View view = LayoutInflater.from(mActivity).inflate(R.layout.alert_dialog_simple_msg,null); alertDialogBuilder.setView(view); final AlertDialog alertDialog = alertDialogBuilder.create(); alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); TextView tvOk= (TextView) view.findViewById(R.id.tvOk); final Animator[] animHide = {null}; if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { alertDialog.show(); view.post(new Runnable() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void run() { int cx = (int)view.getWidth() / 2; int cy = (int) view.getHeight() / 2; float finalRadius = (float) Math.hypot(cx, cy); Animator animVisible = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius); animHide[0] = ViewAnimationUtils.createCircularReveal(view, cx, cy, finalRadius, 0); animVisible.start(); } }); } tvOk.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { if ( animHide[0]!=null) { animHide[0].addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); alertDialog.dismiss(); } }); animHide[0].start(); } else { alertDialog.dismiss(); } } else { alertDialog.dismiss(); } } }); alertDialog.setCancelable(false); }