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>

score 50 · Answer 1 · answered Oct 23 '16 at 04:54

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:

you don't need `AppBarLayout`, just `android:background="@null"` for your `android.support.v7.widget.Toolbar` — user25, Apr 29 '18 at 09:32

score 42 · Accepted Answer · edited Mar 11 '16 at 20:12

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

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. — Huy Duong Tu, Oct 31 '14 at 07:38
No point defining "Theme.Custom". Nothing use it. I'm afraid it's not a real working Q.A. — sancho21, Dec 30 '14 at 11:50
Although it does but there is some problem with it as it does not work when parent is AppBarLayout — cammando, Feb 28 '17 at 09:56
@HuyDuongTu could you please a look at this question: https://stackoverflow.com/questions/64192376/how-to-make-the-toolbar-faded-to-blend-in-with-the-layout-underneath# — Kumza Ion, Oct 05 '20 at 04:13

Pedro Varela · Answer 3 · 2017-07-18T14:23:18.537

41

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.

edited Jul 18 '17 at 14:23

answered Aug 25 '16 at 17:52

Pedro Varela

2,296
1
26
32

awesome, did you find this caveat in AOSP? – KingKongCoder Oct 18 '17 at 02:49
2

What's the reason to use a gradient if both colors are the same? Why not simply set the background to transparent? – Henry Nov 13 '17 at 08:37
@Henry 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. – Pedro Varela Nov 13 '17 at 16:16
@Heny try also this. I have my code like this now. Set on your theme ..android:colorPrimary>@color/transparent and ..name="colorPrimary">@color/transparent – Pedro Varela Nov 13 '17 at 16:19
It will hide a whole toolbar (emulator of Android 5.0), but at least it works. – CoolMind Dec 18 '17 at 18:09
shape? why just not add @null? – user25 Apr 29 '18 at 09:08
@CoolMind don't forget to set `@android:color/white` in your styles – user25 Apr 29 '18 at 09:29
Can anyone please take a look at this https://stackoverflow.com/questions/64192376/how-to-make-the-toolbar-faded-to-blend-in-with-the-layout-underneath# – Kumza Ion Oct 05 '20 at 04:17

score 22 · Answer 4 · answered Dec 18 '14 at 00:49

22

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

toolbar.getBackground().setAlpha(0);

answered Dec 18 '14 at 00:49

Marco Vignoli

358
1
5

34

This is not very good approach cause loaded mutable bitmap is shared. It's better to use `setBackgroundColor` – selfsx Dec 19 '14 at 06:44
Yes, he can use your way too. It's almost the same. – Marco Vignoli Dec 19 '14 at 10:39
How to do this in xml? – IgorGanapolsky Sep 01 '15 at 14:29
1

```android:alpha="0"``` – kiddouk Sep 07 '15 at 00:14
1

alpha ,hides `toolbar content` for me – Basheer AL-MOMANI Apr 18 '16 at 14:54
1

It will hide all the views of toolbar viewgroup . – randy Jul 09 '16 at 02:31
Can anyone help with this question? https://stackoverflow.com/questions/64192376/how-to-make-the-toolbar-faded-to-blend-in-with-the-layout-underneath# – Kumza Ion Oct 05 '20 at 04:18

score 18 · Answer 5 · edited Feb 12 '21 at 13:58

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

android:translationZ="0.1dp" is not needed! – user924 Nov 02 '21 at 11:31 — user924, Nov 02 '21 at 11:31

Reprator · Answer 6 · 2016-08-11T13:44:44.543

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.

score 10 · Answer 7 · answered Jun 07 '17 at 14:02

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

score 7 · Answer 8 · answered Aug 14 '15 at 07:14

7

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.

answered Aug 14 '15 at 07:14

V_J

1,081
13
33

11

No, it does not make the Toolbar transparent. – IgorGanapolsky Sep 01 '15 at 14:51
@IgorGanapolsky: Let me know what have you tried. I can try to help you for sorting out your problem. – V_J Sep 02 '15 at 05:57
2

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. – IgorGanapolsky Sep 02 '15 at 12:13
3

it made toolbar color `white` not `transparent` – Basheer AL-MOMANI Apr 18 '16 at 15:00

Ondřej Z · Answer 9 · 2019-05-16T16:56:37.803

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>

Thank you! `RelativeLayout` instead of `CoordinatorLayout` and `Toolbar` behind a view were especially useful. Now I even can draw a picture behind a StatusBar. — CoolMind, Dec 18 '17 at 18:33

score 5 · Answer 10 · edited May 23 '17 at 12:34

5

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

Points that the post suggest are

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

This should solve the problem without too much hassle.

edited May 23 '17 at 12:34

Community

1
1

answered Dec 31 '14 at 05:59

sancho21

3,511
1
39
45

Why use Actionbar when we have Toolbar?? – IgorGanapolsky Sep 01 '15 at 14:54
The referred post belongs to someone else who initially had problem with ActionBar :) – sancho21 Sep 01 '15 at 15:34

score 5 · Answer 11 · answered Feb 21 '16 at 14:40

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

Nice and clean way to answer. Keep it in that way :) – Marco Hernaiz Apr 01 '16 at 07:59 — Marco Hernaiz, Apr 01 '16 at 07:59
that's grey, not transparent. – Himanshu Bansal Apr 08 '21 at 05:33 — Himanshu Bansal, Apr 08 '21 at 05:33

score 2 · Answer 12 · answered Nov 09 '15 at 14:03

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

score 2 · Answer 13 · answered Sep 08 '18 at 07:25

2

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

answered Sep 08 '18 at 07:25

Abubakar

147
2
10

CoolMind · Answer 14 · 2019-01-26T20:29:07.753

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.

score 1 · Answer 15 · answered Oct 15 '16 at 15:10

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>

score 1 · Answer 16 · answered Apr 29 '18 at 09:38

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

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 https://stackoverflow.com/questions/54956542/how-i-implement-new-material-gmail-toolbar-without-nested-scrollview — Kavin Raju S, Mar 19 '20 at 13:04

score 1 · Answer 17 · edited Aug 27 '19 at 06:34

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"

score -6 · Answer 18 · edited May 21 '19 at 04:44

-6

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

edited May 21 '19 at 04:44

John Joe

12,412
16
70
135

answered Dec 14 '17 at 06:43

Suraj Gaur

21
2

2

Please add an code example or more explanation to make your answer clearer – Gregor Doroschenko Dec 14 '17 at 07:03

How to make Toolbar transparent?

18 Answers18

Linked

Related