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>

Nikola Despotoski · Accepted Answer · 2014-12-24T01:38:36.157

24

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>

edited Dec 24 '14 at 01:38

answered Dec 18 '14 at 00:28

Nikola Despotoski

49,966
15
119
148

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? – Ryan Sayles Dec 18 '14 at 18:10
3

Views from xml are ordered with the last element displayed at the highest elevation. If you moved the element after the LinearLayout, it will be displayed on top. I've edited Nikola's response to reflect this. – Patrick Dattilio Dec 23 '14 at 18:14
1

Confirmed. Moving the toolbar to be the last element has put it on the top of the main content. My root layout is RelativeLayout. – Tomask Jan 13 '16 at 22:02
Worked in case of `Toolbar` above `CoordinatorLayout`. – Eido95 Jan 02 '17 at 20:11

score 10 · Answer 2 · answered Sep 17 '16 at 09:35

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>

score 3 · Answer 3 · answered Jun 07 '16 at 06:39

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.

answered Jun 07 '16 at 06:39

carvaq

1,816
3
16
21

Thanks! Removing `app:layout_behavior="@string/appbar_scrolling_view_behavior"` from activity layout and setting `android:background="@color/transparent"` in `AppBarLayout` resolved the problem. – CoolMind Jan 25 '19 at 13:52
Also add `toolbar.background.alpha = 0` in `onCreate()`. – CoolMind Jan 25 '19 at 16:21

score 2 · Answer 4 · answered Dec 29 '14 at 22:36

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>

Works as intended but clicks on the underlying fragment don't work anymore. — Skynet, Jan 01 '16 at 07:08

score 2 · Answer 5 · answered Apr 29 '18 at 11:40

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

score 1 · Answer 6 · answered Feb 28 '17 at 12:39

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>

score 0 · Answer 7 · answered Sep 19 '16 at 06:04

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.

score -1 · Answer 8 · answered Dec 18 '14 at 01:41

-1

Maybe this can help you, Ryan.

toolbar.getBackground().setAlpha(0);

answered Dec 18 '14 at 01:41

Marco Vignoli

358
1
5

1

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. – Nikola Despotoski Dec 18 '14 at 01:46
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. – Marco Vignoli Dec 18 '14 at 02:06
He already has Toolbar background set to @android:color/transparent. – Nikola Despotoski Dec 18 '14 at 02:07
Right, I didn't see that line. He must edit his XML, organize the elements and it's done. – Marco Vignoli Dec 18 '14 at 02:32
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. – the_dude_abides Jul 28 '17 at 00:01

Android transparent overlay toolbar

8 Answers8

Linked