How to make dialogue slide from bottom to middle of screen in android

Question

I want to show a dialog with my animation. My dialogue will move from the bottom of the activity to the middle of the action.

/ **** **** Edit /

I apologize for my question, it is unclear. I mean that my dialogue will slide from bottom to middle, but the bottom of the dialog is placed at the bottom of the action, for example, the following image

Answer 1

To do this, you will need 2 animations and place them 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 need to create your own 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 up is the Android theme. Create a dialogue topic in the same style.xml and give a link to our own style.

 <!-- 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 such a dialogue.

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

yeah ... now the dialogue is ready to go ..... !!

Update:

As @MichealP suggests, the window will be located at the bottom

 getWindow().setGravity(Gravity.BOTTOM); 

and change the style to remove the background and title

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

As @ sikni8 suggested, the black border will become transparent

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

Answer 2

I tried all the answers here and it does not work for me. I know everything that answers are written long ago. So let me show you how to make this 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 style to 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 for your dialog box or alerttdialog dialog box, as shown 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 have shown an example only for dialogs, but, as I said, you can use this method for warning dialogs as well.

Answer 3

You can use the bottom sheets. I put some info about this.

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

There are two main types of bottom sheets:

Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deeply related content from other applications. They are mainly for mobile devices.

Permanent bottom sheets represent in-app content

There is a simple example.

Making BottomSheet on Android is pretty simple, you just need to use the CoordinatorLayout as the main layout element and attach the BottomSheet behavior to the 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 steps - 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 steps - configure your MainActivity as follows:

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

Answer 4

You can use the modal bottom sheet ( link ).

1. Add Design Support Library

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

2. Create a Fragment that extends BottomSheetDialogFragment and overrides 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) } } 

3. Show dialogue

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

Answer 5

Here's the easiest way to animate a dialog when it is shown

 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 this, make the dialog full-screen and transparent when animating from below.

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

Answer 6

In addition to arunsoorya's answer:

Edit 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"/> 

Answer 7

The new Material Design library provides you with the BottomSheetDialog for this exact view and easier implementation.