Use of advantage

1. Quick implementation of some basic shapes (lines, rectangles, circles, ellipses, rings)
2. Quickly implement rounded corners, gradients, shadows, etc
3. Instead of setting the image as the background of the View
4. It can reduce the SIZE of APK and increase the willingness of users to download
5. You can also reduce your memory footprint
6. Easy to modify and maintain

Results 1



Create shape.xml under Drawable

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:endColor="#DB7093"
        android:startColor="#FFB6C1" />
    <padding
        android:left="20dp"
        android:top="10dp"
        android:right="20dp"
        android:bottom="50dp" />
    <corners android:radius="5dp" />
</shape>
Copy the code

Use in layout

<EditText
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Code party late into the night."
        android:textColor="@android:color/white"
        android:background="@drawable/shape"/>
Copy the code

Results 2

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#6495ED" />
    <stroke
        android:width="2dp"
        android:color="#0000ff"
        android:dashWidth="1dp"
        android:dashGap="3dp" />
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
    <corners android:radius="5dp" />
</shape>
Copy the code

XML definition description given in official documentation

<? The 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>Copy the code

I’ll give you the perfect explanation

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] >... </shape>Copy the code

Shape shape, default is rectangle. Rectangle, oval, line, ring

When Android: Shape =”ring”, shape has the following properties available:

• Android: innerRadius size. The radius of the inner ring. A dimension value (DIP, etc.) or a dimension resource
• Android: The innerRadiusRatio Float type. This value represents the ratio of the inner ring, for example, if Android :innerRadiusRatio = “5 “, then the radius of the inner ring is equal to the width of the ring divided by 5. This value is overridden by Android :innerRadius. The default value is 9
• Android: thickness size. Ring thickness is a size value or size resource
• Android :thicknessRatio Float type. Ratio of thickness. For example, if Android :thicknessRatio= “2”, then the thickness equals the width of the ring divided by 2. This value is overridden by Android :innerRadius, and the default is 3
• Android :useLevel Boolean Type. True if used in LevelListDrawable. False if it does not normally occur

< corners android: the radius = "integer" / / Dimension. The radius of the rounded corner. Android :topRightRadius=" INTEGER "Android :topLeftRadius=" INTEGER" Android :bottomLeftRadius=" INTEGER" android:bottomRightRadius="integer" />Copy the code

represents the four corners of a rectangle, which can only be used when Android: Shape = “Rectangle”

<gradient Android: Angle ="integer"// integer Gradient Angle. 0 is from left to right. 90 is for bottom to top. It must be a multiple of 45. The default value is 0. Android :centerX="integer"//Float The relative X-coordinate of the center of the gradient, between 0 and 1.0. Android :centerY="integer"//Float The relative Y coordinate of the center of the gradient, between 0 and 1.0. Android :centerColor="integer"//Color Optional Color value. Android :gradientRadius=" INTEGER "//Float Radius of the gradient Only available on Android: Type ="radial". Android :startColor="color"// color startColor value. Android: type = "linear" | "radial" | "sweep"] / / the gradient pattern. Android: useLevel = [" true "|" false "] / > / / gradient mode. If you want to use the LevelListDrawable object, set it to true. Set to true with no gradient. False has gradientCopy the code

Android: Type indicates the mode of gradient. Optional parameters include:

• Linear gradient. This is also the default mode
• Radial gradient. StartColor is the color of the radiation center
• The sweep line changes gradually

< padding android: left = "integer" / / Dimension. Android :top="integer" Android :right="integer" Android :bottom="integer" />Copy the code

indicates the distance between the content and the view boundary

The < size android: width = "integer" / / Dimension. Shape height. Android: height = "integer" / > / / Dimension. Width of shape.Copy the code

represents the size of the Shape

< solid android: color = "color" / > / / color. A Color value, hexadecimal number, or a Color resourceCopy the code

represents the filling color of shape, which is the same as the gradient function of

except that it is filled with a solid color here. Therefore, in general, only one

and

should be used

< stroke android: width = "integer" / / Dimension. The thickness of strokes. Android: color = "color" / / color. Stroke color. Android: dashWidth = "integer" / / Dimension. The length of each line. This works only if Android :dashGap is also set. The style that represents the stroke is the width of the dotted line, and a value of 0 represents a solid line. Android :dashGap=" INTEGER "/>//Dimension. How far apart each line is drawn. This works only if Android :dashWidth is also set. When the stroke is dotted, the interval between dotted lines is - - - -.Copy the code

is used to represent shape’s border brush. This element must be set when Android: Shape =”line”

Practice a

Implement a custom numeric input keyboard with GradientDrawable. The circular numeric input button mimics the iPhone lock screen program. Under normal condition, it is a border, transparent ring in the middle, when pressed, the middle is filled with color

Create a normal keyboard style number_BUTTon_normal.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/transparent" />
    <stroke
        android:width="1dp"
        android:color="#df1ea353" />
</shape>
Copy the code

Create the keyboard style number_BUTTon_pressed. XML when pressed

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#1ea353" />
    <stroke
        android:width="1dp"
        android:color="#df1ea353" />
</shape>
Copy the code

So we have both the normal state and the pressed state, and we’re going to combine those two states by creating a selector, number_button_selector. XML

      
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/number_button_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/number_button_normal" />
</selector>
Copy the code

