如何在 android 中将底部阴影添加到选项卡布局或工具栏答案

【问题标题】：How to add bottom shadow to tab layout or Toolbar in android如何在 android 中将底部阴影添加到选项卡布局或工具栏
【发布时间】：2016-04-13 01:29:02
【问题描述】：

您好，我需要在标签布局下添加阴影（例如在 Skype 中）。

我的活动 xml：

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/splashGreenTop"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="0dp"
        android:minHeight="?attr/actionBarSize" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_below="@+id/tab_layout"
        android:id="@+id/tabContainer"
        android:layout_height="match_parent" />
</RelativeLayout>

当我将android:elevation="10dp" 添加到 Tablayout 时，阴影被添加到底部和顶部.. 我只需要底部。看图...

我该怎么做？提前致谢。

【问题讨论】：

stackoverflow.com/questions/26572048/…
我有一个像你这样的问题..你有解决问题吗？你能读懂我的问题吗？ stackoverflow.com/questions/54174641/…

标签： android xml toolbar shadow android-elevation

【解决方案1】：

只需将海拔添加到您的Tablayout (0dp - 25dp)。阅读material design 指南，了解有关海拔的更多信息。

android:elevation="10dp"

编辑：
将其添加到您的选项卡布局和工具栏

<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/splashGreenTop"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="10dp" />
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" 
    android:elevation="10dp"/>

【讨论】：

@puko 正如我所说，也将海拔添加到您的ToolBar
@puko 您也可以通过高度值指定阴影的级别。 skype截图高程的值大概是4-8dp。阅读我建议的材料设计指南，它非常有帮助！
为什么工具栏和tablayout有不同的背景？ splashGreenTop & colorPrimary ?
这个答案没有意义，toolbar和tablayout都会有阴影，toolbar和tablayout之间不应该有阴影
@user924 这确实有意义，因为高度不会添加阴影，它会提升视图（将其视为 z-index）。环境和点闪电使阴影出现。如果两个视图具有相同的高度，则它们之间将没有阴影。

【解决方案2】：

这是在工具栏下方添加阴影的绝佳选择

在您想要的layout 的tablayout 下方添加view

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/splashGreenTop"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="0dp"
        android:minHeight="?attr/actionBarSize" />

       <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@+id/tab_layout"
        android:background="@drawable/toolbar_dropshadow" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_below="@+id/tab_layout"
        android:id="@+id/tabContainer"
        android:layout_height="match_parent" />
</RelativeLayout>

然后像这样在drawable中创建xml
@drawable/toolbar_dropshadow：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="@android:color/transparent"
    android:endColor="#88333333"
    android:angle="90"/>
</shape>

更改 startcolor 和 endcolor 为你想申请

【讨论】：

【解决方案3】：

您可以将 TabLayout 添加为默认有阴影的 AppBarLayout 中的子项，也可以通过 app:elevation="xdp"

指定阴影深度

   <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="xdp">

        <android.support.v7.widget.Toolbar 
        ...
        />

        <android.support.design.widget.TabLayout 
        ...
        />

    </android.support.design.widget.AppBarLayout>

【讨论】：

带有工具栏支持的完整示例，我认为它不会起作用

【解决方案4】：

尝试在 TabLayout 和 Toolbar 之间添加一个简单的 View。将该视图的背景设置为模仿阴影的渐变。

Shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
        android:startColor="#20000000"
        android:endColor="@android:color/transparent"
        android:angle="90">
  </gradient>
</shape>

【讨论】：

【解决方案5】：

其实有一个很简单的解决方案：只需将 Toolbar 和 TabLayout 放在 AppBarLayout 中即可。例如：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ToolbarTheme"
        app:titleTextAppearance="@style/ThemeOverlay.AppCompat.ActionBar"
        android:background="@color/colorPrimary"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>

这对我来说非常有效，它是结合 App-/Toolbar 和 TabLayout 的常用方式。

【讨论】：

谢谢！我不知道为什么这个答案说要为工具栏和标签布局设置高度时有很多选票stackoverflow.com/a/34675808/7767664

【解决方案6】：

只需添加一行即可。

   android:elevation="5dp"

查看完整代码：

   <com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayoutSave"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:elevation="5dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="parent"
    app:tabIndicatorColor="#1d1d1f"
    app:tabIndicatorHeight="4dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="#1d1d1f"
    app:tabTextColor="#888888" />

【讨论】：

【解决方案7】：

将海拔添加到您的Tablayout。 Material Design

android:elevation="15dp"

【讨论】：

【解决方案8】：

使用app:elevation="0dp" 去除阴影。

【讨论】：