Custom shape to achieve Button and Textview fillet, stroke, color gradient effect

shape effect customization is very important, but it's not often used and easy to forget, so it's convenient to take notes here when you need to, just because I don't like to memorize code, just like to live learning! Ha-ha
The implementation effect is as shown in the button style in the figure below, with border stroke, intermediate background color transition gradient, and four fillet effects:

The implementation is very simple. It only needs two steps:
Step 1: create a BTN ﹣ custom ﹣ BG ﹣ shape.xml file in the drawable directory under the res directory, and write the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--Stroke-->
    <stroke
        android:width="2dp"
        android:color="#ffffff"
        />
    <!--Fillet degree-->
    <corners android:radius="145dp"/>
    <!--Color fill, you can set the start and end color gradient effects-->
    <gradient android:startColor="#541298"
        android:endColor="#541298"/>

</shape>

Step 2: introduce the shape file as the background property value in the control that you want to have this effect. layout and button, textview can do this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        ...

         <Button
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_35"
                    android:layout_marginLeft="@dimen/dp_42"
                    android:layout_marginRight="@dimen/dp_42"
                    android:textSize="@dimen/sp_17"
                    android:layout_marginTop="@dimen/dp_11"
                    android:layout_marginBottom="@dimen/dp_11"
                    android:background="@drawable/btn_custom_bg_shape"
                    android:textColor="@color/white"
                    android:text="CHECK COMPATIBILITY"/>

        ...

    </LinearLayout>

Here we basically achieve the desired custom shape to achieve the fillet, stroke, color gradient display effect of the control!

Tags: Android xml encoding

Posted on Fri, 10 Jan 2020 10:46:24 -0800 by csousley