Make Toolbar transparent

Question

create_account.xml

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:

background_toolbar_translucent.xml

colors.xml

#66000000

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: