Defining Custom Animations
Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app. The material theme provides some default animations for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize these animations and create new ones:
Touch feedback
Circular Reveal
Activity transitions
Curved motion
View state changes
Use the Reveal Effect
Reveal animations provide users visual continuity when you show or hide a group of UI elements. The ViewAnimationUtils.createCircularReveal() method enables you to animate a clipping circle to reveal or hide a view.
To reveal a previously invisible view using this effect:
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();To hide a previously visible view using this effect:
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, 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);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
FOR EXAMPLE :
CUSTOM DIALOG WITH CIRCUALR REVEAL ANIMATION (VERY MUCH LIKE IN WHATSAPP) :
USE THIS CUSTOM CLASS TO SHOW AS AN DIALOG :
just add this custom class into your project and use it as an dialog.
public class DialogReveal extends Dialog
{
public DialogReveal(Context context)
{
super(context);
}
LinearLayout layoutMain;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.YOUR_LAYOUT);
getWindow().setBackgroundDrawableResource(android.R.color.transparent);
getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
getWindow().setGravity(Gravity.TOP);
layoutMain = (LinearLayout) findViewById(R.id.PARENT_LAYOUT);
layoutMain.setVisibility(View.INVISIBLE);
layoutMain.post(new Runnable()
{
@Override
public void run()
{
enterReveal(layoutMain);
}
});
}
public OnDismissListener dismissListener = new OnDismissListener()
{
@Override
public void onDismiss(DialogInterface dialogInterface)
{
}
};
@Override
public void dismiss()
{
exitReveal(layoutMain);
new Handler().postDelayed(new Runnable()
{
@Override
public void run()
{
DialogReveal.super.dismiss();
}
}, 400);
}
void enterReveal(final LinearLayout v)
{
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
// get the center for the clipping circle
int cx = v.getMeasuredWidth();
int cy = 0;
// get the final radius for the clipping circle
float finalRadius = (float) Math.hypot(v.getWidth(), v.getHeight());
// float finalRadius =v.getWidth() / 2;
// create the animator for this view (the start radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(v, cx, cy, 0, finalRadius);
v.setVisibility(View.VISIBLE);
anim.setDuration(500);
anim.start();
anim.addListener(new AnimatorListenerAdapter()
{
@Override
public void onAnimationEnd(Animator animation)
{
animateButtonsIn(v, 1);
super.onAnimationEnd(animation);
}
});
}
else
{
animateButtonsIn(v, 1);
}
}
private void animateButtonsIn(LinearLayout layoutContainerAll, int scale)
{
for (int i = 0; i < layoutContainerAll.getChildCount(); i++)
{
View rowView = layoutContainerAll.getChildAt(i);
rowView.animate().setStartDelay(i * 100)
.scaleX(scale).scaleY(scale);
}
}
void exitReveal(final LinearLayout v)
{
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
// get the center for the clipping circle
int cx = v.getMeasuredWidth();
int cy = 0;
// get the initial radius for the clipping circle
// int initialRadius = v.getWidth() / 2;
float initialRadius = (float) Math.hypot(v.getWidth(), v.getHeight());
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(v, cx, cy, initialRadius, 0);
anim.setDuration(400);
// 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();
}
}
}
NOTE : For pre lollipop devices ,you can use library -> https://github.com/ozodrukh/CircularReveal
0 comments:
Post a Comment