Detailed explanation of Drawable method in Android

  • 2021-07-10 20:49:13
  • OfStack

This article shares the detailed usage of Drawable method in Android for your reference. The specific contents are as follows

1. BitmapDrawable related methods:

New under the drawable directory, as shown below:


<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:antialias="true"
  android:dither="true"
  android:filter="true"
  android:gravity="center"
  android:mipMap="false"
  android:src="@drawable/ic_launcher"
  android:tileMode="disabled" /> 

The specific explanation of each attribute is as follows:


<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Image anti-aliasing effect, which will smooth the picture after being turned on, or can be used in 1 Reduce the resolution of the picture to a certain extent (negligible amplitude)  -->
  android:antialias="true"
  <!--  Whether to turn on the dither effect, which can dye high-quality pictures and display them better under low-quality screens  -->
  android:dither="true"
  <!--  Whether to turn on filtering, it can keep good display effect  -->
  android:filter="true"
  <!--  Picture gravity control, you can control the position of the picture, or you can use " | "To use in combination: 
      top           Place the picture at the top without changing the size of the picture 
      bottom         Place the picture at the bottom without changing the size 
      left         Place the picture to the left without changing the size 
      right         Place the picture on the right without changing the size 
      center_vertical     Center the picture vertically without changing the size 
      fill_vertical     The picture fills the whole container vertically 
      center_horizontal   Center the picture horizontally without changing the size of the picture 
      fill_horizontal     The picture is filled horizontally 
      center         Center the picture in the middle   
      fill         The picture fills the container, this is the default value 
      clip_vertical     Additional option to indicate vertical cropping, which is rarely used 
      clip_horizontal     Additional option, which is horizontal cropping, is rarely used 
   -->
  android:gravity="center"
  <!--  Texture mapping, 1 Everywhere false -->
  android:mipMap="false"
  <!--  Data source of picture  -->
  android:src="@drawable/ic_launcher"
  <!--  There are the following values, which correspond as follows: 
    disabled   Default mode, turn off tiling 
    repeat     Tile the order horizontally and vertically 
    mirror    1 Specular projection effect in horizontal and vertical directions 
    clamp    4 Peripheral pixels spread to surrounding areas  -->
  android:tileMode="disabled" /> 

The above typesetting method is only for convenience of viewing, and cannot be directly copied into the code for use

2. ShapeDrawable, solid color, gradient drawable

Basic sample code:


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:bottomLeftRadius="1px"
    android:bottomRightRadius="1px"
    android:radius="2px"
    android:topLeftRadius="1px"
    android:topRightRadius="1px" />
  <gradient
    android:angle="5"
    android:centerColor="#ff789434"
    android:centerX="x"
    android:centerY="y"
    android:endColor="#34234324"
    android:gradientRadius="55dp"
    android:startColor="#ff783247"
    android:type="linear"
    android:useLevel="true" />
  <padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />
  <size
    android:width="70dp"
    android:height="70dp" />
  <solid android:color="#fffff333" />
  <stroke
    android:width="30dp"
    android:color="#33333333"
    android:dashGap="4dp"
    android:dashWidth="4dp" />
</shape>

Detailed description of each label:

< shape > Represents the shape of an image

Represents the shape of a graph. There are four options: rectangle (rectangle), oval (ellipse), line (horizontal line) and ring (ring). The default is rectangle. When using line and ring, you need to specify the width and color of the line through the stroke attribute, otherwise the display effect will be abnormal.
When ring is set, there are five special properties corresponding to the following:
android: innerRadius-the inner radius of the ring. When innerRadiusRatio exists at the same time, innerRadius shall prevail.
android: thickness-The thickness of the ring, and the outer radius minus the inner radius
android: innerRAdiusRatio-The ratio of the inner radius to the width of the whole drawable, the default is 9
android: thicknessRadio-the ratio of thickness to the whole Drawable, the default is 3, and the calculation method is thickness = width/n
android: useLevel-1 false should be used in general, except when used as LevelListDrawable

< corners > (4 angle angles, for rectangles)

Represents the angles of the four corners of shape. It only tries with rectangles, and the angle value is the degree of rounded corners, which is represented by px. Among them, radius is used to set the angle for four angles, and the priority is relatively low. topLeftRadius, topRightRadius, bottomLeftRadius and bottomRightRadius represent the angles of upper left, upper right, lower left and lower right corners respectively.

< gradient > (Color Gradient)

