CODEWITHSUNDEEP
androidandroid-toolbar
Ryan Sayles
Ryan Sayles

Reputation: 3441

Android transparent overlay toolbar

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>

Upvotes: 22

Views: 43130

Answers (8)

Dan Alboteanu
Dan Alboteanu

Reputation: 10252

enter image description here

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

Upvotes: 2

abedfar
abedfar

Reputation: 1999

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>

Upvotes: 1

Soni Kumar
Soni Kumar

Reputation: 1543

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.

Upvotes: 0

Shihab Uddin
Shihab Uddin

Reputation: 6931

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>

Upvotes: 11

carvaq
carvaq

Reputation: 1856

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.

Upvotes: 3

Patrick Dattilio
Patrick Dattilio

Reputation: 1814

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>

Upvotes: 2

Nikola Despotoski
Nikola Despotoski

Reputation: 50578

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>

Upvotes: 24

Marco Vignoli
Marco Vignoli

Reputation: 368

Maybe this can help you, Ryan.

toolbar.getBackground().setAlpha(0);

Upvotes: -1

Related Questions