How to implement the new Material Design Bottom App Bar

Question

My company currently uses Vue and scss to build our latest PWA. Given certain conditions (based on the user profile), the left drawer should be replaced by a Bottom App Bar.

We are using Vue Material but our UX and UI designer chose to use the latest version of the Bottom App Bar released by Google.

However, the CSS for this particular component haven't been released yet and isn't part of the VueMaterial components library (which currently support the older version) and I'm struggling to reproduce the second version of the new bar.

I can't post images so here is the link of what I'm refering to

I do not understand how it is possible, using a CSS only solution, to reproduce the inset between the bar and the FAB. I tried to solve the problem using clip-path and mask-image without much success.

Any help or direction would be appreciated.

Snowdrift

Answer 1

Here are a couple of different options. I've added background images so it is clear that the cutout is transparent.

Box-shadow on a pseudo element

Doesn't give the rounded corners and isn't very flexible.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: transparent;
  overflow: hidden;
}

.bar::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1000px;
  width: 64px;
  height: 64px;
  box-shadow: 0px 0px 0px 5000px rebeccapurple;
}

<div class="bar"></div>

Loads of clip path points

Code taken from this fiddle.

Not the easiest to configure but could probably create a preprocessor mixin to handle the generation of those points. Definitely gives a much better effect than the box-shadow technique.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  clip-path: polygon(0 0, 
    calc(50% - 38px) 0, 
    calc(50% - 37.487665px) 0.628287px, 
    calc(50% - 36.975331px) 1.256382px, 
    calc(50% - 36.462997px) 1.884094px, 
    calc(50% - 35.912306px) 2.511233px, 
    calc(50% - 35.863009px) 3.137607px, 
    calc(50% - 35.802788px) 3.763025px, 
    calc(50% - 35.731661px) 4.387296px, 
    calc(50% - 35.64965px) 5.010232px, 
    calc(50% - 35.55678px) 5.631641px, 
    calc(50% - 35.453079px) 6.251334px, 
    calc(50% - 35.338579px) 6.869124px, 
    calc(50% - 35.213314px) 7.484821px, 
    calc(50% - 35.077322px) 8.098238px, 
    calc(50% - 34.930646px) 8.709188px, 
    calc(50% - 34.77333px) 9.317486px, 
    calc(50% - 34.605421px) 9.922945px, 
    calc(50% - 34.426971px) 10.525381px, 
    calc(50% - 34.238035px) 11.124612px, 
    calc(50% - 34.038669px) 11.720454px, 
    calc(50% - 33.828934px) 12.312725px, 
    calc(50% - 33.608895px) 12.901246px, 
    calc(50% - 33.378619px) 13.485837px, 
    calc(50% - 33.138175px) 14.066321px, 
    calc(50% - 32.887636px) 14.642519px, 
    calc(50% - 32.62708px) 15.214257px, 
    calc(50% - 32.356586px) 15.781361px, 
    calc(50% - 32.076235px) 16.343658px, 
    calc(50% - 31.786113px) 16.900976px, 
    calc(50% - 31.486309px) 17.453146px, 
    calc(50% - 31.176915px) 18px, 
    calc(50% - 30.858023px) 18.541371px, 
    calc(50% - 30.529731px) 19.077094px, 
    calc(50% - 30.19214px) 19.607005px, 
    calc(50% - 29.845353px) 20.130945px, 
    calc(50% - 29.489474px) 20.648752px, 
    calc(50% - 29.124612px) 21.160269px, 
    calc(50% - 28.750878px) 21.665341px, 
    calc(50% - 28.368387px) 22.163813px, 
    calc(50% - 27.977255px) 22.655534px, 
    calc(50% - 27.5776px) 23.140354px, 
    calc(50% - 27.169545px) 23.618125px, 
    calc(50% - 26.753214px) 24.088702px, 
    calc(50% - 26.328733px) 24.551941px, 
    calc(50% - 25.896233px) 25.007701px, 
    calc(50% - 25.455844px) 25.455844px, 
    calc(50% - 25.007701px) 25.896233px, 
    calc(50% - 24.551941px) 26.328733px, 
    calc(50% - 24.088702px) 26.753214px, 
    calc(50% - 23.618125px) 27.169545px, 
    calc(50% - 23.140354px) 27.5776px, 
    calc(50% - 22.655534px) 27.977255px, 
    calc(50% - 22.163813px) 28.368387px, 
    calc(50% - 21.665341px) 28.750878px, 
    calc(50% - 21.160269px) 29.124612px, 
    calc(50% - 20.648752px) 29.489474px, 
    calc(50% - 20.130945px) 29.845353px, 
    calc(50% - 19.607005px) 30.19214px, 
    calc(50% - 19.077094px) 30.529731px, 
    calc(50% - 18.541371px) 30.858023px, 
    calc(50% - 18px) 31.176915px, 
    calc(50% - 17.453146px) 31.486309px, 
    calc(50% - 16.900976px) 31.786113px, 
    calc(50% - 16.343658px) 32.076235px, 
    calc(50% - 15.781361px) 32.356586px, 
    calc(50% - 15.214257px) 32.62708px, 
    calc(50% - 14.642519px) 32.887636px, 
    calc(50% - 14.066321px) 33.138175px, 
    calc(50% - 13.485837px) 33.378619px, 
    calc(50% - 12.901246px) 33.608895px, 
    calc(50% - 12.312725px) 33.828934px, 
    calc(50% - 11.720454px) 34.038669px, 
    calc(50% - 11.124612px) 34.238035px, 
    calc(50% - 10.525381px) 34.426971px, 
    calc(50% - 9.922945px) 34.605421px, 
    calc(50% - 9.317486px) 34.77333px, 
    calc(50% - 8.709188px) 34.930646px, 
    calc(50% - 8.098238px) 35.077322px, 
    calc(50% - 7.484821px) 35.213314px, 
    calc(50% - 6.869124px) 35.338579px, 
    calc(50% - 6.251334px) 35.453079px, 
    calc(50% - 5.631641px) 35.55678px, 
    calc(50% - 5.010232px) 35.64965px, 
    calc(50% - 4.387296px) 35.731661px, 
    calc(50% - 3.763025px) 35.802788px, 
    calc(50% - 3.137607px) 35.863009px, 
    calc(50% - 2.511233px) 35.912306px, 
    calc(50% - 1.884094px) 35.950663px, 
    calc(50% - 1.256382px) 35.97807px, 
    calc(50% - 0.628287px) 35.994517px, 
    50% 36px, 
    calc(50% + 0.628287px) 35.994517px, 
    calc(50% + 1.256382px) 35.97807px, 
    calc(50% + 1.884094px) 35.950663px, 
    calc(50% + 2.511233px) 35.912306px, 
    calc(50% + 3.137607px) 35.863009px, 
    calc(50% + 3.763025px) 35.802788px, 
    calc(50% + 4.387296px) 35.731661px, 
    calc(50% + 5.010232px) 35.64965px, 
    calc(50% + 5.631641px) 35.55678px, 
    calc(50% + 6.251334px) 35.453079px, 
    calc(50% + 6.869124px) 35.338579px, 
    calc(50% + 7.484821px) 35.213314px, 
    calc(50% + 8.098238px) 35.077322px, 
    calc(50% + 8.709188px) 34.930646px, 
    calc(50% + 9.317486px) 34.77333px, 
    calc(50% + 9.922945px) 34.605421px, 
    calc(50% + 10.525381px) 34.426971px, 
    calc(50% + 11.124612px) 34.238035px, 
    calc(50% + 11.720454px) 34.038669px, 
    calc(50% + 12.312725px) 33.828934px, 
    calc(50% + 12.901246px) 33.608895px, 
    calc(50% + 13.485837px) 33.378619px, 
    calc(50% + 14.066321px) 33.138175px, 
    calc(50% + 14.642519px) 32.887636px, 
    calc(50% + 15.214257px) 32.62708px, 
    calc(50% + 15.781361px) 32.356586px, 
    calc(50% + 16.343658px) 32.076235px, 
    calc(50% + 16.900976px) 31.786113px, 
    calc(50% + 17.453146px) 31.486309px, 
    calc(50% + 18px) 31.176915px, 
    calc(50% + 18.541371px) 30.858023px, 
    calc(50% + 19.077094px) 30.529731px, 
    calc(50% + 19.607005px) 30.19214px, 
    calc(50% + 20.130945px) 29.845353px, 
    calc(50% + 20.648752px) 29.489474px, 
    calc(50% + 21.160269px) 29.124612px, 
    calc(50% + 21.665341px) 28.750878px, 
    calc(50% + 22.163813px) 28.368387px, 
    calc(50% + 22.655534px) 27.977255px, 
    calc(50% + 23.140354px) 27.5776px, 
    calc(50% + 23.618125px) 27.169545px, 
    calc(50% + 24.088702px) 26.753214px, 
    calc(50% + 24.551941px) 26.328733px, 
    calc(50% + 25.007701px) 25.896233px, 
    calc(50% + 25.455844px) 25.455844px, 
    calc(50% + 25.896233px) 25.007701px, 
    calc(50% + 26.328733px) 24.551941px, 
    calc(50% + 26.753214px) 24.088702px, 
    calc(50% + 27.169545px) 23.618125px, 
    calc(50% + 27.5776px) 23.140354px, 
    calc(50% + 27.977255px) 22.655534px, 
    calc(50% + 28.368387px) 22.163813px, 
    calc(50% + 28.750878px) 21.665341px, 
    calc(50% + 29.124612px) 21.160269px, 
    calc(50% + 29.489474px) 20.648752px, 
    calc(50% + 29.845353px) 20.130945px, 
    calc(50% + 30.19214px) 19.607005px, 
    calc(50% + 30.529731px) 19.077094px, 
    calc(50% + 30.858023px) 18.541371px, 
    calc(50% + 31.176915px) 18px, 
    calc(50% + 31.486309px) 17.453146px, 
    calc(50% + 31.786113px) 16.900976px, 
    calc(50% + 32.076235px) 16.343658px, 
    calc(50% + 32.356586px) 15.781361px, 
    calc(50% + 32.62708px) 15.214257px, 
    calc(50% + 32.887636px) 14.642519px, 
    calc(50% + 33.138175px) 14.066321px, 
    calc(50% + 33.378619px) 13.485837px, 
    calc(50% + 33.608895px) 12.901246px, 
    calc(50% + 33.828934px) 12.312725px, 
    calc(50% + 34.038669px) 11.720454px, 
    calc(50% + 34.238035px) 11.124612px, 
    calc(50% + 34.426971px) 10.525381px, 
    calc(50% + 34.605421px) 9.922945px, 
    calc(50% + 34.77333px) 9.317486px, 
    calc(50% + 34.930646px) 8.709188px, 
    calc(50% + 35.077322px) 8.098238px, 
    calc(50% + 35.213314px) 7.484821px, 
    calc(50% + 35.338579px) 6.869124px, 
    calc(50% + 35.453079px) 6.251334px, 
    calc(50% + 35.55678px) 5.631641px, 
    calc(50% + 35.64965px) 5.010232px, 
    calc(50% + 35.731661px) 4.387296px, 
    calc(50% + 35.802788px) 3.763025px, 
    calc(50% + 35.863009px) 3.137607px, 
    calc(50% + 35.912306px) 2.511233px, 
    calc(50% + 36.462997px) 1.884094px, 
    calc(50% + 36.975331px) 1.256382px, 
    calc(50% + 37.487665px) 0.628287px, 
    calc(50% + 38px) 0, 
    100% 0, 
    100% 100%, 
    0 100%);
}

