带有阴影的Android圆形按钮

时间:2016-07-24 06:39:44

标签: android material-design

我是Android新手我在我的应用程序中有一个按钮:

<Button android:elevation="10dp"
        android:id="@+id/btnAddJob"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/round_btn"
        android:drawableLeft="@drawable/plus"
        android:paddingLeft="9dp"
        android:gravity="center"
        android:layout_marginLeft="300dp" />

和round_btn:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval" android:thickness="24dp" >
        <stroke android:color="@color/colorText" android:width="24dp" />
        <solid android:color="@color/colorText"/>
        <size android:width="150dp" android:height="150dp"/>
    </shape>
</item>

问题是我希望它有阴影所以按钮看起来比其他元素高。有人可以帮忙吗?

3 个答案:

答案 0 :(得分:6)

round.xml

    <shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android"> 
       <gradient
         android:startColor="@color/drk_button"
         android:endColor="@color/lgt_button"
         android:angle="90">
       </gradient>

       <corners android:radius="20dip" />

       <stroke
         android:width="1px"
         android:color="@color/drk_button" />
    </shape>

shadow.xml

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

         <solid android:color="@color/black_alpha"/>
         <corners android:radius="20dip"/>

    </shape>

buttonbordershadow.xml

    <layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

       <item android:drawable="@drawable/shadow"/>
       <item
         android:drawable="@drawable/round"
         android:bottom="4px" />  

    </layer-list>

设置按钮背景

android:background="@drawable/buttonbordershadow"

来源:Rounded button with shadow in Android

答案 1 :(得分:0)

对于API&gt; = 21,您可以使用ViewOutlineProvider

public class CustomViewOutlineProvider extends ViewOutlineProvider {
    int roundCorner;

    public CustomViewOutlineProvider(int round) {
        roundCorner = round;
    }

    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), roundCorner);
    }
}

UI

    TextView textView = (TextView) findViewById(R.id.shadow_txt);
    textView.setOutlineProvider(new CustomViewOutlineProvider(30));
    textView.setClipToOutline(true);

答案 2 :(得分:0)

只需添加材料库:

实现'com.google.android.material:material:1.2.0-alpha03'

并使用 MaterialButton

 <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold"
        app:cornerRadius="20dp" //you can set radius easily
/>