Ryan Sayles Ryan Sayles - 2 months ago 56
Android Question

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>



Answer

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