Search code examples
androidmaterial-designandroid-appbarlayout

Actionbar items are not shown when the background image is white

I'm using CoordinatorLayout and AppBarLayout with a background image to create the following effect:

enter image description here

However, when the background is white at the top, the action bar's controls are not visible to the human eye (or barely visible):

enter image description here

I like material design, but this seems a bit strange to me - having to scroll down in those cases so that the AppBar would pin at the top in order to see the actions.

A lot of apps use this design, so I guess people are ok with it? Should I just let it be?

Solution

  • The page on Imagery has a section on "Text protection". Quoting from there:

    To make typography legible on top of imagery, apply text protection in the form of scrims. Scrims are lightweight, translucent material layers.

    So if you want to ensure the text is legible you add a scrim to your Toolbar, e.g. (if it's not possible to edit the images) a View with a background made of a shape drawable with a color gradient.