Android：API 23 的透明工具栏答案

【问题标题】：Android : transparent toolbar for API 23Android：API 23 的透明工具栏
【发布时间】：2016-12-14 23:07:23
【问题描述】：

我在现有代码上的工具栏有问题。我想要一个透明的工具栏（不是半透明的）。

我已经搜索了一些回复，但没有任何效果。

我已经尝试过：

创建可绘制的透明背景。
添加自定义主题，windowActionBarOverlay on true
toolbar.getBackground.setAlpha(0)

activity_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"
    tools:context=".ui.Activities.MainActivity"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        style="@style/CustomAppBarLayout"
        >

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

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

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.indetouch.music.player.ui.Activities.MainActivity">

    <LinearLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@android:color/transparent">

        <!-- multiple frame layout [...] -->
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer"
        android:background="@color/main_black"/>

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

tool_bar.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        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="@dimen/abc_action_bar_default_height_material"
        style="@style/CustomToolbar"
        >

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:visibility="gone">

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="5dp"
            android:visibility="gone">

            <android.support.v7.widget.AppCompatImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/ic_volume_down_white_24dp"
                android:visibility="gone"/>

            <android.support.v7.widget.AppCompatSeekBar
                android:id="@+id/seekbar_volume"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:visibility="gone"/>

            <android.support.v7.widget.AppCompatImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/ic_volume_up_white_24dp"
                android:visibility="gone"/>

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


        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:visibility="gone">

            <android.support.v7.widget.AppCompatImageButton
                android:id="@+id/btn_toolbar_back"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/ic_navigate_before_white_24dp"
                android:visibility="gone"/>

            <Space
                android:layout_width="25dp"
                android:layout_height="match_parent"
                android:visibility="gone"/>

            <android.support.v7.widget.AppCompatImageButton
                android:id="@+id/btn_toolbar_next"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/ic_navigate_next_white_24dp"
                android:visibility="gone"/>

        </android.support.v7.widget.LinearLayoutCompat>
    </android.support.design.widget.CoordinatorLayout>
</android.support.v7.widget.Toolbar>

编辑：我找到了解决方案。我更改了我的文件“activity_main.xml”以添加 CoordinatorLayout，然后添加 AppBarLayout，然后将工具栏包含在我的 AppBarLayout 中。另外，我在 Toolbar 和 AppBarLayout 上添加了两种样式。

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
                <item name="android:colorPrimary">@color/PrimaryColor</item>
                <item name="android:colorPrimaryDark">@color/PrimaryDarkColor</item>
                <item name="colorAccent">#ffffff</item>

                <item name="windowNoTitle">true</item>
        </style>

        <style name="CustomAppBarLayout">
                <item name="android:background">@android:color/transparent</item>
        </style>

        <style name="CustomToolbar" parent="Widget.AppCompat.Toolbar">
                <item name="android:background">@android:color/transparent</item>
                <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
                <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
        </style>
</resources>

这还没有完成。 AppbarLayout（或工具栏）上有阴影，我应该解决这个问题（你也可能:)）

【问题讨论】：

标签： android toolbar transparent

【解决方案1】：

您必须先定义样式，然后将其用于您的工具栏：

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:colorPrimaryDark">#ffffff</item>
    <item name="colorAccent">#ffffff</item>
    <item name="colorPrimary">@android:color/transparent</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

【讨论】：

我试过了，这不起作用。我的工具栏变得无法点击。

【解决方案2】：

我找到了！只是我将 AppBarLayout 放入 DrawerLayout 中，一切正常。

main_activity.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"
    tools:context=".ui.Activities.MainActivity"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        style="@style/CustomAppBarLayout"
        >

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

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

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.indetouch.music.player.ui.Activities.MainActivity">

    <LinearLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@android:color/transparent">

        <!-- multiple frame layout [...] -->
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer"
        android:background="@color/main_black"/>

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

【讨论】：