Unable to make toolbar transparent in Android

Question

My tool bar always stays gray when I try to set the background as transparent. Here is my XML.

<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="wrap_content"
    android:background="@android:color/transparent"
    android:minHeight="@dimen/abc_action_bar_default_height_material"
    app:theme="@style/Rushmore.Toolbar.Transparent" />

And my theme

 <style name="Rushmore.Toolbar.Transparent" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:windowActionBarOverlay">true</item>

        <!-- Support Library compability -->
        <item name="windowActionBarOverlay">true</item>
    </style>

I have tried it from code

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
        toolbar.setBackgroundResource(Color.TRANSPARENT);

I am not sure what is it I am missing...

Solution 1

I was having the worst trouble trying to find a solution to this exact issue. I must have searched dozens of posts and come up empty handed. Finally, I happened on a post (I forget which page) that mentioned that the Android v7 Toolbar needs to be on TOP of the layout in order for transparency to work. Thankfully, it worked. So, hopefully this will help someone else:

Here's what you need:

1. Define a layout for your activity like below
2. Make sure the Toolbar is at the bottom of the XML so it'll be on top in the z-order.
3. Use RelativeLayout so you can make sure the Toolbar is visually at the top left on the screen.
4. @color/primary should be transparent (#00000000) OR you can set it in code if you need to use other colors as well.

5. (OPTIONALLY) Either add "android:layout_marginTop="?android:attr/actionBarSize" to the container below OR add it in your code. Otherwise, some of the content in the FrameLayout will be underneath the action bar.

   <android.support.v4.widget.DrawerLayout
       android:id="@+id/drawer_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <FrameLayout
           android:id="@+id/container"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           />
   
       <ListView android:id="@+id/left_drawer"
           android:layout_width="260dp"
           android:layout_height="match_parent"
           android:layout_gravity="start"
           android:layout_marginRight="8dp"
           android:layout_marginTop="?android:attr/actionBarSize"
           android:choiceMode="singleChoice"
           android:divider="@android:color/transparent"
           android:dividerHeight="0dp"
           android:background="@color/drawer_background"
           />
   
   </android.support.v4.widget.DrawerLayout>
   
   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?android:attr/actionBarSize"
       android:layout_alignParentLeft="true"
       android:layout_alignParentTop="true"
       android:background="@color/primary"
       />
   

Solution 2

for the latest update of android x

use @color/transparent = #00000000

use of

android:background="@color/transparent" 
android:elevation="0dp"
app:elevation="0dp"

on appbar

example layout

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toTopOf="parent"
                android:background="@color/transparent"
                android:elevation="0dp"
                app:elevation="0dp"
                >

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:titleMarginStart="@dimen/margin_big"

                    />

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

            <fragment
                android:id="@+id/nav_fragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:navGraph="@navigation/nav_main"
                />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@color/bottom"
                app:menu="@menu/navigation"
                app:layout_constraintBottom_toBottomOf="parent"
                />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/navigation"
            />

    </androidx.drawerlayout.widget.DrawerLayout>

</layout>

Comments

[arjun]

developer.android.com/training/basics/actionbar/overlaying.h‌​tml take a look at this link. This gives how to overlay toolbar

[Prasanna Aarthi]

@arjun Isnt that for actionbar? I have set <item name="android:windowActionBarOverlay">true</item> as mentioned

[arjun]

try changing the parent of custom style and set the style to activity instead of toolbar. Overlay should be done on activity level.

[Prasanna Aarthi]

I dont get you.. Could you please post the code..

[arjun]

please navigate to the link in my comment and take a look. you will get cleared

[gegobyte]

How are you able to use multiple root tags? I'm getting error: "Multiple root tags". I have put it inside DrawerLayout and it worked. But there is an issue - the hamburger menu icon of toolbar is in place but the toolbar title has aligned in between the activity, overlapping other views.

[MCLLC]

I didn't. You need to put it in another layout.