Make Toolbar transparent

Question

create_account.xml

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
tools:context="io.sleeko.board.CreateAccountActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"

        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_create_account" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

I need to make the above ToolBar transparent. so that we can see the background Image.I have tried different methods. but couldn't find correct solution.

please help.thanks

Answer 1

Most of the times we want the toolbar to be translucent because we want to show content behind it. The problem is that the colors of the content behind the toolbar can collide with the color of the toolbar elements/text (up/back arrow for example).

For that reason you'll see in a lot of implementations that the toolbar is actually not transparent but translucent with a gradient.

You can obtain this with the next code:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/background_toolbar_translucent" />

background_toolbar_translucent.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="270"
        android:endColor="@android:color/transparent"
        android:startColor="@color/black_alpha_40"/>
</shape>

colors.xml

<color name="black_alpha_40">#66000000</color>

You can play with different values on the gradient, what I've found is that for white elements, the black 40% works fine.

Another thing that you might want to do is to hide the title of the toolbar.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

And show the up affordance...

getSupportActionBar().setDisplayShowTitleEnabled(false);

Don't worry if you see something like this in the layout preview panel...

It looks very different when is actually overlapping the content:

Answer 2

Here is my solution.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="#00000000">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

Answer 3

That is my version of how to get the transparent Toolbar without shadow in AppBarLayout. The major problem with the above solutions was when I made the toolbar transparent, the shadow was still cast under it. To make the transparent toolbar with the back navigationIcon in Fragment:

layout_transparent_toolbar_fragment.xml:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/general_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:navigationIcon="@drawable/ic_arrow_back_black_24dp"></android.support.v7.widget.Toolbar>

and in TransparentToolbarFragment:

override fun onCreateView(inflater: LayoutInflater, vg: ViewGroup?, savedInstanceState: Bundle?): View? {
    val layout = inflater.inflate(R.layout.layout_transparent_toolbar_fragment, vg, false)
    val toolbar = layout.findViewById<View>(R.id.toolbar) as Toolbar
    val appBar = layout.findViewById<View>(R.id.general_appbar) as AppBarLayout
    appBar.outlineProvider = null
    val appCompatActivity = (activity as AppCompatActivity)
    appCompatActivity.setSupportActionBar(toolbar)

    val actionBar = appCompatActivity.getSupportActionBar()
    if (actionBar != null) actionBar!!.setDisplayHomeAsUpEnabled(true)
    toolbar.setNavigationOnClickListener { appCompatActivity.finish() }

    return layout
}

Actually, the line

appBar.outlineProvider = null

does the job of hiding the toolbar shadow.