Android transparent overlay toolbar

Question

I created a ToolBar which I set as my ActionBar and I have it transparent, my question is I want it to overlay the rest of the content, right now it is acting like a normal ActionBar where my LinearLayout "stops" below it. How do I make my ToolBar overlay my layout and have that layout fill the whole screen?

The style for the original ActionBar is just:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
</style>

My ToolBar:

<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"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
android:background="@android:color/transparent"/>

and my ToolBar declaration:

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

I feel like I'm missing something really simple but after searching I couldn't find the solution I'm looking for. Any help would be appreciated!

EDIT: Here is my full XML Main Layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<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"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"/>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Nav drawer -->
    <fragment
        android:id="@+id/fragment_drawer"
        android:name="rsay.android.scrollbanner.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="left|start" />
</android.support.v4.widget.DrawerLayout>

Xiaoximena

Answer 1

You are on right track. Simplest way you can do it is using FrameLayout where the content ViewGroup will match_parent while the Toolbar is on top of this ViewGroup

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <!-- This can be any child. For sample purposes I assume this layout contains fragments -->
    <LinearLayout  
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fragment_container"
        android:orientation="horizontal"/>


    <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/toolbar"
       app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:minHeight="?attr/actionBarSize"
       android:background="@android:color/transparent">
        </android.support.v7.widget.Toolbar>

</FrameLayout>

Babin

So this is closer than what I had, I have a DrawerLayout as my second child instead of a LinearLayout and the navigation drawer is there when I swipe from the left, but the ToolBar is not visible, I'm assuming it's behind the other Layout, is there an attribute I need to specify to bring it to the front? – Xiaoximena

Views from xml are ordered with the last element displayed at the highest elevation. If you moved the <android.support.v7.widget.Toolbar/> element after the LinearLayout, it will be displayed on top. I've edited Nikola's response to reflect this. – Manful

Confirmed. Moving the toolbar to be the last element has put it on the top of the main content. My root layout is RelativeLayout. – Estaestablish

Worked in case of Toolbar above CoordinatorLayout. – Microdot

Answer 2

After some exercise i make it happen. Hope it helps others. here, i set no elevation for appbarlayout

 <android.support.design.widget.CoordinatorLayout 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:background="@drawable/background_gradiant"
    android:fitsSystemWindows="true"
    tools:context=".activity.AddMembersActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

    </android.support.design.widget.AppBarLayout>


    <include layout="@layout/content_add_member" />

</android.support.design.widget.CoordinatorLayout>

Albers

Genius you are! – Verge

Answer 3

You should set the transparency on the AppBarLayout instead of the Toolbar and remove the app:layout_behavior if you want it to overlay the content.

Clachan

Thanks! Removing app:layout_behavior="@string/appbar_scrolling_view_behavior" from activity layout and setting android:background="@color/transparent" in AppBarLayout resolved the problem. – Lyso

Also add toolbar.background.alpha = 0 in onCreate(). – Lyso

Answer 4

In xml, the ordering of the layouts determine the "depth". By moving the toolbar below the other elements, it will overlay them.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"/>

    <!-- Nav drawer -->
    <fragment
        android:id="@+id/fragment_drawer"
        android:name="rsay.android.scrollbanner.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="left|start" />    

</android.support.v4.widget.DrawerLayout>

Manful

Works as intended but clicks on the underlying fragment don't work anymore. – Vinificator

Answer 5

in styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
</style>

<style name="ActionBar.SemiTransp" parent="Base.Widget.AppCompat.ActionBar">
    <item name="displayOptions">showHome|showTitle</item>
    <item name="background">@drawable/gray_to_transp</item>
</style>

<style name="AppTheme.SemiTranspActionBar" parent="@style/AppTheme">
    <item name="actionBarStyle">@style/ActionBar.SemiTransp</item>
    <item name="windowActionBarOverlay">true</item>
</style>

and in the manifest:

<activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme.SemiTranspActionBar">

Verdict

Answer 6

CollapsingToolbar introduced in support library 22.2.0 (May 2015), offers overlay effect by default:

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"/>

        </android.support.design.widget.AppBarLayout>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.CoordinatorLayout>

Werewolf

Answer 7

You can use CoordinatorLayout as below

<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.epbit.itattooz.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:minHeight="?android:attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:titleTextAppearance="@style/ToolbarTitle"/>

    <FrameLayout
        android:id="@+id/containerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Where frameLayout is for used fragments.

Ilona

Answer 8

Maybe this can help you, Ryan.

toolbar.getBackground().setAlpha(0);

Intervenient

He clearly stated that he want's the content behind the Toolbar. Changing alpha will not make the content go behind the Toolbar. If he just changes the alpha, the Rect of the drawer will go black/white (depending on the theme) but content will be still below. – Babin

You're right! Maybe he can edit his XML and organize the elements. But, after do that, I think he can use the line that I posted to make his Toolbar overlay the layout. – Intervenient

He already has Toolbar background set to @android:color/transparent. – Babin

Right, I didn't see that line. He must edit his XML, organize the elements and it's done. – Intervenient

TBH, I have tried ALL of the SoF solutions for a transparent bar. In my case, it's DrawerLayout > CoordinatorLayout > AppBarLayout > Toolbar. The ONLY way I've been able to get it transparent was to use code, this worked (setAlpha) finally. I also have setBackgroundColor() on the AppBarLayout object to transparent. Still trying to get rid of the elevation... this is a nightmare frankly. Using appcompat-v7:25.3.1 and testing on API 26... thanks Marco. – Doublefaced