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

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

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