How to add only bottom shadow for buttons

Issue

I have three buttons that are stretched to the whole window. For all this buttons I need to add shadow for the bottom only.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 <LinearLayout
     android:id="@+id/buttons_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     >

    <ImageButton
        android:id="@+id/gath"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_gath"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
        />

    <ImageButton
        android:id="@+id/foll"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_foll"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
         />

    <ImageButton
        android:id="@+id/del"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_del"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
        />
 </LinearLayout>
</RelativeLayout>

I created the layer-list divide in two parts: 1) The main background color of the button and 2) the gradient

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
          <solid android:color="@color/colorPrimary"/>
          <size android:height="30dp"/>
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#0000"
            android:endColor="#9444"
            android:type="linear"
            android:angle="90">
        </gradient>
        <size android:height="5dp"/>
    </shape>
</item>
</layer-list>

Now i see only colorPrimary (main background color) and nothing else. I was trying to use elevation but can't delete right and left side shadow.

Thank you Jenever. He found the perfect solution. I found a similar solution:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="30dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#0000"
                android:endColor="#9444"
                android:type="linear"
                android:angle="90">
            </gradient>
        </shape>

    </item>
        <item
            android:left="0dp"
            android:right="0dp"
            android:top="0dp"
            android:bottom="5dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorAccent"/>
            </shape>
        </item>
</layer-list> 

Solution

I think the easiest for you would be to change your button_shadow.xml to something like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <size android:height="30dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item android:top="30dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <size android:height="5dp" />
            <solid android:color="#FF000000" />
            <gradient
                android:angle="90"
                android:endColor="#FF888888"
                android:startColor="#FF000000"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

You can play around with the gradient start and end color. If your ImageButton is set to a total height of 35dp and the android:top in button_shadow.xml is set to 30dp, it will be shown for a total height of 5dp. Depending on the start and end color you can make it look like the shadow starts a little under the button, or sticks to it.

On my virtual device it looks like this now:

Answered By - Jenever