Lollipop中工具栏在状态栏上的阴影

12

我正在使用来自Android Studio的模板,其中包含AppCompat Toolbar. 不幸的是,工具栏会在状态栏上产生阴影,因此看起来不正确。我还实现了一个NavigationDrawer,所以不能简单地设置状态栏的颜色。

它看起来像这样:

enter image description here

应该是这个样子:

enter image description here

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

应用栏主界面.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="hu.pe.thinhhoang.aaosync.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_main" />

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

样式表.xml(v21)

<resources>>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

</resources>

感谢您的快速回复。我已经编辑了我的帖子,包括代码。 - Hoàng Đình Thịnh
为什么不使用下面的视图并自定义它? - Quick learner
@HoàngĐìnhThịnh - 这是你的全部样式代码吗? - ʍѳђઽ૯ท
只需styles.xml v21+... - Hoàng Đình Thịnh
可能是如何从ActionBar中删除顶部边框阴影的重复问题。 - Allan Veloso
5个回答

15

像这样放置一个LinearLayout:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activities.MainScreenActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main_screen" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

android.support.design.widget.CoordinatorLayout同样适用(如果您想像使用RelativeLayout一样添加多个元素,但同时又正确获取工具栏的空间)。 - Andrea Lazzarotto
可以的。为什么? - Gennadii Saprykin
这样可以解决阴影问题,但可能会破坏导航抽屉。请移除 android:fitsSystemWindows="true" - Paweł Nadolski

6
我尝试了所有其他答案,但都没有起作用。解决方法是在AppBarLayout中添加以下内容:
    app:elevation="0dp"

太好了!这个建议很有用,其他的都没有帮助。 - CoolMind
3
解决了问题的50%,因为这样不仅从顶部移除了阴影,也从底部移除了本应该保留的阴影。 - Chapz
1
同样也会移除底部的阴影,因此并不实用。 - Jason

6

在LOLLIPOP以下的API中,这个阴影是windowContentOverlay的一部分(在LOLLIPOP上它是@null)

当您使用工具栏小部件时,工具栏不再是窗口装饰的一部分,因此阴影从窗口顶部开始覆盖工具栏而不是在下面(因此您需要将windowContentOverlay设置为@null)。 此外,您需要在LOLLIPOP之前的额外空视图下方添加一个背景设置为垂直阴影可绘制的视图(8dp高度梯度#20000000#00000000最佳)。 在LOLLIPOP上,您可以将8dp高度阴影设置在工具栏上。


我实际上是从一个棒棒糖设备中截取屏幕截图... 我做错了什么吗? - Hoàng Đình Thịnh
AppBarLayout 是在状态栏上投射阴影的元素。目前我能找到的最好解决方案是,移除 AppBarLayout 并手动添加阴影到应用栏下方。 - Hoàng Đình Thịnh

4

这是因为:

<item name="android:statusBarColor">@android:color/transparent</item>

我猜。

明白了,看这个:

http://developer.android.com/training/material/theme.html#StatusBar

要为状态栏设置自定义颜色,请在扩展材质主题时使用android:statusBarColor属性。默认情况下,android:statusBarColor会继承android:colorPrimaryDark的值。而且你已将其设置为transparent,这不是一个好的做法,因为谷歌已经为您写好了此代码。
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

而且,不是:

<style name="AppTheme.NoActionBar">

使用此代码并添加父元素进行检查:
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">

2
当我选择NavigationDrawer布局时,透明颜色是由Android Studio自动生成的。如果没有它,状态栏就不会是透明的,当你拉出抽屉时可能会看起来很奇怪。 - Hoàng Đình Thịnh

3
为了获得正确的行为,您需要移除以下内容。
android:fitsSystemWindows="true"

来自android.support.design.widget.CoordinatorLayout

在您的styles.xml文件中,定义在colorPrimaryDark中的颜色将用于绘制通知栏。

您需要在values-v21文件夹中拥有styles.xml文件,并在其中添加以下样式项:

 <item name="android:statusBarColor">@android:color/transparent</item>

希望这能有所帮助。

这个方法真的有效!我尝试了所有其他建议,但只有这个能够正确地解决问题;底部有阴影但顶部没有阴影,并且不会破坏导航抽屉。 - Ben Grant
1
嗯,这个好像没起作用。它移除了状态栏的阴影,但现在状态栏的颜色是非常浅的灰色(不是我的colorPrimaryDark)。 - friederbluemle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接