工具栏默认没有阴影?

我正在用来自支持库 v21的新工具栏更新我的应用程序。我的问题是,如果我不设置“标高”属性,工具栏不会投射任何阴影。这是正常行为还是我做错了什么?

我的代码是:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">


<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


<FrameLayout
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.

在我的 Activity-OnCreate 方法中:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
145740 次浏览

我的问题是,如果我不设置“标高”属性,工具栏不会投射任何阴影。这是正常行为还是我做错了什么?

这是正常的行为。请参阅 这篇文章末尾的常见问题解答。

我最终为工具栏设置了自己的下拉阴影,认为它可能对任何寻找它的人都有帮助:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">


<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_alizarin"
android:titleTextAppearance="@color/White"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- **** Place Your Content Here **** -->


<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@drawable/toolbar_dropshadow"/>


</FrameLayout>


</LinearLayout>

@ draable/toolbar _ drop shadow:

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

@ color/color _ 茜素

<color name="color_alizarin">#e74c3c</color>

enter image description here

如果您将 ToolBar设置为 ActionBar,那么只需调用:

getSupportActionBar().setElevation(YOUR_ELEVATION);

注意: 这必须在 setSupportActionBar(toolbar);之后调用

这对我非常有效:

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
android:minHeight="?attr/actionBarSize" />


</android.support.v7.widget.CardView>

使用 /价值文件夹根据操作系统版本应用正确的阴影样式。

对于5.0以下的设备 ,使用 /value/styles.xml视窗内容覆盖添加到您的活动主体:

<style name="MyViewArea">
<item name="android:foreground">?android:windowContentOverlay</item>
</style>


<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
</style>

然后通过改变主题添加自定义阴影:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

你可以在这里获取 Google 的 IO 应用影子资源: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

对于5.0设备及更高版本 ,使用 /value-v21/styles.xml海拔添加到工具栏,使用自定义标题样式:

<style name="MyViewArea">
</style>


<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="android:elevation">4dp</item>
</style>

注意,在第二种情况下,我必须创建一个空的 MyViewArea样式,这样 视窗内容覆盖就不会显示出来了。

[更新: 更改了资源名称并添加了 Google shadow。]

你不能在 API 21(Android Lollipop)之前使用标高属性。但是,您可以通过编程方式添加阴影,例如使用放置在“工具栏”下方的自定义视图。

@ 布局/工具栏

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />


<View
android:id="@+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@drawable/toolbar_dropshadow" />

@ draable/toolbar _ drop shadow

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

在你的活动布局中 <include layout="@layout/toolbar" />

enter image description here

你也可以使它与 RelativeLayout一起工作。这减少了布局嵌套一点点;)

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />


<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar" />


<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="@id/toolbar"
android:background="@drawable/toolbar_shadow" />
</RelativeLayout>

Google 在几周前发布了 Design Support 库,在这个库中有一个很好的解决方案。

build.gradle中添加设计支持库作为依赖项:

compile 'com.android.support:design:22.2.0'

添加库提供的 AppBarLayout作为 Toolbar布局的包装器,以生成拖放阴影。

    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
</android.support.design.widget.AppBarLayout>

结果如下:

enter image description here

设计支持库还有很多其他的技巧。

  1. Http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
  2. Http://android-developers.blogspot.in/2015/05/android-design-support-library.html

安卓

如上所述,但带有依赖性:

implementation 'com.google.android.material:material:1.0.0'


com.google.android.material.appbar.AppBarLayout

我已经玩了好几个小时了,这个对我很管用。

appBarLayoutToolbar小部件中删除所有 elevation属性(如果应用任何样式,则包括 styles.xml)。

现在进入活动状态,在你的 actionBar上应用 elvation:

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

这个应该可以。

Actionbar _ behind. xml

    <item>
<shape>
<solid android:color="@color/black" />
<corners android:radius="2dp" />
<gradient
android:startColor="@color/black"
android:centerColor="@color/black"
android:endColor="@color/white"
android:angle="270" />
</shape>
</item>


<item android:bottom="3dp" >
<shape>


<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>

添加到 actionbar _ style 背景

<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">@drawable/actionbar_background</item>
<item name="android:elevation">0dp</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:layout_marginBottom">5dp</item>

Name = “ displayOptions”> useLogo | showHome | showTitle | showCustom

添加到 Basetheme

<style name="BaseTheme" parent="Theme.AppCompat.Light">
<item name="android:homeAsUpIndicator">@drawable/home_back</item>
<item name="actionBarStyle">@style/Theme.ActionBar</item>
</style>

对于5.0 + : 您可以在工具栏中使用 AppBarLayout。

 <android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="@layout/toolbar" />
</android.support.design.widget.AppBarLayout>

我对影子也有类似的问题。在我的示例中,阴影是由 AppBarLayout 的直接父级绘制的。如果父级的高度与 AppBarLayout 的高度相同,则不能绘制阴影。因此,检查父布局的大小,或许布局重做可以解决这个问题。https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

大多数解决方案在这里都可以很好地工作。下面是另一个类似的解决方案:

分级:

implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

你的布局可以有一个工具栏视图,以及它的阴影,如下所示,类似于这个(当然需要修改) :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>


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


</LinearLayout>

Res/draable-v21/toolbar _ action _ bar _ shadow. xml

<androidx.appcompat.widget.AppCompatImageView
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content" android:src="@drawable/msl__action_bar_shadow"/>

Res/draable/toolbar _ action _ bar _ shadow. xml

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>

Res/draable/msl _ _ action _ bar _ shadow. xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#33000000" />


<size android:height="10dp" />
</shape>
</item>


</layer-list>

Xml

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

MainActivity.kt

class MainActivity : AppCompatActivity() {


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar as Toolbar)
}
}

完整的示例 这里,我已经注意到 IDE 有一个 bug,它说 foreground属性太新了,不能在这里使用。

我加了一句

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>

在工具栏描述和它的工作为我。 使用5.0 +

所有你需要的是一个等于 android:elevation值的 android:margin_bottom。不需要 AppBarLayoutclipToPadding等。

例如:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="4dp"
android:background="@android:color/white"
android:elevation="4dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<!--Inner layout goes here-->


</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

正确答案是
Android: background Tint = “ # ff00ff” 到工具栏 和 安卓: 背景 = “@安卓: 颜色/白色”

如果你使用其他颜色,然后白色的背景,它将删除阴影。 干得好,谷歌!

我发布这个,因为这花了我几个小时找到,所以我希望它可以帮助某人。

我有一个问题,阴影/立面没有显示,虽然我创建了一个简单的活动,并把工具栏如下:

 <androidx.appcompat.widget.Toolbar
android:id="@+id/mt_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="@color/colorPrimaryDark"
android:elevation="12dp"/>

原来在旅客名单上 设置 android:hardwareAccelerated="false"是导致它! 一旦我移除它,阴影出现

在我的情况下,升级不能很好地工作,因为我没有给工具栏任何背景。尝试给工具栏设置背景颜色,然后设置高度,这将很好地工作。

Just put  background
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:elevation="8dp"
android:background="#fff"


android:layout_height="?android:attr/actionBarSize"></androidx.appcompat.widget.Toolbar>

你需要使用 背景颜色和 海拔收集。

<com.google.android.material.appbar.MaterialToolbar
app:elevation="8dp"
android:elevation="8dp"
android:background="@color/white"/>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:elevation="4dp">


<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:buttonGravity="center_vertical" />
</androidx.cardview.widget.CardView>