带阴影的圆形按钮，如 5.0 FAB

Question

I want a button in circular shape with shadow. Shadow must be like FAB. Currently I'm using a png to implement the button.

But when I use this image I can't give correct pressed state changes. Is there any way to impleament this by using xml

Answer 1

you can try it

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Drop Shadow Stack --> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#00CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#10CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#20CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#30CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#50CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <!-- Background --> <item> <shape android:shape="oval"> <solid android:color="@android:color/white" /> <corners android:radius="3dp" /> </shape> </item> </layer-list>

 <Button android:id="@+id/btn" android:layout_width="80dp" android:layout_height="80dp" android:layout_centerInParent="true" android:background="@drawable/shadow_circle" android:text="0" android:textColor="#fff" />

Answer 2

Following code will help to design different size and shape or colorfull control in android used following code

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >       <corners android:radius="14dp"/>
        <gradient android:angle="45"
            android:centerX="35%"
            android:centerColor="#7995A8"
            android:startColor="#E8E8E8"
            android:endColor="#000000"
            android:type="linear"/>
        <padding android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp"/>
        <size android:width="270dp"
        android:height="60dp"
        />
        <stroke
        android:width="3dp"
        android:color="#878787"
        />

Answer 3

First, you create a file name round_shape.xml in layout folder with content as

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size android:width="100dp"
                android:height="100dp"/>
            <solid android:color="#59d5fe"/>
        </shape>
    </item>
</selector>

Then in your activity_main.xml (where you want to put the button) adds the code

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@layout/round_shape"
    android:textColor="#f8fdf9" />

Answer 4

Create circle.xml under drawable folder

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#03ae3c"/>
</shape> 

set this as background for layout or view. then assign elevation attribute to your view. that will give you visual appearance of its shadow.

<LinearLayout
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:background="@drawable/circle"
            android:elevation="14dp"
            android:orientation="vertical"/>

Answer 5

Fix size in view layout ex: if you are using this for linearlayout background set say height = 100sp and widht = 100sp

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Drop Shadow Stack --> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#00CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#10CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#20CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#30CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <item> <shape android:shape="oval"> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#50CCCCCC" /> <corners android:radius="3dp" /> </shape> </item> <!-- Background --> <item> <shape android:shape="oval"> <solid android:color="@android:color/white" /> <corners android:radius="3dp" /> </shape> </item> </layer-list>