How to make Toolbar transparent?
Create your toolbar.xml file with background of AppBarLayout is @null
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="@+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Login"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and here is result:
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="@android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="@layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/CustomActionBar"/>
Checking Google's example Source Code I found out how to make the toolbar completely transparent. It was simpler than I thought. We just have to create a simple Shape drawable like this.
The name of the drawable is toolbar_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:startColor="@android:color/transparent"
android:endColor="@android:color/transparent"
android:type="linear" />
</shape>
And then in the fragment or activity.. Add the toolbar like this.
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/toolbar_bg"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And here we will have a fully transparent toolbar.
Don't add the <android.support.design.widget.AppBarLayout >
if you do, this won't work.
Note: If you need the AppBarLayout, set the elevation to 0 so it doesn't draw its shadow.
The Toolbar works like a View, so the answer it's very simple.
toolbar.getBackground().setAlpha(0);