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

Question

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 picture enter image description here

Take a look at https://github.com/Ali-Rezaei/SlidingDrawer which makes it possible to slide from any side by few lines of code. — Ali, Jun 13 '15 at 19:46
i do not see an example, you have given a layout xml but how to use it in the code ? can u please give an example ? — kuldeep, Jul 06 '15 at 10:33
This is outdated for most people, but still it's worth noting for newcomers - *do not* replicate iOS experience on Android. See Material Design guidelines to see what should and should not be done, as suggested by Google (https://material.io). — milosmns, Feb 17 '19 at 14:50

score 178 · Accepted Answer · edited Aug 05 '19 at 13:37

178

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

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);

edited Aug 05 '19 at 13:37

satyamedh

47
1
12

answered Feb 16 '12 at 04:51

droid kid

7,569
2
32
37

13

i added getWindow().setGravity(Gravity.BOTTOM); and @null @null true And then it works as i desired – MichaelP Feb 16 '12 at 09:18
2

@MichaelP Is is not coming from bottom for me. It just start animation like grow_from_middle but on bottom of screen. IS there something that I missed. – abhishek Jan 07 '13 at 12:48
2

You can also use `getWindow().setBackgroundDrawableResource(android.R.color.transparent);` to make the black border transparent at runtime. – Si8 Aug 28 '13 at 02:49
1

Hello @arunsoorya, i implemented your solution to animate the Dialog but then i implemented the "Android Action Bar Style Generator" files and the Theme that it generated and now the Style used to create the Dialog "hintDialog = new Dialog(c, R.style.DialogSlideAnim);" is showing the dialog with a transparent background.. what should I fix? thanks :) – newton_guima Dec 07 '13 at 13:47
If you're using appcompat-v7 you don't need the two animation xml files. Instead of using @anim/slide_up_dialog use @anim/abc_slide_in_bottom. And instead of using @anim/slide_out_down you can use @anim/abc_slide_out_bottom. – Bernd S Nov 06 '14 at 20:35
somehow it does not covers whole width of the screen ? what shall I do to make it cover whole width of screen when dialog box appears from bottom ? Thanks – kuldeep Jul 06 '15 at 10:34
1

This is the kind of answers that everybody would love to find on Stackoverflow. Thank you. – andrea.rinaldi Apr 18 '16 at 08:35
3

For me dialog = new Dialog(new ContextThemeWrapper(this, R.style.DialogSlideAnim)); didnt work.. instead I used this - dialog.getWindow().setWindowAnimations(R.style.DialogAnimation); – sanedroid Jun 15 '16 at 10:58
Dialog width is not full. Please suggest for set actual width. – Anand Savjani Oct 19 '16 at 10:32

score 21 · Answer 2 · edited Jan 08 '18 at 17:27

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.

yes this is the perfect answer which i found working from all here. — Ramkesh Yadav, Sep 24 '18 at 12:13

score 9 · Answer 3 · answered Jul 20 '18 at 00:02

You can use a Modal Bottom Sheet (reference).

Add the design support library

implementation "com.android.support:design:$version_support"

Create a Fragment that extends BottomSheetDialogFragment and override onCreateView

class BottomDialogFragment : BottomSheetDialogFragment() { 

    companion object {
        fun newInstance() = BottomDialogFragment()
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.dialog_layout, container)
    }
}

Show the dialog

val dialog = BottomDialogFragment.newInstance()
dialog.show(supportFragmentManager, BottomDialogFragment::class.java.simpleName)

The same way you do with a regular Fragment, you create a Bundle and put data there — Juan Cruz Soler, Aug 06 '20 at 13:32

score 5 · Answer 4 · answered Feb 07 '18 at 12:21

you can use bottom Sheets. I put some infromation about it.

With Android Support Library 23.2, Google announced support for Bottom Sheets. According to Material Design, Bottom Sheets are elements displayed only as a result of a user-initiated action, used to reveal more content.

