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?

score 0 · Answer 1 · edited Sep 23 '19 at 08:39

0

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.

edited Sep 23 '19 at 08:39

Till Glöckner

37
8

answered Oct 16 '15 at 10:55

Narendra Kumar

551
5
16

The shadow doesn't really look like the one on Google's button. The shadow needs to be softer. – szymciolop Oct 16 '15 at 13:01
i just given a solution.. u want to change color,padding and radius as u need.......... if answer is useful upvote it – Narendra Kumar Oct 16 '15 at 13:04
I understand that. But my point is that the shadow of the location button is not a solid color, well, it's a shadow – and I have no idea how to achieve that effect. – szymciolop Oct 16 '15 at 14:31

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

From here what worked for me was:

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

edited May 23 '17 at 12:08

Community

1
1

answered Jun 12 '16 at 22:39

Christian

305
1
4
13

Android – MapFragment overlay button shadow, just like MyLocation button

2 Answers2