1

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:

enter image description here

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?

2 Answers 2

0

From here what worked for me was:

<ImageButton
  android:clipToPadding="false"
  android:outlineProvider="bounds"
  android:elevation="2dp" />
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.

3
  • The shadow doesn't really look like the one on Google's button. The shadow needs to be softer.
    – szymciolop
    Oct 16, 2015 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 Oct 16, 2015 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, 2015 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.