Represents a gradient fill, which is mutually exclusive to the label, and contains several attribute values with the following meanings:
android: angle-Gradient angle, default to zero, value must be a multiple of 45.
android: centerX-Abscissa of Gradient Center Point
android: centerY-Gradient center point ordinate
android: startColor-Gradient start color
android: centerColor-Gradient Intermediate Color
android: endColor-End color of gradient
android: gradientRadius-Gradient radius
android: useLevel-1 is generally false, only if android: type = "radial"
android: type-the type of gradient. There are three types: linear (linear gradient), radial (radial gradient) and sweep (scan line gradient). The default is linear gradient

< solid > (Solid Color Fill)

android: color allows you to specify the color of padding in shape

< stroke > (Stroke property)

Contains the following common tags:
android: width-Stroke width, the larger the shape edges will look thicker
android: color-Stroke color
android: dashWidth-The width of the segment that makes up the dotted line
android: dashGap-The spacing between the segments that make up the dotted line, the larger the spacing, the larger the gap

< padding > Inner margin

It can be understood as inner margin, which is similar to adding margin directly in view. It contains four attributes: android: top, android: bottom, android: left and android: right, which respectively represent upper, lower, left and right inner margins.

< size >

There are two attributes android: width and android: height, which indicate the width and height of the view, similar to the width and height of the picture itself, and will be stretched as appropriate in view.

3. LayerDrawable Hierarchical Drawable, similar to layers

A collection of multiple drawable, similar to the layer concept, achieves a superimposed effect by placing different drawable on different layers. Its syntax rules are as follows:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
    android:id="@+id/item1"
    android:bottom="1dp"
    android:drawable="@drawable/ic_launcher"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp">
  </item>
</layer-list> 

One layer-list may contain multiple item, each item representing one drawable. Up, down, left and right is an attribute that represents the up, down, left and right offset of Drawable relative to view, in pixels. One drawable resource can be directly referenced through drawable. You can also customize drawable directly under the item tab.
By default, all drawable in layer-list are scaled to the size of view. layer-list has a hierarchical concept, and the lower drawable overrides the upper drawable. Through reasonable stratification, one special superposition effect can be realized.

4. StateListDrawable (selector)

Selector label, the corresponding label is < selector > Is also a collection of drawable, which is often used to change colors according to the current state.


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
  <!--  Will it change with the change of state, the default is false Indicates that it will change with the change  -->
  android:constantSize="true" 
  <!--  Whether to turn on jitter, which can get better display on low-resolution mobile phones, it is recommended to true -->
  android:dither="true" 
  <!--  Whether to change the inner margin according to the status, it is recommended to true -->
  android:variablePadding="true">
  <item 
    <!--  Corresponding drawable -->
    android:drawable="@drawable/ic_launcher"
    <!--  Press the status, such as button Press unloosened  -->
    android:state_pressed="true"
    <!--  Denote View Has gained focus  -->
    android:state_focused="true"
    <!--  Does the cursor hover ,4.0 Later characteristics  -->
    android:state_hovered="true"
    <!--  Indicates that the user has selected view -->
    android:state_selected="true"
    <!--  Indicates whether the component can be selected, such as RadioButton -->
    android:state_checkable="true"
    <!--  Indicates that the user has selected view , 1 Used for selection buttons  -->
    android:state_checked="true"
    <!--  Denote view Is currently available  -->
    android:state_enabled="true"
    <!--  Denote view In an active state  -->
    android:state_activated="true"
    <!--  Is the application in the foreground  -->
    android:state_window_focused="true">
   </item>
</selector> 

Note: If there are multiple item, the program will automatically match from top to bottom, and the first match will be applied. (Not by Best Bet) If an item does not have any state description, then it can be matched by any one state. Therefore, the default item should be put in the last one, otherwise the following options will have no effect.

5. LevelListDrawable (different levels switch different drawable)

LevelListDrawable corresponds to < level-list > Label used to represent an drawable collection. Each drawable in the set has one level. According to different levels, LevelListDrawable will be switched to the corresponding Drawable. The specific details are as follows:


<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
    <!--  Corresponding drawable -->
    android:drawable = "@drawable/ic_lunch"
    <!--  Maximum grade  -->
    android:maxLevel = "2"
    <!--  Minimum grade  -->
    android:minLevel = "1">
    <!--  The level between the maximum and minimum levels corresponds to this item In Drawable When it acts as a view Background, you can pass the 
    Drawable Adj. setLevel Method to set different levels, so as to switch the specific drawable . You can also pass the ImageView Adj. 
    setImageLevel Method, and the level range is 0 To 10000 , 0 Is the default value  -->
  </item>
</level-list>

6. TransitionDrawable (fade in and fade out)

Corresponding to this is < transition > Label, used to achieve the fade-in and fade-out effect between two drawable, the specific use method is as follows


