Search code examples
androidkotlinmaterial-designgoogle-maps-android-api-2transparency

Transparent white button looks bad in Android Material Design

Consider these 2 screenshots. I defined the elements on the left, top, and bottom-right:

enter image description here enter image description here

The left/top screenshot has all my elements using a solid white (#FFFFFF) while the bottom/right one adds a bit of transparency (#D0FFFFFF). My issue is that my elements look hideous with transparency. For example the FAB (bottom-right) contains a smaller opaque circle for no reason.

All my elements have elevation 6 (as that is the FAB default elevation). Anything greater-than elevation 2 has this issue clearly visible, and anything below 2 does not cast enough shadow for me to look acceptable.

The Maps-defined element (top-right) seems completely unaffected by this however! What is it doing differently? It's clearly using transparency like me and also casting a shadow corresponding to elevation 2 or more.

Code used is basically this:

fab = FloatingActionButton(this.context!!)
fab.backgroundTintList = ColorStateList.valueOf(Color.parseColor("#d0ffffff"))
fab.compatElevation = 6F
Solution

  • For example the FAB (bottom-right) contains a smaller opaque circle for no reason.

    later on... fab.compatElevation = 6F

     

    The circle you are seeing it's FAB's shadow, which is generated by the elevation. If you want to remove the shadow but keep the elevation, do:

    fab.outlineProvider = null

    If you want to keep both elevation and shadow, you have to make a custom outlineProvider (probably a banana shaped one).