Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

android

I want to show a dialog on my activity with animation. My dialog will slide from bottom of activity to middle of activity.

/****Edit****/

I'm sorry for my question is unclear. I mean that my dialog will be slide from bottom to middle but the bottom side of dialog is placed on bottom side of activity , like this following pictureenter image description here

like image 260
MichaelP Avatar asked Feb 16 '12 04:02

MichaelP


People also ask

How to set bottom Sheet dialog in android?

To implement a Bottom Sheet dialog, you need a material design library. Include the following library in your app. gradle file. Sync the project to download the library.

How do I animate a view in Android?

You can use the view animation system to perform tweened animation on Views. Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation.


2 Answers

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);
like image 52
droid kid Avatar answered Oct 12 '22 02:10

droid kid


I tried all the answers in here and it don't work for me. I know all that answers are written long time ago. So let me show how I get it to work. I followed this article.

In short : create res/anim/slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
      android:duration="@android:integer/config_mediumAnimTime" 
      android:fromYDelta="100%" 
      android:interpolator="@android:anim/accelerate_interpolator" 
      android:toYDelta="0">
    </translate>
</set>

then, create res/anim/slide_bottom.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:duration="@android:integer/config_mediumAnimTime" 
        android:fromYDelta="0%p" 
        android:interpolator="@android:anim/accelerate_interpolator" 
        android:toYDelta="100%p">
    </translate>
</set>

Then add a style in res/values/styles.xml

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

Now you can set this animation style to your dialog or alertdialog box like below.

Dialog dialog = new Dialog(this);
dialog.getWindow().getAttributes().windowAnimations = animationSource;

Or,

Dialog dialog = new Dialog(this);
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(dialog.getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
lp.gravity = Gravity.BOTTOM;
lp.windowAnimations = R.style.DialogAnimation;
dialog.getWindow().setAttributes(lp);

I showed example only for dialog boxes, but as I said before you can use this method for alert dialog boxes too.

like image 20
Jerin A Mathews Avatar answered Oct 12 '22 01:10

Jerin A Mathews