<div class="bar"></div>

SVG clip path

I can't think of a way to get this to work without having to modify the path with javascript. It does however let you create any shape you like.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  overflow: hidden;
  clip-path: url(#circle);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="circle">
      <path d="M0,64 v-64 h100 a32,32 0,0,0 64,0 h100 v64 z" />
    </clipPath>
  </defs>
</svg>

<div class="bar"></div>

Presentable

Thanks you pointed me in the right direction there ! I finally used your first solution for the moment as the material specs are unclear about the rounded edges. – Snowdrift

James, thanks for these pointers! I used clip-path method and put the FAB button off on the right with other icon action on the bottom app bar, see biblescout.app/#!/law-and-prophets . – Derzon

Answer 2

Many possebilities, but here is a simple exmaple:

$size: 45px;

div {
  background: #550000;
  float:left;
}

.bottom {
  height: 45px;
  width: 45px * 2;
}
.left, .right{
  height: 45px * 1.5;
  width: 45px * 2;
}  
.bottom {
  background: #fff;
  border-bottom-left-radius: 45px * 2;
  border-bottom-right-radius: 45px * 2;
}
.top {
  height: 45px*1.28;
  margin-top: 20px;
}
.left {
  border-top-right-radius: 20px;
  margin-top: 10px;
}
.right {
  border-top-left-radius: 20px;
  margin-top: 10px;
}

html:

<div class="left"></div>
<div class="top"><div class="bottom"></div></div>
<div class="right"></div>

https://codepen.io/anon/pen/YMZwBM

Jeanette

if that is a requirement then using and svg/polygon or image for background is probably the way to go. – Jeanette