<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
    <!--  Corresponding drawable -->
    android:drawable = "@drawable/ic_lunch"
    <!--  Corresponding id -->
    android:id = "@+id/item1"
    <!-- drawable4 Offset of weeks  -->
    android:top = "1dp"
    android:right = "1dp"
    android:bottom = "1dp"
    android:left = "1dp">
  </item>
</transition>

Usage:

Define gradient


<?xml version="1.0" encoding="utf-8"?>
<transition
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/drawable1" />
  <item android:drawable="@drawable/drawable" />
</transition>

Add a gradient to the background


<TextView
android:id = "@+id/button"
andoird:layout_height = "wrap_content"
android:layout_width = "wrap_content"
android:background = "@drawable/transition_drawable"
/>

Control in code


TextView textView = (TextView)findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable)textView.getBackground();
drawable.startTransition(1000);

7. InsetDrawable (1 Drawable embedded)

You can embed Drawable into yourself and leave a gap in 4 weeks, which is generally used in view where you want your background to be smaller than your actual area.


<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Image anti-aliasing effect, which will smooth the picture after being turned on, or can be used in 1 Reduce the resolution of the picture to a certain extent (negligible amplitude)  -->
  android:antialias="true"
  <!--  Whether to turn on the dither effect, which can dye high-quality pictures and display them better under low-quality screens  -->
  android:dither="true"
  <!--  Whether to turn on filtering, it can keep good display effect  -->
  android:filter="true"
  <!--  Picture gravity control, you can control the position of the picture, or you can use " | "To use in combination: 
      top           Place the picture at the top without changing the size of the picture 
      bottom         Place the picture at the bottom without changing the size 
      left         Place the picture to the left without changing the size 
      right         Place the picture on the right without changing the size 
      center_vertical     Center the picture vertically without changing the size 
      fill_vertical     The picture fills the whole container vertically 
      center_horizontal   Center the picture horizontally without changing the size of the picture 
      fill_horizontal     The picture is filled horizontally 
      center         Center the picture in the middle   
      fill         The picture fills the container, this is the default value 
      clip_vertical     Additional option to indicate vertical cropping, which is rarely used 
      clip_horizontal     Additional option, which is horizontal cropping, is rarely used 
   -->
  android:gravity="center"
  <!--  Texture mapping, 1 Everywhere false -->
  android:mipMap="false"
  <!--  Data source of picture  -->
  android:src="@drawable/ic_launcher"
  <!--  There are the following values, which correspond as follows: 
    disabled   Default mode, turn off tiling 
    repeat     Tile the order horizontally and vertically 
    mirror    1 Specular projection effect in horizontal and vertical directions 
    clamp    4 Peripheral pixels spread to surrounding areas  -->
  android:tileMode="disabled" /> 

0

8. ScaleDrawable (scaling class, which can be scaled)

The corresponding code is as follows:


<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Image anti-aliasing effect, which will smooth the picture after being turned on, or can be used in 1 Reduce the resolution of the picture to a certain extent (negligible amplitude)  -->
  android:antialias="true"
  <!--  Whether to turn on the dither effect, which can dye high-quality pictures and display them better under low-quality screens  -->
  android:dither="true"
  <!--  Whether to turn on filtering, it can keep good display effect  -->
  android:filter="true"
  <!--  Picture gravity control, you can control the position of the picture, or you can use " | "To use in combination: 
      top           Place the picture at the top without changing the size of the picture 
      bottom         Place the picture at the bottom without changing the size 
      left         Place the picture to the left without changing the size 
      right         Place the picture on the right without changing the size 
      center_vertical     Center the picture vertically without changing the size 
      fill_vertical     The picture fills the whole container vertically 
      center_horizontal   Center the picture horizontally without changing the size of the picture 
      fill_horizontal     The picture is filled horizontally 
      center         Center the picture in the middle   
      fill         The picture fills the container, this is the default value 
      clip_vertical     Additional option to indicate vertical cropping, which is rarely used 
      clip_horizontal     Additional option, which is horizontal cropping, is rarely used 
   -->
  android:gravity="center"
  <!--  Texture mapping, 1 Everywhere false -->
  android:mipMap="false"
  <!--  Data source of picture  -->
  android:src="@drawable/ic_launcher"
  <!--  There are the following values, which correspond as follows: 
    disabled   Default mode, turn off tiling 
    repeat     Tile the order horizontally and vertically 
    mirror    1 Specular projection effect in horizontal and vertical directions 
    clamp    4 Peripheral pixels spread to surrounding areas  -->
  android:tileMode="disabled" /> 

1

When you use it, you must set the level of Drawable, otherwise you can't use it. The code for setting the level is as follows:


