background

Buttons should be one of the most common components in our App, especially in common use.

Usually the way we write a button is very simple and fixed. It can be roughly divided into the following steps:

  1. Write a Textview in the xml layout according to the size and location of the design draft

  2. Create a shape file in the drawable directory according to the color and roundness specified in the design draft

  3. Use this shape file as the background for Textview

Such a standard button was born, and then we can continue to develop happily. It's no problem. It's a lot more advanced than letting the UI paper cut. But as the development goes on, you will find that there are many ideas about the UI paper. Different interfaces have buttons with different rounded corners and different background colors. At this time, you need to go through the above three steps N times.

Finally, you will find that there are various button background resources in your drawable directory, which are difficult to manage. Especially if some buttons require a little click effect, you need to use selector. At this time, three files may be generated to meet the requirements, so it is always tedious.

idea

Based on the above reasons and the popularity of buttons, it is necessary to write a button which is simple to use and can meet the daily needs. Let's sort out the effect of pushing the button first.

  1. Easy to use (that is, you can use properties to set buttons)

  2. Can support setting button text, button text color, button text size

  3. It can support uniform setting of rounded corners, or it can set the size of each rounded corner of the button separately.

  4. Can support setting button background color

  5. Can support selector

  6. Can support circular buttons

  7. It can support gradient button, and it can support setting gradient in all directions.

  8. You can support buttons with borders, and you can set the color and width of borders.

  9. Can support setting button clickable or not

  10. Buttons with icons can be set to support customized button size, and automatic zooming. Icons can be set in four directions around the text to support customized text distance from icons.

Introduce

implementation 'top.androidman:superbutton:1.0.1'

Achieving results

0x1 Basic Use Code Interpretation

Effect

Code

<top.androidman.SuperButton
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_margin="20dp"
        app:color_normal="@color/color_accent"
        app:corner="10dp"
        app:text="@string/poetry_1"
        app:textColor="@color/color_white"
        app:textSize="22sp" />

Attribute Interpretation

  • Button text
    app:text = "bright moonlight in front of bed"

  • Button text color
    app:textColor="@color/color_white"

  • Button text size
    app:textSize="22sp"

  • Button Background Color
    app:color_normal="@color/color_accent"

0x2 Sets each corner individually

Effect

Code

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_normal="@color/color_6596ff"
    app:corner="40dp"
    app:corner_left_bottom="0dp"
    app:text="Set the bottom left corner to 0 separately dp"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • Set the lower left angle separately
    app:corner_left_bottom="0dp"

  • Set the top left angle separately
    app:corner_left_top="5dp"

  • Set the top right angle separately
    app:corner_right_top="22dp"

  • Set the lower right angle separately
    app:corner_right_bottom="0dp"

  • The rounded angle of the four corners of the button
    app:corner="10dp"

Note: Angle setting alone overrides the corner property

0x3 Selector

Effect

Code

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:color_normal="@color/color_accent"
    app:color_pressed="@color/color_ffB419"
    app:corner="10dp"
    app:text="Click will change color oh"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • When the button is pressed, the set color effect is displayed.
    app:color_normal="@color/color_accent"

0x4 circular button

Effect

Code

 <top.androidman.SuperButton
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:color_normal="@color/color_accent"
    app:drawable_middle="@mipmap/icon_like"
    app:drawable_middle_height="50dp"
    app:drawable_middle_width="50dp"
    app:shape="CIRCLE" />

Attribute Interpretation

  • Only icons and no text on the button
    app:drawable_middle="@mipmap/icon_like"

  • Button icon height
    app:drawable_middle_height="50dp"

  • Button icon width
    app:drawable_middle_width="50dp"

Note: When this property is set, the relevant properties of the text will be invalid

Button for 0x5 Gradient Background

Effect

Code

<top.androidman.superbutton.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_direction="RIGHT_LEFT"
    app:color_end="@color/color_14c7de"
    app:color_start="@color/color_red"
    app:corner="20dp"
    app:text="Gradient from right to left"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • Beginning colour
    app:color_start="@color/color_14c7de"

  • End color
    app:color_end="@color/color_red"

  • Color Gradient Direction
    app:color_direction="RIGHT_LEFT"

  • TOP_BOTTOM from top to bottom
  • BOTTOM_TOP from bottom to top
  • LEFT_RIGHT from left to right
  • RIGHT_LEFT from right to left
  • TR_BL from top right to bottom left
  • BL_TR from bottom left to top right
  • BR_TL from bottom right to top left
  • TL_BR from top left to bottom right

Note: When setting the color gradient, the color_normal, color_pressed settings will fail

0x6 Bordered Button

Effect

Code

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:border_color="@color/color_red"
    app:border_width="2dp"
    app:color_normal="@color/color_accent"
    app:corner="10dp"
    app:text="@string/poetry_1"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • Border width
    app:border_width="2dp"

  • Border color
    app:border_color="@color/color_red"

0x7 button is not clickable

Effect

Code

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:button_click_able="false"
    app:color_normal="@color/color_accent"
    app:corner="10dp"
    app:singleLine="false"
    app:text="app:button_click_able=false\n Code settings are also available"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • Whether the button can be clicked, default is true can be clicked
    app:button_click_able="false"

  • Whether the button text is single-line, default is true single-line
    app:singleLine="false"

