Android – MapFragment overlay button shadow, just like MyLocation button

Question

I'm struggling to add a shadow to my custom overlay button over the google map. My goal is to make my custom button look just like Google's MyLocation button. Here's how my app looks like now:

layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    style="@style/AppTheme">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map"
        tools:context=".MapsActivity"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true" />


    <ImageButton
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_search_black_24dp"
        android:tint="@color/icon_gray"
        android:onClick="searchButtonClicked"
        android:background="@drawable/mapbutton"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.quinny898.library.persistentsearch.SearchBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/searchbox"
            />

    </LinearLayout>

</RelativeLayout>

mapbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <solid android:color="#55FFFFFF" />
        </shape>
    </item>
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <solid android:color="#ccb3b3b3" />
        </shape>
    </item>
    <item
        android:state_focused="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <solid android:color="#A9FFFFFF" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <solid android:color="#baffffff" />
        </shape>
    </item>
</selector>

I have already tried changing the android:elevation value on the ImageButton. Unfortunately, adding elevation value doesn't seem to add a shadow to the button. Is there a way to add a shadow to my mapbutton drawable?

Answer 1

Try this code

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp"/>
<solid android:color="#D6D6D6"/>
</shape>
</item>
<item android:bottom="2dp" android:right="2dp">
<shape>
<gradient android:angle="270" android:endColor="#DC5F0A" android:startColor="#E68F54"/>
<!--
 <stroke android:width="1dp" android:color="#BABABA" /> 
-->
<corners android:radius="4dp"/>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>

I hope it will.

Answer 2

From here what worked for me was:

<ImageButton
  android:clipToPadding="false"
  android:outlineProvider="bounds"
  android:elevation="2dp" />