<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Image anti-aliasing effect, which will smooth the picture after being turned on, or can be used in 1 Reduce the resolution of the picture to a certain extent (negligible amplitude)  -->
  android:antialias="true"
  <!--  Whether to turn on the dither effect, which can dye high-quality pictures and display them better under low-quality screens  -->
  android:dither="true"
  <!--  Whether to turn on filtering, it can keep good display effect  -->
  android:filter="true"
  <!--  Picture gravity control, you can control the position of the picture, or you can use " | "To use in combination: 
      top           Place the picture at the top without changing the size of the picture 
      bottom         Place the picture at the bottom without changing the size 
      left         Place the picture to the left without changing the size 
      right         Place the picture on the right without changing the size 
      center_vertical     Center the picture vertically without changing the size 
      fill_vertical     The picture fills the whole container vertically 
      center_horizontal   Center the picture horizontally without changing the size of the picture 
      fill_horizontal     The picture is filled horizontally 
      center         Center the picture in the middle   
      fill         The picture fills the container, this is the default value 
      clip_vertical     Additional option to indicate vertical cropping, which is rarely used 
      clip_horizontal     Additional option, which is horizontal cropping, is rarely used 
   -->
  android:gravity="center"
  <!--  Texture mapping, 1 Everywhere false -->
  android:mipMap="false"
  <!--  Data source of picture  -->
  android:src="@drawable/ic_launcher"
  <!--  There are the following values, which correspond as follows: 
    disabled   Default mode, turn off tiling 
    repeat     Tile the order horizontally and vertically 
    mirror    1 Specular projection effect in horizontal and vertical directions 
    clamp    4 Peripheral pixels spread to surrounding areas  -->
  android:tileMode="disabled" /> 

2

9. ClipDrawable (Cut Drawable for different settings)

You can crop another Drawable according to the current level. The specific code is as follows:


<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Crop direction, horizontal or vertical  -->
  android:clipOrientation="horizontal"
  android:drawable="@+id/icon"
  <!--  And clipOrientation Use together, see the following description for details -->
  android:gravity="top" >
</clip> 

top-Place to the top, if cut vertically, cut from the bottom
bottom-Put it at the bottom, and if it is cut vertically, cut it from the top
left-To the left, if horizontal cropping, cropping from the right (this is the default)
right-Put it on the right. If you cut horizontally, cut it from the left
center_vertical-Centered vertically, cropping up and down at the same time when cropping vertically
fill_vertical-Fill in vertical direction. For vertical cropping, cropping occurs only when the clipDrawable level is 0 (not visible at this time, full cropping)
(Horizontal also has attributes similar to vertical, corresponding to center_horizontal and fill_horizontal, which are used similarly to the above two.)
center-Middle center, vertical cutting up and down at the same time, horizontal cutting left and right at the same time
fill-Fills the entire drawable and is valid when the clipDrawable level is zero
clip_vertical-Additional option, table vertical cropping
clip_horizontal-Additional option, table vertical cropping

When using, you need to set the level in the code. The specific code is as follows


<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  <!--  Image anti-aliasing effect, which will smooth the picture after being turned on, or can be used in 1 Reduce the resolution of the picture to a certain extent (negligible amplitude)  -->
  android:antialias="true"
  <!--  Whether to turn on the dither effect, which can dye high-quality pictures and display them better under low-quality screens  -->
  android:dither="true"
  <!--  Whether to turn on filtering, it can keep good display effect  -->
  android:filter="true"
  <!--  Picture gravity control, you can control the position of the picture, or you can use " | "To use in combination: 
      top           Place the picture at the top without changing the size of the picture 
      bottom         Place the picture at the bottom without changing the size 
      left         Place the picture to the left without changing the size 
      right         Place the picture on the right without changing the size 
      center_vertical     Center the picture vertically without changing the size 
      fill_vertical     The picture fills the whole container vertically 
      center_horizontal   Center the picture horizontally without changing the size of the picture 
      fill_horizontal     The picture is filled horizontally 
      center         Center the picture in the middle   
      fill         The picture fills the container, this is the default value 
      clip_vertical     Additional option to indicate vertical cropping, which is rarely used 
      clip_horizontal     Additional option, which is horizontal cropping, is rarely used 
   -->
  android:gravity="center"
  <!--  Texture mapping, 1 Everywhere false -->
  android:mipMap="false"
  <!--  Data source of picture  -->
  android:src="@drawable/ic_launcher"
  <!--  There are the following values, which correspond as follows: 
    disabled   Default mode, turn off tiling 
    repeat     Tile the order horizontally and vertically 
    mirror    1 Specular projection effect in horizontal and vertical directions 
    clamp    4 Peripheral pixels spread to surrounding areas  -->
  android:tileMode="disabled" /> 

4

The above is the whole content of this paper, hoping to help everyone's study.


Related articles: