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

Question

您好，我需要在我的选项卡布局下添加阴影（就像在 Skype 中一样）。

我的activityxml:

    <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)。阅读 material design 指南以了解有关海拔的更多信息。

android:elevation="10dp"

编辑：
将它添加到您的 tablayout 和工具栏

<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

尝试在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>

Answer 3

This is a Great option to add shadow below Toolbar

在您想要的 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 以应用

Answer 4

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

android:elevation="15dp"

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

默认有阴影的AppBarLayout可以添加TabLayout作为child，也可以通过app:elevation="xdp"[=11指定阴影深度=]

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

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

Answer 8

只需添加一行即可。

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

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

How to add bottom shadow to tab layout or Toolbar in android

xml

android

toolbar

shadow

android-elevation