Introduction to the ShapeDrawable application (I)

In Android, many times the format of the system's native controls does not meet our needs. We want better styles, such as rounded rectangle and color gradient, shadow effect, etc. This is the time when our ShapeDrawable works out. Let's take a look at some applications of Shape in these two articles and master some basic knowledge, in order to better apply it.

In fact, it is not difficult for us to understand a lot of things, but the key is to understand the summary, right.

1) first, we need to create an xml file in the res/drawable/path. The format is as follows (this is taken out in the official Android documentation. I think it is really full and clear at a glance):

<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape=["rectangle" | "oval" | "line" | "ring"] >    <corners        android:radius="integer"        android:topLeftRadius="integer"        android:topRightRadius="integer"        android:bottomLeftRadius="integer"        android:bottomRightRadius="integer" />    <gradient        android:angle="integer"        android:centerX="integer"        android:centerY="integer"        android:centerColor="integer"        android:endColor="color"        android:gradientRadius="integer"        android:startColor="color"        android:type=["linear" | "radial" | "sweep"]        android:useLevel=["true" | "false"] />    <padding        android:left="integer"        android:top="integer"        android:right="integer"        android:bottom="integer" />    <size        android:width="integer"        android:height="integer" />    <solid        android:color="color" />    <stroke        android:width="integer"        android:color="color"        android:dashWidth="integer"        android:dashGap="integer" /></shape>

Shape is the root element. Its android: shape attribute defines the shape defined in this xml file, which can be retangle, oval, line, and ring. Next, let's repeat these elements one by one based on the Code and actual results. Corners <corners> indicates the four corners of a rectangle. It can only be used in android: shape = "rectangle". Generally, it is used to achieve the effect of a rounded rectangle, it has only five child elements, as shown below:

<corners        android:radius="integer"        android:topLeftRadius="integer"        android:topRightRadius="integer"        android:bottomLeftRadius="integer"        android:bottomRightRadius="integer" />

Generally, how to apply it? 1) create a shape file, such as res/drawable/corners. xml:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">        <corners android:radius="15dp"/></shape>

2) when defining a button in xml, set android: background to the above corners file, as shown below:

    <Button        android:layout_margin="5dp"        android:layout_width="200dp"        android:layout_height="50dp"        android:background="@drawable/corners"        android:text="Corner" />

3) Then we can, but I have defined several more styles here. You can look at them and compare them as follows:
Why is it all black ??? Oh !!! In fact, it is because the font on the button is black by default, so it is invisible. Now, let's talk about the solid attribute. Solid (fill) Solid has only one attribute, that is, the fill color, as follows:

<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">        <corners android:radius="15dp"/>    <solid android:color="#716283"/></shape>

Okay. Now we have changed the fill color. Don't use black. Let's take a look at the effect.
By the way, we can see the black font on the button and the rounded corner. Here: 1) Corner button:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">        <corners android:radius="15dp"/>    <solid android:color="#716283"/></shape>

We can see that all four corners have been rounded, indicating that the android: radius attribute works for all four corners. 2) TopLeft, TopRight, BottomLeft, and BottomRight buttons

<corners android:topLeftRadius="15dp"/>

If you only define topLeftRadius, only the top left corner will be rounded. Similarly, topRightRadius will only change the top right corner. For BottomLeftRadius, question ??? No, why is it the opposite ???? That's right !!!! This is actually the opposite... I don't know why it is like this. Anyway, BottomLeft changes the bottom right corner, and BottomRight changes the bottom left corner. Remember this. 3) What if we define both radius and topLeftRadius?

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">    <corners        android:radius="10dp"         android:topLeftRadius="15dp"        android:bottomRightRadius="15dp"/>    <solid android:color="#716283"/></shape>

Then we can see that the 10dp defined by radius is still 10dp, while the topLeftRadius and bottomRightRadius will overwrite the 10dp defined by radius. Now, we have read corners and radius. Let's look at padding. PaddingPadding supports four attributes: left, right, top, and bottom.

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">    <corners android:topLeftRadius="15dp"/>    <solid android:color="#716283"/>    <padding android:left="30dp"/></shape>

Add the padding effect based on the original one. Let's take a look.
Obviously, we can see that the text on the button is much more space than the other padding buttons, which is just as effective as the padding we usually know.
Let's talk about gradient (gradient) in the next article. Introduction to ShapeDrawable (medium) Gradient