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

Question

嗨，我需要在我的选项卡布局下添加阴影（如在 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 时，阴影被添加到底部和顶部.. 我只需要底部。看图...

我怎样才能做到这一点 ？提前致谢。

Answer 1

只需将海拔添加到您的Tablayout（0dp - 25dp）。阅读材料设计指南，了解有关高程的更多信息。

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

Answer 2

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

在您想要的view下方添加一个tablayoutlayout

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

然后创建一个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你想申请

Answer 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>

Answer 4

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

影子.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>

Answer 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 的常用方法。

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

Answer 7

将海拔添加到您的Tablayout. 材料设计

android:elevation="15dp"

Answer 8

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