Search code examples
androidxmltoolbar

Unable to make toolbar transparent in Android


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

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