Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android transparent overlay toolbar

Tags:

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> 

like image 920
Ryan Sayles Avatar asked Dec 17 '14 18:12

Ryan Sayles


People also ask

How do I make the toolbar transparent on Android?

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.

What is Material design Toolbar Android?

MaterialToolbar is a Toolbar that implements certain Material features, such as elevation overlays for Dark Themes and centered titles.

How do you make AppBarLayout transparent?

Simply use app:elevation="0dp" inside "AppBarLayout" to remove the shadow.


1 Answers

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> 
like image 132
Nikola Despotoski Avatar answered Sep 30 '22 13:09

Nikola Despotoski