带有5.0 FAB阴影的圆形按钮

Question

我想要一个带阴影的圆形按钮。暗影必须像FAB一样。目前我正在使用png来实现按钮。

http://i62.tinypic.com/vh6fzb.jpg

但是当我使用这个图像时，我无法给出正确的按下状态变化。 有没有办法通过使用xml

来实现这一点

Answer 1

您可以尝试

<?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

以下代码将有助于设计不同的大小和形状或者在android中使用以下代码

的创造性控件

<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

首先，在布局文件夹中创建文件名round_shape.xml，内容为

<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>

然后在您的activity_main.xml（您要放置按钮的位置）添加代码

<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

在drawable文件夹

下创建circle.xml

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

将其设置为布局或视图的背景。然后将elevation属性分配给您的视图。这会让你看到它的影子。

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

Answer 5

在视图布局中固定大小，例如：如果您将其用于linearlayout背景设置，请说height = 100sp和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>