[android] 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 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.

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

Just use the following xml code:

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:

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

This will give you the desired output.

Perhaps you need to take a look at this post transparent 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

This should solve the problem without too much hassle.

Just Add android:background="#10000000" in your AppBarLayout tag It works

https://stackoverflow.com/a/37672153/2914140 helped me.

I made this layout for an activity:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent" <- Add transparent color in AppBarLayout.
        android:theme="@style/AppTheme.AppBarOverlay"
        >

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

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        <- Remove app:layout_behavior=...
        />

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

If this doesn't work, in onCreate() of the activity write (where toolbar is @+id/toolbar):

toolbar.background.alpha = 0

If you want to set a semi-transparent color (like #30ff00ff), then set toolbar.setBackgroundColor(color). Or even set a background color of AppBarLayout.

In my case styles of AppBarLayout and Toolbar didn't play role.

Create your toolbar.xml file with background of AppBarLayout is @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:

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

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

I know am late for the party. I've created a simple class to manage the Toolbar transparency.

import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;



public class TransparentToolbarManager {

    private Toolbar mToolbar;
    private ColorDrawable colorDrawable;
    public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;

    public TransparentToolbarManager(Toolbar mToolbar) {
        this.mToolbar = mToolbar;
        this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
    }

    public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
        this.mToolbar = mToolbar;
        this.colorDrawable = colorDrawable;
    }

    //Fading toolbar
    public void manageFadingToolbar(int scrollDistance) {
        if (mToolbar != null && colorDrawable != null) {
            //FadeinAndOut according to the horizontal scrollValue
            if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
                setToolbarAlpha(scrollDistance);
            } else if (scrollDistance > MAX_ALPHA) {
                setToolbarAlpha(MAX_ALPHA);
            }
        }
    }


    @SuppressLint("NewApi")
    public void setToolbarAlpha(int i) {
        colorDrawable.setAlpha(i);
        if (CommonHelper.isSupport(16)) {
            mToolbar.setBackground(colorDrawable);
        } else {
            mToolbar.setBackgroundDrawable(colorDrawable);
        }
    }


}

and the CommonHelper.isSupport()

public static boolean isSupport(int apiLevel) {
        return Build.VERSION.SDK_INT >= apiLevel;
}

Add the following line in 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 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"

It will make the status bar transparent.

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

toolbar.getBackground().setAlpha(0);

for Support Toolbar v7 android.support.v7.widget.Toolbar:

code

toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));

xml (android:background="@null" or android:background="@android:color/transparent")

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="@null"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:ellipsize="start"
        android:singleLine="true"
        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>

if Title is invisible, set textColor

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.

The name of the drawable is 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.

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

I implemented translucent Toolbar by creating two Theme.AppCompat.Light.NoActionBar themes and setting colorPrimary attribute to transparent color.

1) Create one theme for opaque Toolbar:

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

<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

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

try below code

<android.support.design.widget.AppBarLayout
                    android:id="@+id/app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:theme="@style/AppTheme.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>

style.xml

<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorControlActivated">@color/colorWhite</item>
        <item name="colorControlNormal">@color/colorWhite</item>
    </style>

Add below code to styles.xml file

<style name="LayoutPageTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

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

Don't forget to write: android:background="@android:color/transparent"

Only this worked for me (AndroidX support library):

 <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:theme="@style/AppTheme.AppBarOverlay"
            android:translationZ="0.1dp"
            app:elevation="0dp">

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

        </com.google.android.material.appbar.AppBarLayout>

This code removes background in all necessary views and also removes shadow from AppBarLayout (which was a problem)

Answer was found here: remove shadow below AppBarLayout widget android

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

@colors.xml

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

@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

<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

Go to res package and open color.xml. Set color primary to #00000000.