工具栏的对棒棒糖状态栏阴影 [英] Toolbar's shadow on status bar for Lollipop
问题描述
我用一个模板从 Android的工作室所使用应用程序兼容性工具栏
。不幸的是,工具栏施放状态栏上的影子所以它看起来并不right.I 也实施 NavigationDrawer
,所以我不能简单地设置颜色的状态栏。
这是它的外观:
这是应该的:
activity_main.xml中
< android.support.v4.widget.DrawerLayout的xmlns:机器人=http://schemas.android.com/apk/res/android
的xmlns:程序=http://schemas.android.com/apk/res-auto
的xmlns:工具=http://schemas.android.com/tools
机器人:ID =@ + ID / drawer_layout
机器人:layout_width =match_parent
机器人:layout_height =match_parent
机器人:fitsSystemWindows =真
工具:openDrawer =开始><包括
布局=@布局/ app_bar_main
机器人:layout_width =match_parent
机器人:layout_height =match_parent/>< android.support.design.widget.NavigationView
机器人:ID =@ + ID / nav_view
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =match_parent
机器人:layout_gravity =开始
应用:headerLayout =@布局/ nav_header_main
应用:菜单=@菜单/ activity_main_drawer/>< /android.support.v4.widget.DrawerLayout>
app_bar_main.xml
<?XML版本=1.0编码=UTF-8&GT?;
< android.support.design.widget.CoordinatorLayout的xmlns:机器人=http://schemas.android.com/apk/res/android
的xmlns:程序=http://schemas.android.com/apk/res-auto
的xmlns:工具=http://schemas.android.com/tools
机器人:layout_width =match_parent
机器人:layout_height =match_parent
机器人:fitsSystemWindows =真
工具:上下文=hu.pe.thinhhoang.aaosync.MainActivity>< android.support.design.widget.AppBarLayout
机器人:layout_width =match_parent
机器人:layout_height =WRAP_CONTENT
机器人:主题=@风格/ AppTheme.AppBarOverlay> < android.support.v7.widget.Toolbar
机器人:ID =@ + ID /工具栏
机器人:layout_width =match_parent
机器人:layout_height =?ATTR / actionBarSize
机器人:ATTR / colorPrimary背景=
应用:popupTheme =@风格/ AppTheme.PopupOverlay/>< /android.support.design.widget.AppBarLayout><包括布局=@布局/ content_main/>< /android.support.design.widget.CoordinatorLayout>
styles.xml(V21)
<资源>><样式名称=AppTheme.NoActionBar>
<项目名称=windowActionBar>假LT; /项目>
<项目名称=windowNoTitle>真< /项目>
<项目名称=机器人:windowDrawsSystemBarBackgrounds>真< /项目>
<项目名称=机器人:statusBarColor> @android:彩色/透明< /项目>
< /风格>< /资源>
这阴影下面LOLLIPOP API的 windowContentOverlay
部分的(上LOLLIPOP它@null )。
当你使用工具栏小部件的工作的工具栏不窗口装饰的一部分了,所以影子在窗口顶部到工具栏,而不是它下面的开始(所以你想要的windowContentOverlay是@null)。此外,您需要添加工具栏pre-LOLLIPOP与背景设置为垂直阴影绘制( 8DP高大梯度
从#20000000
到#00000000
效果最好)。在LOLLIPOP可以集8DP海拔
工具栏上的来代替。
I'm using a template from Android Studio that used AppCompat Toolbar
. Unfortunately, the toolbar casts shadow on the status bar so it doesn't look right.I also implement a NavigationDrawer
so I can't simply set the color of the status bar.
This is how it looks:
This is how it should be:
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>
app_bar_main.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>
styles.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>
This shadow is part of windowContentOverlay
on APIs below LOLLIPOP (on LOLLIPOP it's @null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be @null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient
from #20000000
to #00000000
works best). On LOLLIPOP you can set 8dp elevation
on the toolbar instead.
这篇关于工具栏的对棒棒糖状态栏阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!