There are two major types of bottom sheets:

Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile.

Persistent bottom sheets present in-app content

There is simple example

Making a BottomSheet on Android is quite easy, you just have to use a CoordinatorLayout as main element of your layout and attach a BottomSheet behavior to a view.

1 step - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:background="#ffffff">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<Button
    android:id="@+id/btnButtonSheet"
    android:text="Camera"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<!-- Adding bottom sheet after main content -->
<include layout="@layout/bottom_sheet" />

</android.support.design.widget.CoordinatorLayout>

2 step - add bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Select your options!"
        android:gravity="center"
        android:textColor="#1e1e1e"
        android:textSize="16dp"
        android:layout_margin="8dp"
        android:textStyle="bold" />

</LinearLayout>
<Button
    android:id="@+id/btnPhoto"
    android:text="Photo"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btnCamera"
    android:text="Camera"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btnCancel"
    android:text="Cancel"
    android:background="#a2a2a3"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</LinearLayout>

3 step - make your MainActivity like this:

public class MainActivity extends AppCompatActivity {

@BindView(R.id.btnButtonSheet)
Button btnBottomSheet;

@BindView(R.id.bottom_sheet)
LinearLayout layoutBottomSheet;

BottomSheetBehavior sheetBehavior;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    sheetBehavior = BottomSheetBehavior.from(layoutBottomSheet);


    sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            switch (newState) {
                case BottomSheetBehavior.STATE_HIDDEN:
                    break;
                case BottomSheetBehavior.STATE_EXPANDED: {
                    btnBottomSheet.setText("Close");
                }
                break;
                case BottomSheetBehavior.STATE_COLLAPSED: {
                    btnBottomSheet.setText("Expand");
                }
                break;
                case BottomSheetBehavior.STATE_DRAGGING:
                    break;
                case BottomSheetBehavior.STATE_SETTLING:
                    break;
            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {

        }
    });
}

@OnClick(R.id.btnButtonSheet)
public void toggleBottomSheet() {
    if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
        sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        btnBottomSheet.setText("Close Bottom sheet");
    } else {
        sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        btnBottomSheet.setText("Expand Bottom sheet");
    }
}
}

To newcomers - there is a use-case for when it's **not** a good idea to use bottom sheets - for example when you don't want dialogs to be dismissable by pulling down with your finger. One use-case would be a list of items where you use a ItemTouchHelper on each item - in that case you need to override so many methods from BottomSheetDialog, it becomes pointless to use a done solution. — milosmns, Feb 17 '19 at 15:07

score 2 · Answer 5 · answered Dec 10 '17 at 08:34

Here is the simplest way to animate dialog when showing

dialog.setOnShowListener(new DialogInterface.OnShowListener() {

    @Override
    public void onShow(DialogInterface dialogInterface) {
        View view = dialog.getWindow().getDecorView();
        //for enter from left
        //ObjectAnimator.ofFloat(view, "translationX", -view.getWidth(), 0.0f).start(); 

        //for enter from bottom
        ObjectAnimator.ofFloat(view, "translationY", view.getHeight(), 0.0f).start();
    }

});

In addition to it, make dialog background full screen and transparent when animating from bottom

Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
window.setBackgroundDrawableResource(android.R.color.transparent);

score 1 · Answer 6 · answered Aug 09 '19 at 01:08

1

The new Material Design library gives you the BottomSheetDialog for that exact look and easier implementation

answered Aug 09 '19 at 01:08

Optional

21
1

score 0 · Answer 7 · edited Mar 09 '18 at 05:51

In addition to arunsoorya's answer :

Change slide_up_dialog.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" />

And slide_out_down.xml

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

score 0 · Answer 8 · answered Sep 21 '20 at 19:40

In addtion to all other answer, you can use this animation for top bar. Refrence from here https://www.tutlane.com/tutorial/android/android-slide-up-down-animations-with-examples

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

slide_down.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

The output looks like this

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

8 Answers8

Linked