android floating action button like shadow on pre lollipop devices

Question

I m trying to make a floating action button on pre lollipop devices. I have managed to make a decent button but it doesn't look good without any shadow. enter image description here

here is the circle.xml file

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <layer-list>

            <item>

                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

                    <solid android:color="#ffffffff" />

                    <size android:width="40dp" android:height="40dp" />
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

and the imagebutton

 <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:src="@drawable/ic_search"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:padding="10dp"
        android:layout_margin="16dp"
        />

How do I add shadow to it to make it look like material design floating action button ?

you can use custom libraries... https://github.com/futuresimple/android-floating-action-button these floating buttons have shadows and many other interesting attributes — Hirak Chhatbar, Dec 30 '14 at 20:21
yeah have seen that , but I just require one button with shadow. — Vihaan Verma, Dec 30 '14 at 20:26
that will become too complicated. u will have to do stuff with drawable.... like this http://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-button — Hirak Chhatbar, Dec 30 '14 at 20:28
u can also try android:elevation attribute in xml file for your button.... — Hirak Chhatbar, Dec 30 '14 at 20:29
Or I can just set a round drawable as the source of the image button . That would work — Vihaan Verma, Dec 30 '14 at 20:33

score 1 · Answer 1 · answered Sep 26 '15 at 03:38

Use this as circle.xml instead.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>

    </layer-list>
</item>

<item>
    <shape android:shape="oval">
        <solid android:color="@color/ColorPrimary" />
    </shape>
</item>

</layer-list>

Source: http://www.android4devs.com/2015/03/how-to-make-floating-action-button-fab.html

android floating action button like shadow on pre lollipop devices

1 Answers1