Gleichmut Gleichmut - 3 months ago 92
Android Question

How to make Toolbar transparent?

It is self Q&A post
I have transparent ActionBar which overlays layout. After migration to the latest support library I forced to rid off action bar by tool bar. The old ways to make it transparent and overlay that layout doesn't work

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

Answer

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"/>
Comments