Cómo hacer que un diálogo se deslice desde la parte inferior hasta la mitad de la pantalla en Android

Question

Quiero mostrar un diálogo sobre mi actividad con animación. Mi diálogo se deslizará desde la parte inferior de la actividad hasta la mitad de la actividad.

/**** **** Editar/

Lo siento por mi pregunta no está clara. Quiero decir que mi diálogo será diapositiva de base hasta la mitad, pero el lado inferior del diálogo se coloca en el lado inferior de la actividad, como esta imagen siguiente

Answer 1

Para ello, tiene 2 animación y poner esto en la carpeta 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" /> 

Ahora tiene que crear un estilo personalizado en style.xml

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

siguiente es extender el tema androide Theme.Dialog en la misma style.xml y dar la referencia al estilo personalizado que creamos.

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

Y, finalmente, llame a este estilo cuando cree el cuadro de diálogo de esta manera.

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

yeap .... ¡¡Ahora el Diálogo está listo para deslizarse ..... !!

Actualización:

Como sugirió @MichealP, esto va a colocar la ventana en la parte inferior

getWindow().setGravity(Gravity.BOTTOM); 

y modificar el estilo para quitar una tilde y el fondo

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

Como @ sikni8 sugirió que esto hará que el borde negro sea transparente

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

Answer 2

Además de la respuesta de arunsoorya:

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

Y 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 3

Probé todas las respuestas aquí y se no trabajes para mi Sé que todas las respuestas están escritas hace mucho tiempo. Déjame mostrarte cómo lo hago funcionar. I followed this article.

En resumen: crear res/animal/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> 

a continuación, crear res/animal/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> 

A continuación, agregue un estilo en res/valores /styles.xml

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

Ahora puede configurar esto como estilo de imación a su cuadro de diálogo o cuadro de diálogo de alerta como a continuación.

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

O

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

me mostró ejemplo sólo para cuadros de diálogo, pero como dije antes de poder utilizar este método para las cajas de diálogo de alerta también.

Answer 4

Aquí es la forma más sencilla para animar diálogo al mostrar

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

}); 

Además de ello, hacer fondo de diálogo de pantalla completa y transparente cuando la animación de abajo

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

Answer 5

puede utilizar las hojas inferiores. Puse un poco de información al respecto.

Con Android Support Library 23.2, Google anunció su compatibilidad con las hojas inferiores. De acuerdo con Material Design, las hojas inferiores son elementos que se muestran solo como resultado de una acción iniciada por el usuario, que se utiliza para revelar más contenido.

Hay dos tipos principales de sábanas bajeras:

sábanas bajeras modales alternativas a los menús o diálogos sencillos. También pueden presentar contenido vinculado de otras aplicaciones. Son principalmente para dispositivos móviles.

sábanas bajeras persistentes presente en la aplicación de contenido

No es sencillo ejemplo

Hacer un BottomSheet en Android es bastante fácil, sólo tiene que utilizar un CoordinatorLayout como principal elemento de su diseño y adjunte un comportamiento de hoja inferior a una vista.

1 paso - 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 paso - añadir 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 paso - hacer que su MainActivity así:

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