Skip to content

Instantly share code, notes, and snippets.

@divyanshub024
Created June 4, 2019 05:30
Show Gist options
  • Save divyanshub024/87fc43c5265e78733e2ad6a00dfbc00e to your computer and use it in GitHub Desktop.
Save divyanshub024/87fc43c5265e78733e2ad6a00dfbc00e to your computer and use it in GitHub Desktop.
Custom Dialog with Circular Reveal Animation
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activity_main"
tools:context="beaststudio.in.revealanimation.MainActivity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_margin="24dp"
android:src="@drawable/ic_add_black_24dp"
android:tint="#fff"
/>
</RelativeLayout>
<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout
xmlns:android=”http://schemas.android.com/apk/res/android"
android:orientation=”vertical”
android:layout_width=”match_parent”
android:id=”@+id/dialog”
android:layout_height=”match_parent”
android:background=”@color/colorAccent”>
<ImageView
android:id=”@+id/closeDialogImg”
android:layout_width=”30dp”
android:layout_height=”30dp”
android:layout_margin=”10dp”
android:src=”@drawable/ic_close_black_24dp”
android:tint=”#fff”/>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”150dp”
android:background=”#FFF”
android:layout_centerInParent=”true”
android:layout_marginEnd=”20dp”
android:layout_marginStart=”20dp”
android:orientation=”vertical”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerInParent=”true”
android:text=”This is my Dialog”
android:textSize=”24dp”/>
</RelativeLayout>
</RelativeLayout>
FloatingActionButton fab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDiag();
}
});
}
private void revealShow(View dialogView, boolean b, final Dialog dialog) {
final View view = dialogView.findViewById(R.id.dialog);
int w = view.getWidth();
int h = view.getHeight();
int endRadius = (int) Math.hypot(w, h);
int cx = (int) (fab.getX() + (fab.getWidth()/2));
int cy = (int) (fab.getY())+ fab.getHeight() + 56;
if(b){
Animator revealAnimator = ViewAnimationUtils.createCircularReveal(view, cx,cy, 0, endRadius);
view.setVisibility(View.VISIBLE);
revealAnimator.setDuration(700);
revealAnimator.start();
} else {
Animator anim =
ViewAnimationUtils.createCircularReveal(view, cx, cy, endRadius, 0);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
dialog.dismiss();
view.setVisibility(View.INVISIBLE);
}
});
anim.setDuration(700);
anim.start();
}
}
private void showDiag() {
final View dialogView = View.inflate(this,R.layout.dialog,null);
final Dialog dialog = new Dialog(this,R.style.MyAlertDialogStyle);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(dialogView);
ImageView imageView = (ImageView)dialog.findViewById(R.id.closeDialogImg);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
revealShow(dialogView, false, dialog);
}
});
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
@Override
public void onShow(DialogInterface dialogInterface) {
revealShow(dialogView, true, null);
}
});
dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
@Override
public boolean onKey(DialogInterface dialogInterface, int i, KeyEvent keyEvent) {
if (i == KeyEvent.KEYCODE_BACK){
revealShow(dialogView, false, dialog);
return true;
}
return false;
}
});
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.show();
}
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowBackground">@color/colorAccent</item>
</style>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment