preface

We can create a lot of custom resources in our drawable directory, and the most popular ones are probably selectors and Shapes. There are currently 21 drawable tags available on Android, and understanding and utilizing these tags is a great help to our development. In this article, we will make an introduction to these 21 tags to give you an impression.

Some of the materials in this article were taken from the Internet and recorded in my notes at that time, but the source was forgotten due to the long time ago.

shape

We are very familiar with this, a brief list of attributes and child tags, as for the attributes and specific use of child tags will not be detailed, there are some online

Its properties

Android: Dither Whether to enable picture jitter

Android: shape shape. They are rectangle, line, ellipse and ring. The default is rectangle

When used as a line, it must have stroke, either solid or dotted, but only horizontal, and mainly used for dividing lines

Android: Tint colors shape

Android :tintMode Coloring type (Mask type)

android:visible

// The following five attributes are used only when shape is ring

android:innerRadius

android:innerRadiusRatio

android:thickness

android:thicknessRatio

android:useLevel

Child tags

Solid fill color

Corners rounded corners

Stroke stroke

Padding margin

The size width

Gradient on the gradient

selector

Selectors, also commonly used, set different drawables for different states.

attribute

Android: Dither Whether to enable picture jitter

android:visible

Android: enterFadeDuration state changes, the new state display, fade in time, in milliseconds

Android :exitFadeDuration Indicates the fade-out time, in milliseconds, when the state changes and the old state disappears

Android :autoMirrored Sets whether the image needs to be mirrored. This is only useful when the layout orientation is RTL, i.e. right-to-left. API Level 19(Android 4.4) only added this property

In some languages, such as Arabic, the custom is right to left. In the Manifest application, you need to set Android :supportsRtl, There are also two related properties in the component android:layoutDirection and Android :textDirection

When true is selected, the drawable margin varies depending on the state. When true is set to true, you must configure layout for each state, but this is generally not recommended. When false is selected, the inner margin remains the same, the largest inner margin of all states.

Android :constantSize When the image size of each state of the selector is different, set to true to display the largest image size, set to false to display the default image size

Child tags

Under the item tag, you can define subtags of type Drawable

rotate

Resources can be rotated

attribute

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android :fromDegrees Start Angle degree

Android :toDegrees Indicates the end Angle. A positive number indicates clockwise and a negative number indicates counterclockwise

Android :pivotX The X coordinate of the rotation center, which can be a floating point or percentage. A floating-point number represents the distance to the left edge relative to the drawable in units of px, such as 5. Percentage indicates the distance to the left edge relative to the drawable as a percentage, such as 5%; Another percentage represents the left edge relative to the parent container, such as 5% P; A general setting of 50% indicates that it is in the drawable center

Android: Indicates the Y coordinate of the pivot center

Android: Visible sets the initial visibility state, which defaults to false

Child tags

When you do not specify android:drawable, you can add any subtags such as Shape. You can also put the shape in an XML file and use android: Drawable. Just use shape directly to reduce a file), so that you can implement certain shapes, such as triangles, through rotation. But it’s cumbersome, and it’s not often used, so I won’t go into details here.

bitmap

attribute

Android: SRC mandatory, specify the image resource, can only be an image, cannot be an XML defined drawable resource.

Gravity sets the alignment of images, such as in layer-list, where the default is to fill the entire view and then stretch, using this value. Multiple values can use | space:

Android: AntiAlias Specifies whether to enable anti-aliasing

Android: Dither sets whether to dither or not, which is used when the image is different from the pixel configuration of the screen, such as ARGB 8888 image and RGB565 screen

Android :filter Sets whether to allow the image to be filtered. The image can be shrunk or extended by filtering to obtain a smooth appearance

Android: tint color

Android :tileMode Sets the mode of image tiling in which clamp copies the color on the edges of the image to fill in the remaining space of the container

Android: alpha transparency

Android :mipMap Specifies whether mipMap can be used, but the minimum API Level is 17, that is, Android 4.2

Android :autoMirrored sets whether an image needs to be mirrored, as mentioned above

Android :tileModeX sets horizontal tiling, which was added to API Level 21(Android 5.0)

Android :tileModeY sets the vertical tiling, which was added to API Level 21(Android 5.0)

Android :tintMode coloring mode, also added to API Level 21(Android 5.0)

nine-patch

attribute

Android: SRC This parameter is mandatory. The dot 9 image xxx.9.png must be specified

The other attributes are exactly the same as bitmap, not repeated.

color

attribute

There is only one Android :color attribute, which is less useful because you can set the color directly in color.xml.

inset

Set the margin. Note that this margin is not the padding between the content and the view boundary (as in shape), but the distance between the drawable and the view boundary

For example, when you make a background, no matter how you set the padding of the view, the pattern will fill the view completely, so once you set this, you can leave some space around the pattern.

attribute

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android: Visible sets the initial visibility state, which defaults to false

The android: insetLeft left

Android: insetRight right margin

Android :insetTop top margin

Android :insetBottom Bottom margin

Android: Inset sets uniform margins that override the above four attributes, but API Level is required to be 21, i.e. Android 5.0

Child tags

If you do not set drawable, you can define subtags of type drawable, such as SHAPE

clip

Use the clip tag to clip the drawable, which is useful for making progress bars. The level value ranges from 0 to 10000. The default value is 0, indicating that the image is completely cropped and the image will not be visible. 10000 is not cut completely, visible complete picture.

attribute

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android :clipOrientation sets the clipping direction

Set cut out the location of the android: gravity, can value as follows, multiple values with | space:

  • Top: The image is placed on top of the container without changing the size of the image. When the clipping direction is vertical, the bottom of the image is cropped

  • Bottom: Place the image at the bottom of the container without changing its size. When the clipping direction is vertical, the top of the image is clipped off

  • Left: Place the image to the left of the container without changing the image size. Default value. If the cropping direction is horizontal, the right part of the image will be cropped

  • Right: Place the image to the right of the container without changing the image size. If the cropping direction is horizontal, the left side of the image will be cropped

  • Center: The picture is placed in the center of the container, including horizontal and vertical directions, without changing the size of the picture. When the cropping direction is horizontal, the left and right parts of the picture will be cropped; When the clipping direction is vertical, the upper and lower parts of the image are clipped

  • Fill: Stretch the entire image to fill the full height and width of the container. The image is not clipped unless level is set to 0 and the image is not visible

  • Center_vertical: Place the image in the center of the container in the vertical direction without changing its size. Cropping is the same as for center

  • Center_horizontal: Place the image in the center of the container in the horizontal direction without changing the image size. Cropping is the same as for center

  • Fill_vertical: Stretch the image vertically to fill the full height of the container. When the clipping direction is vertical, the image will not be clipped unless level is set to 0, and the image will not be visible

  • Fill_horizontal: Stretches the image horizontally to fill the full width of the container. If the cropping direction is horizontal, the image will not be cropped unless level is set to 0, at which point the image will not be visible

  • Clip_vertical: Additional option that clips gravity based on vertical, clipping the bottom when set to top, the top when set to bottom, and both the top and bottom when set to bottom otherwise

  • Clip_horizontal: Additional option to crop gravity based on the horizontal setting. If gravity is set to left, gravity will crop to the right, gravity will crop to the left, and gravity will crop to both left and gravity

Child tags

If you do not set drawable, you can define subtags of type drawable, such as SHAPE

Pay attention to

For this to work, level must be set, and level can only be set in code, imageView.setimagelevel (). In addition to the progress bar, with the property animation can achieve a gradual display of various effects of the picture.

scale

Similar to the clip, you need to set the level value. The value between 0 and 10000 is the original value. If the value exceeds 10000, the level is magnified.

attribute

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android :scaleHeight Specifies the height that can be scaled. The format is XX%. 0% indicates that no scaling is done, and 50% indicates that only half of the scaling is done

Android :scaleWidth Sets the width that can be scaled, expressed as a percentage. The format is XX%, 0% means no scaling and 50% means only half scaling

Android :scaleGravity Sets the position at which drawable is scaled. The value is the same as the bitmap label, but the default value is left

Android: useIntrinsicSizeAsMinimum set the drawable original size as a minimal size, when set to true, the zoom is invalid

Android :level requires API >=24, but the setting has no effect

Child tags

If you do not set drawable, you can define subtags of type drawable, such as SHAPE

level-list

This is useful when you need to display different images in a View, such as different images depending on the battery remaining on your phone. The levellist can manage a set of drawables. Each drawable sets a set of level ranges. The levellist will draw the corresponding drawable based on the level value.

Child tags

item

The properties of item are

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android :minLevel Indicates the minimum level of the item

Android :maxLevel Indicates the maximum level of the item

With level-list we can change the level without using if-else to dynamically change the image or background.

layer-list

This is also commonly used, mainly to superimpose several drawable together to achieve complex graphics with simple drawable.

attribute

Android :autoMirrored automatic mirroring, explained above, API >=19

None of the attributes corresponding to the child tags are effective and have been tested

Android :paddingMode Stack mode, API >=21. There are two models

  • Nest is default, nesting each layer into the previous layer, so the padding of the previous layer has an effect on this layer
  • Stack stacks each layer directly on top of the previous layer. The padding on the previous layer has no effect on the layer

For a quick explanation, suppose the first layer is shape and android:left=”10dp”. In NEST mode, the second layer starts filling from 10DP on the left, while in stack mode, the second layer starts filling from 0DP on the left.

Android :paddingXXX Sets the content margin (such as when setting to background)

Child tags

Under the item tag, you can define subtags of type Drawable

transition

Transition is a layer-list transition that manages only two layers of drawables, and provides a way to switch between two layers of drawables and animate them as they fade in and out.

attribute

Both inherit layer-list and both are invalid

Child tags

Under the item tag, you can define subtags of type Drawable

Pay attention to

In this code, the Drawable generated by the Transition tag corresponds to the TransitionDrawable class. To switch, you need to actively call the startTransition() method of TransitionDrawable. The parameter is the number of milliseconds for the animation. You can also reverse the switch by calling the reverseTransition() method.

((TransitionDrawable)drawable).startTransition(500); // Forward toggle from the first drawable to the second

((TransitionDrawable)drawable).reverseTransition(500); // Reverse switch from the second drawable back to the first drawable

animation-list

Animation-list can be used to construct a series of drawables into a frame animation, that is, to play drawables one by one.

attribute

android:visible

Android: Whether oneshot plays in a loop

Android :variablePadding was mentioned above

Child tags

Under the item tag, you can define subtags of type Drawable. The attributes of item include drawable and duration

animation-rotate

This is easy to understand, is to make a drawable revolve around a certain place and keep doing rotation animation, no rotation Angle and no rotation time, like loading animation.

attribute

Android :drawable Specifies the drawable resource. If this attribute is not set, you can define sublabels of type drawable

Android: Indicates the X coordinate of the pivot center

Android: Indicates the Y coordinate of the pivot center

Android: Visible sets the initial visibility state, which defaults to false

Child tags

If you do not set drawable, you can define subtags of type drawable, such as SHAPE

Here are the new tags for android5.0

vector

SVG vector diagram

attribute

The android: name names

Android: width Drawable width

Android :height and Drawable

Android :viewportWidth Defines the width of the viewport space of a vector graph. The viewport is a virtual canvas. This is not the width of the drawable, but the maximum number of horizontal portions of the coordinate system.

Android :viewportHeight Defines the height of the viewable area of a vector graphic.

Android: tint color

Android :tintMode coloring mode

Android :autoMirrored Automatically mirrors, as mentioned above

Android: Alpha transparency. The value is 0 or 1

Child tags:

Group: Can contain subgroups and paths. Its properties:

  • android:name
  • Android: rotation rotation
  • Android :pivotX The X-axis coordinates of the center during rotation and scaling. The value is a viewport-based coordinate system. Percentage cannot be used.
  • Android: The Y-axis coordinates of the central point during pivotY rotation and scaling. The value is a viewport-based coordinate system. Percentage cannot be used.
  • Android :scaleX’s scaling on the X axis was first applied to graphics.
  • Android :scaleY’s scale on the Y axis was first applied to graphics.
  • Android: Translation distance of translateX on the X axis. The value is based on the coordinate system of the viewport view. And then we apply it to the graph.
  • Android: Translation distance of the translateY on the Y axis. The value is based on the coordinate system of the viewport view. And then we apply it to the graph.

4. Path: a path whose properties:

  • android:name
  • Android :pathData indicates the pathData. The main properties, the data format is a bit more complicated and I won’t go into it here.
  • Android :fillColor Specifies the color of the fill path. In SDK24 and above, you can specify a list of color states or a gradient color. If you animate a gradient on this property, the new property value overrides the value.
  • Android :strokeColor specifies the color of the path line. In SDK24 and above, you can specify a list of color states or a gradient color. If you animate a gradient on this property, the new property value overrides the value.
  • Android :strokeWidth Specifies the width of the path line based on the coordinate system of the viewport view
  • Android :strokeAlpha specifies the transparency of the path line
  • Android :fillAlpha specifies the transparency of the fill region
  • Android :trimPathStart The value ranges from 0 to 1, indicating where to draw a path. The path between 0 and trimPathStart will not be drawn.
  • Android :trimPathEnd The value ranges from 0 to 1, indicating where the path is drawn. The path between trimPathEnd and 1 will not be drawn.
  • Android :trimPathOffset pan drawable region, value from 0 to 1, lines drawn from trimPathOffset+trimPathStart to trimPathOffset+trimPathEnd, note: TrimPathOffset +trimPathEnd if it’s more than 1, it’s actually plotted, it’s plotted 0 to trimPathOffset+ TrimPathend-1.
  • Android :strokeLineCap sets the appearance of the beginning and end of the line, with three values: butt (default, adds a flat edge to each end of the line), round (adds a round cap to each end of the line), and Square (adds a square cap to each end of the line). .
  • Android :strokeLineJoin Sets what corner (line connection type) to create when two lines meet: three values: miter (default, create sharp corner),round (create rounded corner),bevel (create bevel).
  • StrokeMiterLimit Sets the maximum miter length. The miter length refers to the distance between the inner and outer corners at the intersection of two lines. MiterLimit is valid only when the lineJoin attribute is miter.
  • Android :fillType fillType of the path

Clip-path: only those within the clipped path are displayed, and its properties are:

  • android:name
  • Android :pathData cutting path. The value is the same as the pathData described above.

animated-vector

SVG vector animations need to be used together with animation XML (Anim, Animator).

attribute

Android: Drawable SVG vector diagram, namely VectorDrawable

Child tags:

Target: Its property

  • Android: Name The name of the group or path in the vector
  • Android: Animation Group or path executes animations, anim or animator
instructions

For a quick example, suppose we want the menu icon to be the back icon.

First we define a VectorDrawable that contains multiple paths or groups, in this case three paths, i.e. three horizontal lines.

Then you need to define several anim or Animators. In this example, you need to define two animations that rotate counterclockwise and clockwise

It is best to define animal-vector so that when executed, you can see the top and bottom horizontal lines rotate to meet the middle horizontal line, switching from menu icon to back icon.

Note here that when we change pathData directly using the animator, for example:

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:propertyName="pathData"
    android:valueFrom="M20, 20 l80, 20"
    android:valueTo="The M50, 20 l80, 50." "
    android:valueType="pathType" />
Copy the code

ValueType must be explicitly set to pathType, otherwise crash will occur with no crash log.

In addition, after testing, the path format in valueFrom and valueTo should correspond one by one, otherwise it will crash and there will be no log. My understanding is that animation data cannot be calculated.

Such as:

Android: valueFrom = "M4, 8 h4l8, 4 l4, 4 v4zm10, 20 h4v - 4 h - 4 v4zm4, 20 h4v - 4 l4, 16 v4zm4, 14 h4v - 4 l4, v4zm10 10, 14 v4zm16 h4v - 4 h - 4, 4 v4h4l20, 4 H - 4 zm10, 8 h4l14, 4 h - 4 v4zm16, 14 h4v - 4 h - 4 v4zm16, 20 h4v - 4 h - 4 v4z" Android: valueTo = "M4, 0 h4l8, 4 l4, 4 v4zm10, 20 h4v - 4 h - 4 v4zm4, 20 h4v - 4 l0, 16 v4zm4, 14 h4v - 4 l4, v4zm10 10, 14 v4zm16 h4v - 4 h - 4, 4 v4h4l20, 4 h - 4 zm10, 8 h4l14, 4 h - 4 v4zm16, 14 h4v - 4 h - 4 v4zm16, 20 h4v - 4 h - 4 v4z"Copy the code

This is fine, because the data in each small section of path is exactly the same, except that the values in each small section vary

And:

Android: valueFrom = "M4, 8 h4l8, 4 l4, 4 v4zm10, 20 h4v - 4 h - 4 v4zm4, 20 h4v - 4 l4, 16 v4zm4, 14 h4v - 4 l4, v4zm10 10, 14 v4zm16 h4v - 4 h - 4, 4 v4h4l20, 4 H-4zm10,8h4L14, 4H-4v4zm16, 14h4V-4v4zm16, 20h4V-4v4v4z "Android :valueTo="M19,3L5, 3C-1.1, 0-2,0.9,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2, -2l21,5c0, -1.1-0.9, -2-2, -2zm9,17L7, 17v-7h2v7zm13, 17h-2l11,7h2v10zM17,17h-2v-4h2v4z"Copy the code

The path data does not correspond at all, and the intermediate data of the animation cannot be calculated

ripple

Effect of water lines

attribute

Android :color This parameter is mandatory

Android: Radius response radius

Child tags

Item: If the drawable attribute is not set, subtags of type drawable can be defined under this label

instructions

The drawable of item is always displayed as the background, with the water pattern on top of it.

Radius response radius means a circular area with the center of the view as the center and the radius value as the radius, or all areas of the view if RADIUS is not set.

When clicked, the response area is filled with color and creates a water pattern. However, the water pattern is centered on the contact point, which means that the response region and the water pattern region do not coincide.

However, if the contact point is outside the response region, the center of the water ripple does not exceed the response region.

animated-selector

Implement the selector animation, and it gets an animation when the state changes.

attribute

It inherits the selector, so all the properties are the same

Child tags

Item: Same as the selector item subtag. If the drawable attribute is not set, subtags of type drawable can be defined under this tag

Transition: Its properties:

  • Android :fromId start item ID
  • Android :toId Indicates the ID of the end item

Its subtags:

  • Animation-list Transitions between frames
instructions

Here’s an example:

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/state_on"

        android:drawable="@drawable/btn_check_0"

        android:state_checked="false" />

    <item

        android:id="@+id/state_off"

        android:state_checked="true"

        android:drawable="@drawable/btn_check_15" />

    <transition

        android:fromId="@id/state_on"

        android:toId="@id/state_off">

        <animation-list> 

            <item

                android:drawable="@drawable/btn_check_0"

                android:duration="30" />.</animation-list>

    </transition>

</animated-selector>
Copy the code

As you can see in the example above, the clickable animation plays the frame animation between the non-clickable and clickable states. This allows different animations to be played between different states.

adaptive-icon

The adaptive icon must be in the XXX-V26 directory, and corresponding resources must also be available in other versions of the directory. For example, there must be an adaptive icon resource in mipmap-anydpi-v26, and a PNG resource with the same name in mipmap-xhdpi. Otherwise, if you use the tag in another directory, the crash will occur. If there is no corresponding resource in another directory, the crash will occur.

attribute

android:drawable

Child tags

Foreground, if the drawable attribute is not set, sublabels of type drawable can be defined under this label

Background: If the drawable attribute is not set, subtags of type drawable can be defined under this tag

The two tags also have some properties for setting the position, which are relatively simple and will not be described in detail

maskable-icon

It is understood that it was replaced by adaptive icon, exactly the same

attribute

android:drawable

Child tags

foreground

background

drawable

api>=24

There is only one class, attribute values is the class name, such as android. Graphics. The drawable. ColorDrawable, otherwise it will prompt can not find the class

The tag did not find the document, presumably converting a custom Drawable Java class into an XML resource

Pay attention to the public number: BennuCTech, get more dry goods!