简体   繁体   中英

Android round button with shadow

I am new to android I have a button in my app:

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

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

The problem is I want it to have shadow so the button seems higher than other elements. Can anybody help please?

round.xml

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

    <gradient
        android:angle="90"
        android:endColor="@color/lgt_button"
        android:startColor="@color/drk_button" />

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

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

shadow.xml

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

    <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:bottom="4px"
        android:drawable="@drawable/round" />
</layer-list>

set button background

android:background="@drawable/buttonbordershadow"

Source: Rounded button with shadow in Android

just add material library :

implementation 'com.google.android.material:material:1.2.0-alpha03'

and use 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
/>

For API>=21 you can use 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);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM