谷歌现在渐变/阴影状态栏和导航栏

Question

我正试图制作类似于Google Now的状态栏和导航栏渐变。

图片参考：如下所示的矩形区域

在尝试以下选项后，对于Android Marshmallow：

    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowTranslucentStatus">true</item>

我遇到了以下行为

图片参考:

有人能建议我如何在两个上面都获得渐变？
那是渐变还是阴影？

- Jitendar M

---

不要选择旧的操作系统选项，看起来你添加了一个旧的操作系统选项。 - Kirtikumar A.

你是在指 'minSdkVersion' 还是 'targetSdkVersion'？？...我正在 Android 6.0 设备上进行测试，Google Now 的截图也是从同一设备中获取的...我在示例应用程序中提到了 minSdkVersion 为 21，targetSdkVersion 为 23。 - Jitendar M

Answer 1

这是一个使用渐变作为 遮罩 的效果。要实现这个效果，首先你需要移除状态栏和导航栏的半透明底层。另一个答案详细介绍了如何在较低版本的设备上实现此操作；但在 Android Lollipop 及更高版本中，你只需将两个样式属性设置为透明即可：

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

然后，要添加遮罩层，您可以使用一个形状可绘制对象：

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient android:type="linear"
        android:angle="270"
        android:centerY="0.3"
        android:startColor="#66000000"
        android:centerColor="#33000000"
        android:endColor="#00000000"/>

</shape>

然后，您可以将其设置为布局中 View 的背景：

<View
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:background="@drawable/scrim"/>

您还可以设置 android:rotation="180" 属性，以在屏幕底部使用相同的渐变。

- Bryan

---

如果我注意到得正确，我可以看到不是Google Now应用程序有蒙板，而是主屏幕（即状态栏本身有蒙板）。我们可以检查状态栏的Android源代码，了解如何应用蒙板。 - Jitendar M

@Jitendar 我认为它并没有直接应用于状态栏（虽然我不完全排除这种可能性）。我认为Google Now Launcher（不是开源的）将内容蒙版应用于主屏幕。 - Bryan

Answer 2

首先，添加一个样式使动作状态栏完全透明：

<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
<!-- Customize your theme here. -->
<item name="android:windowBackground">@null</item>
<item name="android:actionBarStyle">@style/ActionBarStyle.Transparent</item>
<item name="android:windowActionBarOverlay">true</item> 
</style>

<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
<item name="android:background">@null</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:titleTextStyle">@style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>

<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@android:color/white</item>
</style>

并且要添加 scrim，创建一个可绘制文件并添加此代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#88000000" />
<gradient
    android:angle="90"
    android:centerColor="#66000000"
    android:centerY="0.3"
    android:endColor="#00000000"
    android:startColor="#CC000000"
    android:type="linear" />
</shape>

并将其作为您主题的背景添加;

- Abhi

---

虽然它并没有像以前一样完全正常工作，但我从你的回答中确实得到了一些好的提示。 - user7237624