Still using shape and selector, try custom fillet components

In the process of developing Android applications, designers often round corners of the cards and buttons involved in the application. For cards, we can directly use CardView, etc. For rounded buttons, we usually configure them in the form of shape, selector, and other xml.

Although the xml writing method of shape and selector can solve the visual problem, the writing a lot, it does greatly reduce the conciseness of the code, and xml is not very friendly to the size of the Apk package. Therefore, we might consider trying a custom rounded corner component to solve the problem.

Based on some commonly used attributes of buttons, we provide the following attributes, such as the rounded corner size, rounded corner color, button color, text color, and the rounded corner size of 4 corners separately.

<declare-styleable name="RectgleTextView">
        <attr name="shapeType" format="integer|enum">
            <enum name="rectangle" value="0" />
            <enum name="oval" value="1" />
            <enum name="LINE" value="2" />
        </attr>
        <attr name="totalRadius" format="dimension" />
        <attr name="radiusTopLeft" format="dimension" />
        <attr name="radiusBottomLeft" format="dimension" />
        <attr name="radiusTopRight" format="dimension" />
        <attr name="radiusBottomRight" format="dimension" />
        <attr name="topLeft" format="dimension" />
        <attr name="topRight" format="dimension" />
        <attr name="bottomLeft" format="dimension" />
        <attr name="bottomRight" format="dimension" />
        <attr name="strColor" format="color" />
        <attr name="strWidth" format="dimension" />
        <attr name="solidBac" format="color" />
        <attr name="textPadding" format="dimension" />
        <attr name="textLeft" format="string" />
        <attr name="textRight" format="string" />
        <attr name="iconColor" format="reference|color" />
        <attr name="textLeftColor" format="reference|color" />
        <attr name="textRightColor" format="reference|color" />
        <attr name="textLeftSize" format="dimension" />
        <attr name="textRightSize" format="dimension" />
        <attr name="textLeftStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="textRightStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="textCenterStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="autoMaxHeight" format="boolean" />
        <attr name="gradientOrientation">
            <enum name="top_bottom" value="0" />
            <enum name="tp_bl" value="1" />
            <enum name="right_left" value="2" />
            <enum name="br_tl" value="3" />
            <enum name="bottom_top" value="4" />
            <enum name="bl_tr" value="5" />
            <enum name="left_right" value="6" />
            <enum name="tl_br" value="7" />
        </attr>
        <attr name="startSolid" format="reference|color" />
        <attr name="centerSolid" format="reference|color" />
        <attr name="endSolid" format="reference|color" />
    </declare-styleable>

Then, we create a custom View, RectgleTextView inherits from AppCompatTextView. Then, it is to process our custom attributes, and we will not explain the details. You can see the source code at the end of the article. Finally, we only need to introduce our custom components in the layout, such as.

<com.avatar.demo.shape.RectgleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_gravity="center"
        android:paddingHorizontal="15dp"
        android:paddingVertical="8dp"
        android:text="实心圆角按钮"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:solidBac="@color/black"
        app:totalRadius="5dp" />

The following are some renderings.

Attachment: custom round corner component