La elevación no funciona para BottomSheet dentro de la disposición del coordinador
Estoy intentando usar una BottomSheet
en mi diseño. La vista de la raíz es un CoordinatorLayout
y quiero fijar Elevation
en la parte superior de la Hoja de Fondo por lo que estoy configurándolo con un valor alto (50dp), sin embargo, no se muestra cuando la aplicación se ejecuta, pero aparece en la herramienta de diseño de estudio de Android.
He intentado fijar el fondo para la hoja con un color sólido en vez del gradiente pero todavía trabajó. También traté de usar formas de sombra, pero no da la misma apariencia de elevación.
- Persistente hoja inferior con vista recicladora
- Android Support BottomSheetBehavior no puede ser dinámico?
- Hoja inferior de Android - tema de desplazamiento
- BottomSheetDialogFragment - Cómo configurar la altura expandida (o el desplazamiento de la parte superior del min)
- Hoja de fondo se aleja con cambio de visibilidad
Aquí está mi XML
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.atefhares.StartActivity" android:clipToPadding="false"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/DetailsView" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Details Should be shown here" android:id="@+id/textView" android:textSize="25sp" android:padding="20dp" /> </LinearLayout> <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.atefhares.Start_Activity" /> </LinearLayout> <android.support.v4.widget.SlidingPaneLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_peekHeight="70dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior" android:background="@drawable/gradiant" android:fillViewport="true" android:elevation="50dp"> <include layout="@layout/bottom_sheet_layout"/> </android.support.v4.widget.SlidingPaneLayout> </android.support.design.widget.CoordinatorLayout>
Editar: bottom_sheet_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" android:orientation="vertical"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="70dp" android:background="@color/colorPrimary" android:padding="10dp" android:id="@+id/inviteLL"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:id="@+id/imageView" android:background="@drawable/invite_icon" android:layout_margin="5dp" android:layout_gravity="center_vertical" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Invite Friends" android:textSize="22sp" android:textColor="#ffffff" android:padding="10dp" android:fontFamily="sans-serif-condensed" android:gravity="center_vertical" android:id="@+id/inviteTV" android:layout_gravity="center_vertical" android:layout_weight="1" /> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:id="@+id/arrowIV" android:layout_gravity="center_vertical" android:background="@drawable/arrow_up" /> </LinearLayout> <ListView android:layout_width="match_parent" android:layout_height="fill_parent" android:id="@+id/usersLV" android:dividerHeight="1dp" android:divider="#ffffff" android:background="#ffffff" /> </LinearLayout>
Entonces, ¿ cómo puedo hacer la elevación muestra en la parte superior de la Bottom Sheet
Cualquiera puede ayudar, por favor?
- Cómo atenuar el fondo cuando se utiliza la parte inferior de la biblioteca de soporte?
- La Biblioteca de Soporte de Diseño de Android 24.2.1 hace que BottomSheet se abra al inicio
- Personalización de la hoja inferior persistente STATE_EXPANDED altura o desplazamiento
- EditText setError está fuera de lugar en BottomSheetDialog
- ¿Cómo puedo agregar una sombra a la vista inferior de la hoja?
- ¿Cómo manejar los problemas de la nueva hoja inferior de la biblioteca de soporte / diseño?
- ListView en la hoja inferior
- BottomNavigationView no es de ancho completo
La respuesta es: no, no es posible (a menos que cree su propia vista personalizada con una función de elevación en la parte superior).
La eleva- ción no pretende ser visible en la parte superior de una vista, sino en la parte inferior, a la derecha ya la izquierda.
Si observa de cerca las directrices oficiales de diseño de material , puede ver que la barra inferior simplemente no la tiene (no confunda con el espacio gris entre la tarjeta y la barra inferior).
Por ejemplo: import Card Ver muestra de Android Studio y jugar con ella con el emulador o el dispositivo. Verá que si aumenta el valor de elevación, la vista tendrá su sombra en todas partes excepto en la parte superior (vea la segunda imagen a continuación).
Otro ejemplo es dado importando Elevación Básica .
EDITAR
El código siguiente se toma del ejemplo de la vista de tarjeta . Hay un diseño que contiene un CardView
con elevación . Siempre que cambie la elevación, siempre verá sombra en todas partes, pero no en la parte superior (el código se probó con Lollipop y Marshmallow).
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" > <android.support.v7.widget.CardView android:id="@+id/cardview" android:layout_width="fill_parent" android:layout_height="wrap_content" android:elevation="100dp" card_view:cardBackgroundColor="@color/cardview_initial_background" card_view:cardCornerRadius="8dp" android:layout_marginLeft="@dimen/margin_large" android:layout_marginRight="@dimen/margin_large" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/margin_medium" android:text="@string/cardview_contents" /> </android.support.v7.widget.CardView> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/margin_large" android:orientation="horizontal" > <TextView android:layout_width="@dimen/seekbar_label_length" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="@string/cardview_radius_seekbar_text" /> <SeekBar android:id="@+id/cardview_radius_seekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/margin_medium" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="@dimen/seekbar_label_length" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="@string/cardview_elevation_seekbar_text" /> <SeekBar android:id="@+id/cardview_elevation_seekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/margin_medium" /> </LinearLayout> </LinearLayout>
No te olvides que para dibujar sombra debes usar el diseño hardwareAccelerated
HardwareAccelerated = true
HardwareAccelerated = false
Consulta Aceleración de hardware de Android para obtener detalles
Prueba esto,
<android.support.v4.widget.SlidingPaneLayout android:id="@+id/bottom_sheet" xmlns:slide_panel="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_peekHeight="70dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior" android:background="@drawable/gradiant" android:fillViewport="true" slide_panel:elevation="50dp">
De acuerdo con las directrices de Google con el androide: la elevación no es posible (También se puede leer más sobre el keyligth ).
De todos modos, en los casos más comunes cuando se desplaza hacia arriba la "Hoja de Fondo" aparece una capa semitransparente detrás de la "Hoja de Fondo", esto ayuda a mantener al usuario enfocado en las acciones de "Hoja de Fondo", como estos ejemplos .
Si de todos modos desea una sombra superior, puede establecer un fondo dibujable con degradado como este (shadow_top.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="90" android:centerColor="#000000" android:endColor="@android:color/transparent" android:startColor="#000000" android:type="linear" />
Y su SlidingPanelLayout será:
<android.support.v4.widget.SlidingPaneLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_peekHeight="95dp" android:paddingTop="25dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior" android:background="@drawable/shadow_top" android:fillViewport="true" >
Atentamente.
- HTML5 Canvas en teléfonos Android – Redibujar y resaltar problemas
- Cómo dibujar con framebuffer en Android?