How to Make a Dialog Slide from Bottom to Middle of Screen in Android

How to make a dialog slide from bottom to middle of screen in android

For this, you need 2 animations and put this in the res/anim folder

1. slide_up_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="50%p" android:toYDelta="0%p"
    android:duration="@android:integer/config_longAnimTime"/>

2.slide_out_down.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="0%p"
    android:toYDelta="100%p" />

Now you have to create a custom style in style.xml

<style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
        <item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>

Next is to extend the android Theme. Dialog theme in the same style.xml and give the reference to the custom style we created.

<!-- Animation for dialog box -->
    <style name="DialogSlideAnim" parent="@android:style/Theme.Dialog">
        <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
    </style>

And finally, call this style when you create the dialog like this.

dialog = new Dialog(new ContextThemeWrapper(this, R.style.DialogSlideAnim));

yep...Now the Dialog is ready to slide.....!!

Update:

As @MichealP suggested, this will place the window at the bottom

getWindow().setGravity(Gravity.BOTTOM); 

and modify the style to remove tittle and background

<item name="android:windowBackground">@null</item> 
<item name="android:windowFrame">@null</item> 
<item name="android:windowNoTitle">true</item>

As @sikni8 suggested this will make the black border transparent

getWindow().setBackgroundDrawableResource(android.R.color.transparent);

How to animate a dialog to slide from the bottom of a screen to the middle without bounce?

I figured out how to do this. Instead of using Dialog, it is better to use DialogFragment. For whatever reason, my Dialog implementation is correct, it just does not work with animations. Here is my implementation:

public class NetworkDialog extends DialogFragment {

    @Override
    public void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(STYLE_NO_FRAME, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
    }

    @Override
    public void onActivityCreated(Bundle arg0) {
        super.onActivityCreated(arg0);
        getDialog().getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
    }

    @Override
    public View onCreateView(final LayoutInflater inflater, final ViewGroup container, final Bundle savedInstanceState) {
        final View v = inflater.inflate(R.layout.dialog_network, container, false);
        v.setAlpha(0.5f);
        final ImageButton ibRefresh = (ImageButton) v.findViewById(R.id.ib_refresh);
        ibRefresh.setClickable(true);

        ibRefresh.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MapActivity.rotateImageView(ibRefresh);
            }
        });

        return v;
    }

    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }
} 

And then I call the dialog with

NetworkDialog dialogFragment = new NetworkDialog();
dialogFragment.show(getFragmentManager(), "ProgressDialog");

How to achieve custom dialog at the bottom of the screen in Android

Try this

BottomSheetDialog dialog = new BottomSheetDialog(YourActivity.this);
dialog.setContentView(YourView);

dialog.show();

Show and hide a View with a slide up/down animation

With the new animation API that was introduced in Android 3.0 (Honeycomb) it is very simple to create such animations.

Sliding a View down by a distance:

view.animate().translationY(distance);

You can later slide the View back to its original position like this:

view.animate().translationY(0);

---

You can also easily combine multiple animations. The following animation will slide a View down by its height and fade it in at the same time:

// Prepare the View for the animation
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);

// Start the animation
view.animate()
    .translationY(view.getHeight())
    .alpha(1.0f)
    .setListener(null);

You can then fade the View back out and slide it back to its original position. We also set an AnimatorListener so we can set the visibility of the View back to GONE once the animation is finished:

view.animate()
    .translationY(0)
    .alpha(0.0f)
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });

---

Related Topics