Note: Button provides methods to control click events. Please refer to Advanced Use of the related methods.

0x8 Button with Icon

Effect

Code

<top.androidman.superbutton.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_normal="@color/color_red"
    app:corner="20dp"
    app:drawable_padding="20dp"
    app:drawable_right="@mipmap/icon_like"
    app:text="The icon is on the right."
    app:textColor="@color/color_white"
    app:textSize="22sp" />

Attribute Interpretation

  • Icons on the right side of the text
    app:drawable_right="@mipmap/icon_like"

  • Icons on the left of the text
    app:drawable_left="@mipmap/icon_like"

  • Icon on top of text
    app:drawable_top="@mipmap/icon_like"

  • The icon is below the text.
    app:drawable_bottom="@mipmap/icon_like"

  • Icon Distance from Text
    app:drawable_padding="20dp"

  • Scale icons by text size, default to true, and display the original icon size when false
    app:drawable_auto="true"

All properties supported by buttons

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SuperButton">
        <!--Default configuration-->
        <attr name="text" format="reference|string" />
        <!--Button text color-->
        <attr name="textColor" format="reference|color" />
        <!--Button text size-->
        <attr name="textSize" format="dimension" />
        <!--Whether the text is single-line, default single-line-->
        <attr name="singleLine" format="boolean" />

        <!--Default background color-->
        <attr name="color_normal" format="reference|color" />
        <!--Background color when pressing-->
        <attr name="color_pressed" format="reference|color" />

        <!--The picture is on the left of the text.-->
        <attr name="drawable_left" format="reference|color" />
        <!--The picture is on the right of the text.-->
        <attr name="drawable_right" format="reference|color" />
        <!--The picture is above the text.-->
        <attr name="drawable_top" format="reference|color" />
        <!--The picture is below the text.-->
        <attr name="drawable_bottom" format="reference|color" />
        <!--Distance between picture and text-->
        <attr name="drawable_padding" format="dimension" />
        <!--Icon automatically scales icons according to text size-->
        <attr name="drawable_auto" format="boolean" />

        <!--Picture only,At this point, the text is ignored, even if the settings are set-->
        <attr name="drawable_middle" format="reference|color" />
        <!--Picture width in the middle-->
        <attr name="drawable_middle_width" format="dimension" />
        <!--Picture height in the middle-->
        <attr name="drawable_middle_height" format="dimension" />

        <!--shape-->
        <attr name="shape" format="enum">
            <!--circular-->
            <enum name="CIRCLE" value="1" />
            <!--rectangle-->
            <enum name="RECT" value="2" />
        </attr>

        <!--Settings when the button background is gradient-->
        <!--Beginning colour-->
        <attr name="color_start" format="color" />
        <!--End color-->
        <attr name="color_end" format="color" />
        <!--Color Direction-->
        <attr name="color_direction" format="enum">
            <!--From top to bottom-->
            <enum name="TOP_BOTTOM" value="0x1" />
            <!--From top right to bottom left-->
            <enum name="TR_BL" value="0x2" />
            <!--From right to left-->
            <enum name="RIGHT_LEFT" value="0x3" />
            <!--From lower right to upper left-->
            <enum name="BR_TL" value="0x4" />
            <!--From bottom to top-->
            <enum name="BOTTOM_TOP" value="0x5" />
            <!--From lower left to upper right-->
            <enum name="BL_TR" value="0x6" />
            <!--From left to right-->
            <enum name="LEFT_RIGHT" value="0x7" />
            <!--From top left to bottom right-->
            <enum name="TL_BR" value="0x8" />
        </attr>

        <!--Button rounded corners, if set separately, will override this setting-->
        <attr name="corner" format="dimension" />
        <!--Upper left corner radius-->
        <attr name="corner_left_top" format="dimension" />
        <!--Radius of lower left corner-->
        <attr name="corner_left_bottom" format="dimension" />
        <!--Right upper corner radius-->
        <attr name="corner_right_top" format="dimension" />
        <!--Right lower corner radius-->
        <attr name="corner_right_bottom" format="dimension" />

        <!--Border width-->
        <attr name="border_width" format="dimension" />
        <!--Border color-->
        <attr name="border_color" format="color" />
        <!--Whether the button can be clicked-->
        <attr name="button_click_able" format="boolean" />

    </declare-styleable>
</resources>

Advanced Applications

1. To modify the button, call the following methods:

 /**
     * Modify text
     */
    superButton.setText(CharSequence text);

    /**
     * Modify text color
     */
    superButton.setTextColor(@ColorInt int textColor);

    /**
     * Modify button background color
     */
    superButton.setColorNormal(@ColorInt int colorNormal);

When code control is needed in some states, the button is ashed and can not be clicked. The following method can be directly invoked:

 /**
     * When this method is called, the color of the button is changed and the button cannot be clicked.
     */
    superButton.setUnableColor(@ColorInt int color);

If you just want to set the button to be non-clickable and do not need to change the button color, you can use the following method

/**
     * Set whether the button can be clicked
     */
    superButton.setButtonClickable(boolean buttonClickable);