在Material Design中为TabBar添加阴影效果

Question

我有一个操作栏和选项卡栏。我使用以下方法去除了操作栏下面的阴影：

<item name="android:windowContentOverlay">@null</item>

尽管如此，我想在选项卡栏下添加阴影。我正在使用SlidingTabLayout。我的选项卡TextView：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabText"
android:layout_width="wrap_content"
android:layout_height="@dimen/actionbar_height"
android:textColor="@color/tab_color"
android:gravity="center"
android:textAllCaps="true"
android:singleLine="true" />

如何做到这一点？

- rniski

Answer 1

jmols的答案给出的阴影效果与Google应用（例如Play Newsstand）所使用的不同。以下是我的方法，可以使阴影看起来与Play Newsstand完全相同：

创建一个名为shadow.xml的可绘制文件：

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

然后，将该阴影设置到您的内容布局中，例如：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- Your views here -->
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/shadow" />
</RelativeLayout>

放置在您的工具栏/操作栏下方，这与 Play Newsstand 和 Play Store 中的实现完全相同。

- Yunyu L.

---

这对我非常有效，而setElevation、setZ或setTranslationZ只会使选项卡变暗，而没有实际的阴影效果。 - 3c71

这是最简单和最有用的解决方案。真是太棒了。 - rrdev

Answer 2

阴影目前仅在Api级别21上受支持（因为它们是实时渲染的），不幸的是，支持库没有提供。

因此，在api级别<21上，您将不得不使用自定义可绘制来模拟阴影。 最简单的方法是：

• take the shadow 9-patch from the Google IO app.

• set that shadow to your main content layout, for example:

  <RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <Toolbar
          android:id="@+id/tb_toolbar"
          android:layout_width="match_parent"
          android:layout_height="@dimen/abc_action_bar_default_height_material"
          android:title="@string/toolbar_title"
          android:elevation="@dimen/toolbar_elevation"/>
  
      <FrameLayout
          android:id="@+id/fl_fragment_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_below="@id/tb_toolbar"
          android:foreground="@drawable/bottom_shadow"/>
  </RelativeLayout>
  

注意：唯一值得注意的例外是CardView，在旧的API级别上会投射自己的阴影。 更多信息请参见此帖子。

- Jeroen Mols

---

如果Framelayout包含一些子视图，最好将阴影drawable用作其前景。这样它就会始终在它们上面绘制。 - Natix

那很有道理，我会改的！ :) - Jeroen Mols

这个可以运行，尽管我无法让内容在阴影下滚动。边缘也不是很透明。 - Skynet

Answer 3

如果您正在使用Android Material Design，要为视图添加阴影，您需要在布局中指定android:elevation属性或在代码中调用myView.setElevation()方法。您可以在android documentation中了解有关使用材料设计定义阴影的更多信息。

- Dimitri

---

我的minSdk是18。有没有一种方法可以在支持库中使用这个属性？ - rniski

高程是一个正确的答案，但它只支持更高的SDK21。 - VahidHoseini

Answer 4

只需将高程添加到您的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"/>

同样的问题：链接

请注意，如果您在清单中有以下行，则阴影将不会显示：

android:hardwareAccelerated="false"

还有一个链接要跟进：链接

- Jamil Hasnine Tamim