4

I am using the new Bottom App Bar from the Material Design Components. I am trying to give shadow at the top of the Bottom App Bar like the one in Google Tasks app as shown below.

enter image description here

I have tried using both android:elevation and app:elevation attribute. Please help.

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
Mehul Kanzariya
  • 888
  • 3
  • 27
  • 58
  • Here is your solution: https://stackoverflow.com/a/32397225/4255978 – HedeH Jul 19 '18 at 09:53
  • showing shadow on the top breaks the material guidelines. You can not have shadow in both positive and negative Y direction. (The shadow direction for "Add a new task" button and action button are in opposite direction). You should avoid it. – Rahul Jul 19 '18 at 10:31
  • @RahulKumar This screenshot shown in the question is of the Tasks app by Google. – Mehul Kanzariya Jul 20 '18 at 07:28
  • @Mehul they are known for breaking their own guidelines. So what can I say. – Rahul Jul 20 '18 at 07:31
  • 2
    @RahulKumar But if you are going to use Bottom App Bar having white color as background then you will have to add shadow as it won't be recognizable. I tried doing it. – Mehul Kanzariya Jul 20 '18 at 12:05

2 Answers2

6

I ended up using this solution.

Step 1 Create a shape_drawable.xml file in the drawable folder as shown below:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#1F000000"
    android:endColor="@android:color/transparent"
    android:angle="90" />    
</shape>

Step 2 Create a View, set the shape_drawable.xml as its background and then place the view just above the BottomAppBar.

<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="@id/bottom_bar"
android:background="@drawable/shape_drawable"/>
Fabio
  • 593
  • 3
  • 14
Mehul Kanzariya
  • 888
  • 3
  • 27
  • 58
2

Elevation has been fixed in the Android material components 1.1.0 (alpha) release according to this commit.

Edit

for those wondering, this is how you add the new dependency:

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha02'
    // ...
}

More information about getting started can be found here and info about releases can be found here.

Cheers!

J-me
  • 424
  • 4
  • 13