[英]Elevation not working for BottomSheet inside Coordinator layout
I am trying to use a BottomSheet
in my layout. 我想在我的布局中使用
BottomSheet
。 The root view is an CoordinatorLayout
and I want to set Elevation
on top for the Bottom Sheet so i am setting it with a high value (50dp), however it is not showing when the app runs but it appears on android studio design tool. 根视图是一个
CoordinatorLayout
,我想为底部工作表设置Elevation
,所以我设置了一个高值(50dp),但它没有显示应用程序运行但它出现在android studio设计工具上。
I have tried to set background for the sheet with a solid color instead of gradient but it still did work. 我试图用纯色而不是渐变来设置工作表的背景,但它仍然可以工作。 I also tried to use Shadow shapes but it does not give the same elevation appearance.
我也尝试使用阴影形状,但它没有提供相同的高程外观。
here is my XML 这是我的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>
Edit: bottom_sheet_layout.xml 编辑: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>
So how can I make the elevation shows on top of the Bottom Sheet
那么如何在
Bottom Sheet
顶部显示高程显示
Any one can help, please ? 有人可以帮忙吗?
The answer is: no, it is not possible (unless you create your own view custom with an elevation feature on top). 答案是: 不,这是不可能的 (除非您创建自己的视图自定义,顶部有一个高程功能)。
Elevetion is not meant to be visible in the top of a view, but in the bottom, on the right and on the left. Elevetion并不意味着在视图的顶部可见,而是在底部,右侧和左侧。
If you see closely on the official Material Design guidelines, you can see that the bottom bar simply don't have it (do not confuse with the gray space between the card and the bottom bar). 如果您仔细查看官方的材料设计指南,您可以看到底部条形图没有它(不要与卡片和底部条形图之间的灰色空间混淆)。
For example: import Card View sample from Android Studio and play with it with emulator or your device. 例如:从Android Studio导入Card View示例并使用模拟器或您的设备进行播放。 You will see that if you increment the elevation value, the view will have his shadow everywhere except on top (see second image below).
你会看到,如果你增加高程值,除了在顶部之外,视图将在任何地方都有他的阴影(见下面的第二张图片)。
Another example is given by importing Elevation Basic . 另一个例子是通过导入Elevation Basic 。
EDIT 编辑
Following code is taken from Card View sample. 以下代码取自Card View示例。 There is a layout containing a
CardView
with elevation . 有一个包含带高程的
CardView
的布局。 Whenever you change the elevation, you will always see shadow everywhere, but not on top (the code was tested with Lollipop and Marshmallow). 每当你改变高程时,你总会看到阴影到处都是,但不是在顶部(代码是用Lollipop和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>
According to the google guidelines with the android:elevation is not possible (Also you can read more about the keyligth ). 根据google指南与android:提升是不可能的(你也可以阅读更多关于keyligth )。
Anyway on the most common cases when you scroll up the "BottomSheet" a semitransparent layer appears behind the "BottomSheet", this helps to keep the user focus on the "BottomSheet" actions, like these examples . 无论如何,在最常见的情况下,当您向上滚动“BottomSheet”时,“BottomSheet”后面会出现一个半透明层,这有助于让用户专注于“BottomSheet”操作,就像这些示例一样 。
If anyway you want a top shadow you can set a drawable background with gradient like this (shadow_top.xml): 如果你想要一个顶部阴影,你可以用这样的渐变设置一个可绘制的背景(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" />
And your SlidingPanelLayout will be: 而你的SlidingPanelLayout将是:
<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"
>
Best regards. 最好的祝福。
Do not forget that to draw shadow you must use hardwareAccelerated drawing 不要忘记绘制阴影必须使用hardwareAccelerated绘图
hardwareAccelerated = true hardwareAccelerated = true
hardwareAccelerated = false hardwareAccelerated = false
See Android Hardware Acceleration for details 有关详细信息,请参阅Android硬件加速
Try this, 试试这个,
<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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.