Как сделать диалог слайд снизу к середине экрана в Android

Я хочу показать диалог о моей деятельности с анимацией. Мой диалог будет скользить от нижней части деятельности к середине деятельности.



/****редактировать****/



извините за мой вопрос непонятно. Я имею в виду , что мой диалог будет скользить снизу вверх, но нижняя сторона диалога находится на нижней стороне активности, как на следующем рисункеenter image description here

702   6  

6 ответов:

для этого вам нужно 2 анимации и положить это в папку res/anim

  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" />
вы должны создать пользовательский стиль в стиле.xml 
<style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
        <item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>

далее, чтобы расширить тему android.Тема диалога в том же стиле.XML и дать ссылку на пользовательский стиль, который мы создали.

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

и, наконец, назовем это стиль при создании диалогового окна, как это.

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

да....Теперь диалог готов к слайду.....!!

обновление:

как предложил @MichealP, это разместит окно внизу

getWindow().setGravity(Gravity.BOTTOM);

и изменить стиль, чтобы удалить титл и фон

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

как предположил @sikni8, это сделает черную границу прозрачной

getWindow().setBackgroundDrawableResource(android.R.color.transparent);
152  
2016-02-18 12:26:38

я попробовал все ответы здесь и это не работает для меня. Я знаю, что все ответы написаны давным-давно. Так что позвольте мне показать, как я заставляю его работать. Я следил за этой статьей.

короче : создайте 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>

затем создайте 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>

затем добавьте стиль в 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>

теперь вы можете установить этот стиль анимации в диалоговое окно или окно alertdialog как под.

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

или

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

Я показал пример только для диалоговых окон, но, как я уже сказал, Вы можете использовать этот метод для диалоговых окон оповещения тоже.

5  
2018-01-08 19:27:32

вы можете использовать нижнее белье. Я поместил некоторую информацию об этом.

С библиотекой поддержки Android 23.2, Google объявил о поддержке нижних листов. Согласно Material Design, нижние листы являются элементами, отображаемыми только в результате инициированного пользователем действия, используемого для отображения большего количества контента.

есть два основных типа нижние листы:

модальные нижнее белье являются альтернативой меню или простых диалоговых окон. Они могут также присутствует глубоко связанный контент из других приложений. Они в первую очередь для мобильных.

постоянные нижние листы присутствует в приложении контент

есть простой пример

создание нижнего листа на Android довольно легко, вам просто нужно использовать CoordinatorLayout как основной элемент вашего макета и прикрепите поведение нижнего листа к виду.

1 шаг - 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 шаг - добавить 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 шаг - сделайте свою основную активность такой:

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");
    }
}
}
4  
2018-02-07 14:21:25

можно использовать Модальный Нижний Лист (ссылка).

  1. добавить библиотеку поддержки дизайна 

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

  2. создать Fragment что расширяет BottomSheetDialogFragment и переопределить 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. показать диалог

    val dialog = BottomDialogFragment.newInstance()
dialog.show(supportFragmentManager, BottomDialogFragment::class.java.simpleName)
2  
2018-07-20 03:02:13

вот самый простой способ анимировать диалог при показе

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

});

в дополнение к этому, сделать диалог фон полный экран и прозрачный при анимации снизу

Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
window.setBackgroundDrawableResource(android.R.color.transparent);
1  
2017-12-10 10:34:35

в дополнение к ответу арунсурьи:

изменить 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" />

и 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"/>
0  
2018-03-09 07:51:30

Comments

    Ничего не найдено.
Click here to cancel reply.