Android 如何使工具栏透明？

How to make Toolbar transparent?

提问by Gleichmut

It is self Q&A postI have transparent ActionBar which overlays layout. After migration to the latest support library I have been forced to get rid off the ActionBar in favor of the Toolbar. The old ways to make it transparent and overlay that layout doesn't work anymore.

这是自我问答帖子我有透明的 ActionBar 覆盖布局。迁移到最新的支持库后，我被迫摆脱了 ActionBar 以支持 Toolbar。使其透明并覆盖该布局的旧方法不再起作用。

<style name="CustomActionBarTheme" parent="@android:style/Theme.AppCompat">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
</style>

<style name="TransparentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

采纳答案by Gleichmut

All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)

您所需要做的就是定义隐藏操作栏的主题，定义具有透明背景的操作栏样式并将此样式设置为工具栏小部件。请注意，工具栏应绘制为最后一个视图（在所有视图树上）

<style name="Theme.Custom" parent="@android:style/Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Layout:

布局：

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

    <!-- Toolbar should be above content-->
    <include layout="@layout/toolbar" />

</RelativeLayout>

Toolbar layout:

工具栏布局：

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/CustomActionBar"/>

回答by TranVo

Create your toolbar.xml filewith background of AppBarLayout is @null

创建您的toolbar.xml文件，背景为AppBarLayout 为@null

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    android:id="@+id/general_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Login"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>

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

and here is result:

这是结果：

回答by Pedro Varela

Checking Google's example Source Code I found out how to make the toolbar completely transparent. It was simpler than I thought. We just have to create a simple Shape drawable like this.

检查 Google 的示例源代码，我发现了如何使工具栏完全透明。这比我想象的要简单。我们只需要像这样创建一个简单的 Shape drawable。

The name of the drawable is toolbar_bg

可绘制对象的名称是 toolbar_bg

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

And then in the fragment or activity.. Add the toolbar like this.

然后在片段或活动中.. 像这样添加工具栏。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/toolbar_bg"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

And here we will have a fully transparent toolbar.

在这里，我们将有一个完全透明的工具栏。

Don't add the <android.support.design.widget.AppBarLayout >if you do, this won't work.

<android.support.design.widget.AppBarLayout >如果这样做，请不要添加，这将不起作用。

Note:If you need the AppBarLayout, set the elevation to 0 so it doesn't draw its shadow.

注意：如果您需要 AppBarLayout，请将高程设置为 0，这样它就不会绘制阴影。

回答by Marco Vignoli

The Toolbar works like a View, so the answer it's very simple.

工具栏的工作方式类似于视图，因此答案非常简单。

toolbar.getBackground().setAlpha(0);

回答by Reprator

Add the following line in style.xml

在 style.xml 中添加以下行

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

<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>

Now add the following line in style-v21,

现在在 style-v21 中添加以下行，

  <style name="AppTheme" parent="Base.Theme.AppTheme">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

and set the theme as android:theme="@style/AppTheme"

并将主题设置为 android:theme="@style/AppTheme"

It will make the status bar transparent.

它将使状态栏透明。

回答by Rajesh.k

Just add android:background="@android:color/transparent"like below in your appbar layout

只需android:background="@android:color/transparent"在您的应用栏布局中添加如下所示

<android.support.design.widget.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@android:color/transparent">

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

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

回答by V_J

Just use the following xml code:

只需使用以下 xml 代码：

Code for the layout:

布局代码：

<android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/def_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/toolbarTransparent"
            android:layout_alignParentTop="true" />

And add the following code in the colors.xml:

并在colors.xml 中添加以下代码：

<color name="toolbarTransparent">#00FFFFFF</color>

This will give you the desired output.

这将为您提供所需的输出。

回答by Jonoid

The simplest way to put a Toolbar transparent is to define a opacity in @colorssection, define a TransparentTheme in @stylessection and then put these defines in your toolbar.

使工具栏透明的最简单方法是在@colors部分定义不透明度，在@styles部分定义透明主题，然后将这些定义放在您的工具栏中。

@colors.xml

@colors.xml

<color name="actionbar_opacity">#33000000</color>

@styles.xml

@styles.xml

<style name="TransparentToolbar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

@activity_main.xml

@activity_main.xml

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:background="@color/actionbar_opacity"
        app:theme="@style/TransparentToolbar"
        android:layout_height="?attr/actionBarSize"/>

That's the result:

结果是这样的：

Screenshot transparent toolbar

截图透明工具栏

回答by sancho21

Perhaps you need to take a look at this post transparent Actionbar with AppCompat-v7 21

也许你需要看看这篇文章透明 Actionbar with AppCompat-v7 21

Points that the post suggest are

帖子建议的要点是

1. Just ensure that you use RelativeLayout to lay Toolbar and the body.
2. Put the Toolbar in the last.
3. Put transparent color for android:background attribute of the Toolbar

1. 只要确保您使用 RelativeLayout 来放置 Toolbar 和 body。
2. 将工具栏放在最后。
3. 为工具栏的 android:background 属性设置透明颜色

This should solve the problem without too much hassle.

这应该可以解决问题而不会太麻烦。

回答by Ond?ej Z

I implemented translucent Toolbar by creating two Theme.AppCompat.Light.NoActionBarthemes and setting colorPrimaryattribute to transparent color.

我通过创建两个Theme.AppCompat.Light.NoActionBar主题并将colorPrimary属性设置为透明颜色来实现半透明工具栏。

1) Create one theme for opaque Toolbar:

1）为不透明的工具栏创建一个主题：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- Toolbar background color -->
    <item name="colorPrimary">#ff212cff</item>

</style>

Second theme for transparent/overlay Toolbar:

透明/覆盖工具栏的第二个主题：

<style name="AppTheme.Overlay" parent="AppTheme">
    <item name="colorPrimary">@color/transparent</item>
</style>

2) In your activity layout, put Toolbar behind content so it can be displayed in front of it:

2）在您的活动布局中，将工具栏放在内容后面，以便它可以显示在其前面：

<RelativeLayout
    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:orientation="vertical">

    <fragment
        android:id="@+id/container"
        android:name="com.test.CustomFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

</RelativeLayout>

3) Apply the transparent theme to your acivity in AndroidManifest.xml

3) 在 AndroidManifest.xml 中为您的活动应用透明主题

    <activity
        android:name="com.test.TransparentActivity"
        android:parentActivityName="com.test.HomeActivity"
        android:theme="@style/AppTheme.Overlay" >
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.test.HomeActivity" />
    </activity>