[英]How to set elevation to Bottom navigation
So by the support V25
. 因此受到了
support V25
的support V25
。 We have new component called Bottom navigation. 我们有一个称为“底部导航”的新组件。
Follow the Design guidelines, the Bottom Navigation's elevation
should be 8dp
( https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs ) 遵循设计指南,底部导航的
elevation
应为8dp
( https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs )
But I can't set the elevation
to it. 但是我无法将其设置为
elevation
。
Any suggestion, example would be appreciated. 任何建议,例子将不胜感激。 Thank you!
谢谢!
UPDATE XML CODE 更新XML代码
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="8dp"
app:elevation="8dp"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@drawable/bottom_nav_color_state"
app:itemTextColor="@drawable/bottom_nav_color_state"
app:menu="@menu/bottom_navigation_main"/>
<FrameLayout
android:id="@+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navigation"
android:background="#EDEDED"/>
So, for now (25.1.0) we have to set the android:background
of BNV to @android:color/white
to have the shadow. 因此,就目前(25.1.0)而言,我们必须将BNV的
android:background
设置为@android:color/white
才能具有阴影。 It will not display if you set to other color (ie your primary color) 如果您设置为其他颜色(即原色),则不会显示
I had the same issue and to have a @android:color/white
as OP suggested was not acceptable in my case. 我有同样的问题,在我的情况下,不能接受OP所建议的
@android:color/white
。 So since we "can't" get shadow with elevation and custom background we need to hack it. 因此,由于我们“无法”获得带有高程和自定义背景的阴影,因此需要对其进行修改。
My approach is adding a shadow view inside the frame layout to "mimic" elevation. 我的方法是在框架布局内添加阴影视图以“模拟”高程。
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="8dp"
app:elevation="8dp"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@drawable/bottom_nav_color_state"
app:itemTextColor="@drawable/bottom_nav_color_state"
app:menu="@menu/bottom_navigation_main"/>
<FrameLayout
android:id="@+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navigation"
android:background="#EDEDED"/>
<some.kind.of.pager.or.other.content.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:id="@+id/shadow_view"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="bottom"
android:background="@drawable/shadow_gradient" />
</FrameLayout>
where the background of the shadow view is nothing more than a shape gradient that is positioned over all other just above the bottom nav view, something like: 阴影视图的背景不过是位于底部导航视图上方所有其他形状之上的形状渐变,类似于:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="@android:color/transparent"
android:startColor="#8f000000" />
</shape>
Hope this helps someone. 希望这对某人有帮助。
Elevation has been fixed in the Android material components 1.1.0 (alpha) release according to this commit. 根据此提交,Android材料组件1.1.0(alpha)版本中的高程已得到修复。
Edit 编辑
for those wondering, this is how you add the new depdendency: 对于那些想知道的人,这是您添加新依赖关系的方式:
dependencies {
// ...
implementation 'com.google.android.material:material:1.1.0-alpha02'
// ...
}
More information about getting started can be found here and info about releases can be found here . 有关入门的更多信息,请参见此处 ;有关发行版本的信息,请参见此处 。
Cheers! 干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.