English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home page
  3. Experience notes
  4. Main text

Summary of Essential Knowledge of Android Drawable

What is Drawable

Firstly, Drawable is an abstract class, representing images that can be drawn on Canvas, often used as the background of a view, with multiple implementation classes completing different functions. Secondly, Drawable can be roughly divided into these categories: images, images composed of colors. Generally defined in xml.

Drawable inheritance hierarchy

Drawable implementation classes and tags

Drawable

Obtaining internal width and height

　　　 getIntrinsicHeight, getIntrinsicWidth
　　　 - When Drawable is composed of images, the method returns the width and height of the image
　　　 -　 When Drawable is composed of colors, there is no concept of width and height, and it returns-1

All kinds of Drawable and their usage

BitmapDrawable

Used to display an image, as shown in the following example

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
 android:antialias="true"
 android:dither="true"
 android:filter="true"
 android:gravity="top"
 android:src="@mipmap/girl"
 android:tileMode="repeat" />

common properties

android:antialias whether to enable anti-aliasing
android:dither whether to enable dithering
android:filter whether to enable filtering effect
android:gravity used to locate the image
android:src image resource id
android:tileMode tiling mode, repeat, mirror, clamp three

ColorDrawable

Represents a monochrome drawable area, which wraps a fixed color and draws a monochrome area on the canvas.

Example:

<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">
</color>

It can also be created by code

ColorDrawable drawable = new ColorDrawable(int color); //Pass an integer value of a color

NinePatchDrawable

That is9-patch images can be freely scaled in width and height without distortion based on the content

Example:

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
 android:dither="true"
 android:filter="true"
 android:src="@color/colorAccent">
</nine-patch>

Use draw9patch to set the scaling area

In the figure1,2Direction indicates in draw9Black lines are drawn in the patch, and the intersection of the black line lengths is the stretchable range.
In the figure3,4The intersection of the lengths of the black lines in the figure represents the area that can be filled.

ShapeDrawable

Shapes can be constructed through colors, which can be solid color shapes or gradient effect shapes. The shapes that can be constructed include rectangle, oval, ring, and line.

An example of a circular shape with gradient effect:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <gradient
  android:angle="45"
  android:centerColor="@color/colorAccent"
  android:centerX="50%"
  android:centerY="50%"
  android:endColor="@color/colorPrimary"
  android:gradientRadius="150dp"
  android:startColor="@color/colorPrimaryDark"
  android:type="sweep" />
 <size
  android:width="260dp"
  android:height="260dp" />
</shape>

Note:1, Android:angle value must be45multiple of 2, oval is used to draw an ellipse, and it is drawn as a circle when the width and height of size are equal

Ring example:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:innerRadius="100dp"
 android:shape="ring"
 android:thickness="10dp"
 android:useLevel="false" >
 <stroke
  android:width="10dp"
  android:color="@color/colorAccent" />
</shape>

Note:
1, android:useLevel set to false, otherwise the ideal effect cannot be displayed
2, innerRadius is the inner radius of the ring, innerRadiusRatio is the ratio of the inner radius to the ring width, both with innerRadius as the main factor
3, thickness is the width of the ring, thicknessRatio is the ratio of this width to the ring width, with thickness as the main factor

common properties

- android:shape the shape to be drawn, rectangle, oval, ring, line
- <stroke> shape's outline, has the following properties
　　　　　　　 - android:width the width of the outline
　　　　　　　 - android:color the color of the outline
　　　　　　　 - android:dashGap the width of the dashed line
　　　　　　　 - android:dashWidth the interval of the line segment for drawing a dashed line (both of the following cannot be 0 to draw a dashed line)
-<solid> solid color fill, android:color specifies the shape color
- <gradient> gradient effect, cannot be used with <solid>, has the following properties
　　　　　　　 - android:angle gradient's angle, must be45multiple of
　　　　　　　 - android:startColor gradient's starting color
　　　　　　　 - android:centerColor gradient's middle color
　　　　　　　 - android:endColor The ending color of the gradient
　　　　　　　 - android:centerX The horizontal coordinate of the center point of the gradient
　　　　　　　 - android:centerY The vertical coordinate of the center point of the gradient
　　　　　　　 - android:gradientRadius Gradient radius
　　　　　　　 - android:type Gradient type, linear (linear), sweep (sweep), radial (radial)
- <corners> Represents the angles of the four corners of the rectangle (rectangle), not applicable to other shapes, with the following properties
　　　　　　　 - android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius respectively set the angles of the top left, top right, bottom left, and bottom right corners
　　　　　　　 - android:radius Sets the same angle for the four corners, with a lower priority and will be overridden by the other four properties
- <size> Width and height of the shape, corresponding to android:width, android:height
　　　　　　　 -　 The shape has no width and height by default, getIntrinsicHeight, getIntrinsicWidth returns-1
　　　　　　　 -　 Through size, the width and height can be set, but as the view background, it will still be stretched or shrunk to the size of the view
- <padding> Sets the blank spacing of the view containing the shape

StateListDrawable

It can be regarded as a state selector, which selects the corresponding item's drawable to display through the different states of the view

Example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@color/colorPrimaryDark" android:state_pressed="false"></item>
 <item android:drawable="@color/<colorAccent android:state_pressed="true"></item>
</selector>

Common states

When a view is pressed down, the pressed state
When a view is checked, applicable to CheckBox
When a view is selected
When a view is in an enabled state
When the view gains focus

LayerDeawable

LayerDeawable

Example:

<?xml version="1.0" encoding="utf-8"?>
Represents a layered collection of drawables, similar to the concept of layers in Photoshop, multiple drawables are placed on different layers to form an overlay effect-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/night" />
 <item
  android:drawable="@mipmap"/photo6"
  <layer />
</android:gravity="center"-list>

layer

1Attention:-list can contain multiple items, each item represents a drawable, and the item added later will cover the item added earlier
2By default, layer-All drawables in list will be scaled to the size of the view, through the facility of android:gravity, the scaling effect can be adjusted
3Can set the offset of top, bottom, left, and right, android:top, android:bottom, android:left, android:right

LevelListDrawable

Represents a collection of drawables, each drawable in the collection has a level, by setting different levels, LevelListDrawable can switch to different drawables. The level range is between 0~10000 between, android:maxLevel sets the maximum level, android:minLevel sets the minimum level
Example:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:drawable="@mipmap"/photo0"
  android:maxLevel="20"
  android:minLevel="10" />
 <item
  android:drawable="@mipmap"/photo1"
  android:maxLevel="40"
  android:minLevel="30" />
</level-list>

By setting the level, different Drawables can be switched, in the code

 //Switch the background of ImageView to photo1, 35 In30~40 between
 iv.setImageLevel(35); 
 //Switch the background of ImageView to photo0, 15In10~20 between
 iv.setImageLevel(15);

TransitionDrawable

A subclass of LayerDrawable, used to implement the fade-in and fade-out effect of two Drawables
Example:

xml file definition

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

Set the src of ImageView, in Java code

 iv = (ImageView) findViewById(R.id.iv_transition);
 drawable = (TransitionDrawable) iv.getDrawable();
 drawable.startTransition(1000); // to achieve fade-in and fade-out effects
 drawable.reverseTransition(1000);

InsetDrawable

embed other Drawable and maintain a certain spacing around
Example:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap"/photo6"
 android:inset="20dp">
</inset>

ScaleDrawable

Scale a Drawable to a certain proportion according to the level, invisible when level is 0, and when level is10000 has no scaling effect
Example:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap"/night"
 android:scaleGravity="center"
 android:scaleHeight="50%"
 android:scaleWidth="50%" />

To show the effect, the level must be greater than 0

 iv = (ImageView) findViewById(R.id.iv_scale);
 ScaleDrawable drawable= (ScaleDrawable) iv.getDrawable();
 drawable.setLevel(1);

- android:scaleHeight="percentage", android:scaleWidth="percentage", set the width and height scaling to the original proportion as (100%-(percentage)
- The higher the level, the larger the image displayed

ClipDrawable

According to your level (level) to crop another Drawable, the cropping direction is determined by android:clipOrientation and android:gravity. Set level to crop, the size of level ranges from 0 to10000, when level is 0, it is not displayed at all, and when level is10000 is fully displayed
xml definition

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
 android:clipOrientation="horizontal"
 android:drawable="@mipmap"/night"
 android:gravity="right"></clip>

 <ImageView
  android:id="@"+id/iv_clip"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/drawable_clip" />

Through setting level to clip

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // The larger the set level, the smaller the clipping range

Properties

android:clipOrientation, horizontal 水平方向裁剪，vertical 垂直方向裁剪
android:gravity,配合裁剪方向

Custom Drawable

Custom circular Drawable

package com.yu.drawablelearing;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
public class CircleDrawable extends Drawable{
 private int radius;
 private int mWidth;
 private int mHeight;
 private Paint mPaint;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawCircle(mWidth/2,mHeight/2,radius,mPaint);
 }
 public CircleDrawable(Bitmap bitmap) {
  radius = Math.min(bitmap.getWidth(), bitmap.getHeight());/2;
  mWidth = bitmap.getWidth();
  mHeight = bitmap.getHeight();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint = new Paint();
  mPaint.setShader(bitmapShader);
  mPaint.setAntiAlias(true);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicHeight() {
  return mHeight;
 }
 @Override
 public int getIntrinsicWidth() {
  return mWidth;
 }
}

Custom rounded rectangle Drawable

package com.yu.drawablelearing;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
/**
 * Created by pecu on 2016/08/24.
 */
public class RoundRectangleDrawable extends Drawable {
 private RectF rectF;
 private Paint mPaint;
 Bitmap mBitmap;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawRoundRect(rectF, mBitmap.getWidth()/6,mBitmap.getHeight()/6, mPaint);
 }
 public RoundRectangleDrawable(Bitmap bitmap) {
  mBitmap = bitmap;
  mPaint = new Paint();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint.setAntiAlias(true);
  mPaint.setShader(bitmapShader);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public void setBounds(int left, int top, int right, int bottom) {
  super.setBounds(left, top, right, bottom);
  rectF = new RectF(left, top, right, bottom);
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicWidth() {
  return mBitmap.getWidth();
 }
 @Override
 public int getIntrinsicHeight() {
  return mBitmap.getHeight();
 }
}

General steps for custom Drawable

　1Custom Drawable class inherits from Drawable
　2Implement getOpacity, setColorFilter, setAlpha, and other methods
　3Draw in the onDraw method
　4If the custom Drawable has a fixed size, the getIntrinsicWidth, getIntrinsicHeight methods need to be implemented

That's all for the content of this article. Hope it helps with your studies and also hope everyone will support the Yell Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, nor has it been edited by humans, nor does it bear relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When reporting, please replace # with @) to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial
You May Also Like