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>
The simplest way to put a Toolbar transparent is to define a opacity in @colors section, define a TransparentTheme in @styles section and then put these defines in your toolbar.
MaterialToolbar is a Toolbar that implements certain Material features, such as elevation overlays for Dark Themes and centered titles.
Simply use app:elevation="0dp" inside "AppBarLayout" to remove the shadow.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With