How to make Toolbar transparent?

Question

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>

Imparisyllabic

Answer 1

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

Imparisyllabic

If you use Toolbar, just consider it as a normal View.Now you can do whatever you want: set toolbar background transparent, hide or show it... Just applying style windowActionBarOverlay = true doesnt' work. – Client

No point defining "Theme.Custom". Nothing use it. I'm afraid it's not a real working Q.A. – Galenism

Although it does but there is some problem with it as it does not work when parent is AppBarLayout – Oswaldooswalt

@HuyDuongTu could you please a look at this question: #64192876 – Multiphase

Answer 2

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:

Aryl

or android:background="@android:color/transparent" – Saxen

you don't need AppBarLayout, just android:background="@null" for your android.support.v7.widget.Toolbar – Plosion

Answer 3

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.

Pancho

awesome, did you find this caveat in AOSP? – Combo

What's the reason to use a gradient if both colors are the same? Why not simply set the background to transparent? – Hevesy

@Hevesy good question. I tried with a solid transparent and didn't work, but you are free to give it a try, maybe now it works. – Pancho

@Heny try also this. I have my code like this now. Set on your theme ..android:colorPrimary>@color/transparent and ..name="colorPrimary">@color/transparent</item> – Pancho

It will hide a whole toolbar (emulator of Android 5.0), but at least it works. – Transversal

shape? why just not add @null? – Plosion

@Transversal don't forget to set <item name="android:textColorPrimary">@android:color/white</item> in your styles – Plosion

Can anyone please take a look at this #64192876 – Multiphase

Answer 4

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

toolbar.getBackground().setAlpha(0);

Cannonball

This is not very good approach cause loaded mutable bitmap is shared. It's better to use setBackgroundColor – Pixie

Yes, he can use your way too. It's almost the same. – Cannonball

How to do this in xml? – Nitrification

android:alpha="0" – Zolnay

alpha ,hides toolbar content for me – Treenatreenail

It will hide all the views of toolbar viewgroup . – Arie

Can anyone help with this question? #64192876 – Multiphase

Answer 5

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

Flashback

android:translationZ="0.1dp" is not needed! – Hussar

Answer 6

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.

Assegai

Answer 7

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

Zamboanga

Answer 8

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.

Hobie

No, it does not make the Toolbar transparent. – Nitrification

@IgorGanapolsky: Let me know what have you tried. I can try to help you for sorting out your problem. – Hobie

I have a Toolbar inside of AppBarLayout inside a CoordinatorLayout (all inside a DrawerLayout). I tried to apply the transparent background to AppBarLayout and Toolbar, but it doesn't become transparent. – Nitrification

it made toolbar color white not transparent – Treenatreenail

Answer 9

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>

Vitia

primary color has to opaque – Oversold

Thank you! RelativeLayout instead of CoordinatorLayout and Toolbar behind a view were especially useful. Now I even can draw a picture behind a StatusBar. – Transversal

Answer 10

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.

Galenism

Why use Actionbar when we have Toolbar?? – Nitrification

The referred post belongs to someone else who initially had problem with ActionBar :) – Galenism

Answer 11

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

Narra

Nice and clean way to answer. Keep it in that way :) – Foresight

that's grey, not transparent. – Panter

Answer 12

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

Nelrsa

Answer 13

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

Illuminate

Answer 14

https://mcmap.net/q/260701/-android-transparent-overlay-toolbar 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.

Transversal

Answer 15

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>

Footie

Answer 16

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

Plosion

How to make the AppBarLayout Background fully transparent... I meanwhile scrolling all the view scrolling bottom of the AppBarLayout should be visible... As it is in Gmail App #54957042 – Invisible

Answer 17

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"

Raffinose

Answer 18

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

Nellie

Please add an code example or more explanation to make your answer clearer – Lyda