Button layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center_horizontal"
    android:gravity="center">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_1"
            android:text="1"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_2"
            android:text="2"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_3"
            android:text="3"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_4"
            android:text="4"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_5"
            android:text="5"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_6"
            android:text="6"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_7"
            android:text="Seven"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_8"
            android:text="8"/>
        <Button
            style="@style/number_button"
            android:id="@+id/nkb_9"
            android:text="9"/>
    </LinearLayout>
    <Button
        style="@style/number_button"
        android:id="@+id/nkb_0"
        android:text="0"/>
</LinearLayout>
Copy the code

Because there are 10 buttons, each of which has the same style, create a style for the button, using style=”@style/number_button” directly where you want to apply it. In the styles. In the XML

<style name="wrap_wrap"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style> <style name="number_button" parent="wrap_wrap"> <item name="android:background">@drawable/number_button_selector</item> <item name="android:textColor">#333333</item> <item name="android:textSize">30sp</item> <item name="android:minHeight">60dp</item> <item name="android:minWidth">60dp</item>  <item name="android:layout_marginLeft">8dp</item> <item name="android:layout_marginRight">8dp</item> <item name="android:layout_marginBottom">8dp</item> </style>Copy the code

rendering

Create GradientDrawable dynamically and use it

XML defined with shape tags is ultimately converted to GradientDrawable objects, not ShapeDrawable, not OvalShape, RoundRectShape, etc

Let’s switch to code to achieve the same effect as above, using a button as an example

<Button
        android:id="@+id/number_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="1"
        android:textColor="# 333"
        android:textSize="30sp"/>
Copy the code

The key code

if(android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
 {
    btn.setBackground(initStateListDrawable());
}else{
	btn.setBackgroundDrawable(initStateListDrawable());
}

private StateListDrawable initStateListDrawable(a){
        / / create the drawable
        GradientDrawable normalGb = new GradientDrawable();
        // Set the type
        normalGb.setShape(GradientDrawable.OVAL);
        // Fill the inner color
        normalGb.setColor(Color.TRANSPARENT);
        // Border parameters are I: border width, border color
        normalGb.setStroke(1,Color.parseColor("#df1ea353"));

        GradientDrawable pressedGb = new GradientDrawable();
        pressedGb.setShape(GradientDrawable.OVAL);
        pressedGb.setColor(Color.parseColor("#1ea353"));
        pressedGb.setStroke(1,Color.parseColor("#df1ea353"));

        StateListDrawable stalistDrawable = new StateListDrawable();
        int pressed = android.R.attr.state_pressed;
        stalistDrawable.addState(new int []{-pressed}, normalGb);
        stalistDrawable.addState(new int []{pressed}, pressedGb);
        stalistDrawable.addState(new int []{}, normalGb);
        return stalistDrawable;
    }
Copy the code

The effect



In addition, another method that is commonly used is

setCornerRadius(int px)
Copy the code

Used to set rounded corners, passed px, need to use the method to convert dp

GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GradientDrawable Android GRADIENT Shape Reduce memory good helper)

Tint can help us realize various color changes in a single image, that is to say, it is very easy to change the color of an icon, and also reduce the volume of our APK (we need multiple pictures originally, but now maybe only one is enough).

Tint effect:

XML implementation:

    <ImageView
        android:id="@+id/enable_cart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/btn_cart_list"/>

    <ImageView
        android:id="@+id/disable_cart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/btn_cart_list"
        android:tint="#cccccc"/>
Copy the code

Code implementation:

        ImageView imageView = findViewById(R.id.enable_cart);
        ImageView imageView1 = findViewById(R.id.disable_cart);

        Drawable drawable = ContextCompat.getDrawable(this,R.mipmap.btn_cart_list);
        imageView.setImageDrawable(drawable);

        Drawable.ConstantState state = drawable.getConstantState();
        Drawable drawable1 = DrawableCompat.wrap(state == null ? drawable : state.newDrawable()).mutate();
        drawable1.setBounds(0.0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        DrawableCompat.setTint(drawable1,ContextCompat.getColor(this,R.color.gray));

        imageView1.setImageDrawable(drawable1);
Copy the code

DrawableCompat: The DrawableCompat backward compatible class, which we used for tint compatibility in 6.0, is a very simple compatibility class

Wrap method: To use TINt, you must call this method to wrap Drawable once

Mutate method: If this method is not called, the drawable is the same as the drawable after coloring. All two ImageViews will display the drawable after coloring

Using the selector

XML code

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"
        android:clickable="true" />
Copy the code

Java code

ImageView imageView = (ImageView) findViewById(R.id.image);
        Drawable drawable = ContextCompat.getDrawable(this, R.mipmap.btn_cart_list);
        int[] colors = new int[]{ContextCompat.getColor(this, R.color.gray), ContextCompat
                .getColor(this, R.color.colorAccent)};
        int[][] states = new int[2] []; states[0] = new int[]{android.R.attr.state_pressed};
        states[1] = new int[] {}; ColorStateList colorList =new ColorStateList(states, colors);
        StateListDrawable stateListDrawable = new StateListDrawable();
        stateListDrawable.addState(states[0], drawable);// Pay attention to the order
        stateListDrawable.addState(states[1], drawable);
        Drawable.ConstantState state = stateListDrawable.getConstantState();
        drawable = DrawableCompat.wrap(state == null ? stateListDrawable : state.newDrawable())
                .mutate();
        DrawableCompat.setTintList(drawable, colorList);
        imageView.setImageDrawable(drawable);
Copy the code

Android View(View) draw different state background picture principle in-depth analysis and StateListDrawable usage details

Not for the

More: Android Image Drawable