8.1.2 A Summary of 13 Types of Drawables in Android Part 2

Classification Android Basic Tutorial

Introduction to This Section:

In this section, we continue to learn about Drawable resources in Android. In the previous section, we studied: ColorDrawable; NinePatchDrawable; ShapeDrawable; GradientDrawable! BitmapDrawable; InsetDrawable; ClipDrawable; RotateDrawable; AnimationDrawable!

Alright, let's start the content of this section~

1. BitmapDrawable

An encapsulation of Bitmap, which allows setting the drawing mode of the bitmap it wraps within the BitmapDrawable area, including: Tiling fill, stretch fill, or keep the original image size! With <bitmap> as the root node! Optional attributes are as follows:

src: Image resource~
antialias: Whether to support anti-aliasing
filter: Whether to support bitmap filtering, if supported, the image can be displayed more smoothly
dither: Whether to perform dithering on the bitmap
gravity: If the bitmap is smaller than the container, you can set the relative position of the bitmap in the container
tileMode: Specifies the mode for tiling the image to fill the container, if this is set, the gravity attribute will be ignored, with the following optional values: disabled (the entire pattern is stretched to fill), clamp (original image size), repeat (tiled), mirror (mirrored tiling)

The corresponding effect diagram:

① XML Definition of BitmapDrawable:

<?xml version="1.0" encoding="utf-8"?>  
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"  
    android:dither="true"  
    android:src="@drawable/ic_launcher"  
    android:tileMode="mirror" />

② Java Code to Achieve the Same Effect:

BitmapDrawable bitDrawable = new BitmapDrawable(bitmap);  
bitDrawable.setDither(true);  
bitDrawable.setTileModeXY(TileMode.MIRROR,TileMode.MIRROR);

2. InsetDrawable

It represents embedding a Drawable inside another Drawable, leaving some space inside, similar to the padding attribute of Drawable, but padding represents the margin between the content of the Drawable and the Drawable itself! While InsetDrawable represents the margin between the two Drawables and the container, it is suitable when the background required by the control is smaller than the actual border, such as using this to solve the spacing issue between our custom Dialog and the screen, those who have done it know that even if we set layout_margin, it is useless, at this time, InsetDrawable can be used! Just set the insetXxx for InsetDrawable to set the margins in different directions, and then set it as the background of the Dialog!

The related attributes are as follows:

1. drawable: The referenced Drawable, if empty, there must be a child node of the Drawable type!
1. visible: Set whether the Drawable is visible
1. insetLeft, insetRight, insetTop, insetBottom: Set the margins for left, right, top, and bottom

① Usage in XML:

<?xml version="1.0" encoding="utf-8"?>  
<inset xmlns:android="http://schemas.android.com/apk/res/android"  
    android:drawable="@drawable/test1"  
    android:insetBottom="10dp"  
    android:insetLeft="10dp"  
    android:insetRight="10dp"  
    android:insetTop="10dp" />

Usage in Java Code:

InsetDrawable insetDrawable = new InsetDrawable(getResources()  
        .getDrawable(R.drawable.test1), 10, 10, 10, 10);

Effect diagram :

3. ClipDrawable

Clip can be translated as "cut", and we can understand ClipDrawable as cutting a part from a bitmap; The progress bar in Android is implemented using ClipDrawable, which determines the size of the cut area based on the set level value, with the root node being <clip>

Related Attributes :

clipOrientation: Set the direction of the cut, which can be set to horizontal and vertical directions
gravity: Where to start cutting

drawable: The referenced drawable resource, if empty, a child node of the Drawable Just change the src in activity_main.xml to point to the aforementioned drawable, and in MainActivity, simply change ClipDrawable to rotateDrawable!

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;
    private RotateDrawable cd;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123) {
                if (cd.getLevel() >= 10000)
                    Toast.makeText(MainActivity.this, "Finished rotating~",
                            Toast.LENGTH_LONG).show();
                cd.setLevel(cd.getLevel() + 400);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        // Core implementation code
        cd = (RotateDrawable) img_show.getDrawable();
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
                if (cd.getLevel() >= 10000) {
                    timer.cancel();
                }
            }
        }, 0, 100);
    }
}

5.AnimationDrawable

The final Drawable in this section, AnimationDrawable is used to implement frame animation in Android, which is to play a series of Drawables in a certain order, frame by frame; Android has a rich variety of animations, including traditional tween animations, translations, scaling, and so on, but here we only introduce AnimationDrawable for frame animation, and for alpha, scale, translation, rotation, etc., we will introduce in detail in the animation section later~

We use <animation-list> as the root node here.

Related attributes and methods :

oneshot : Set whether to play in a loop, false for loop playback!!! duration : Frame interval time, we usually set it to 300 milliseconds. After obtaining the AnimationDrawable instance, we need to call its start() method to play the animation. Also, note that calling it in the OnCreate() method has no effect, because the View has not been initialized yet, we can use a simple handler to delay the playback of the animation! Of course, there are other methods, see the following link: Several ways to run Android AnimationDrawable Using AnimationDrawable to implement frame animation is really very convenient~

Usage example :

Running effect picture :

Code implementation :

①First, define an AnimationDrawable XML resource file :

<?xml version="1.0" encoding="utf-8"?>
&lt;animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading01"
        android:duration="100" />

    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading02"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading03"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading04"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading05"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading06"
        android:duration="100" />

</animation-list>

②Set the src in activity_main.xml, then in MainActivity :

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;
    private AnimationDrawable ad;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        // Core implementation code
        ad = (AnimationDrawable) img_show.getDrawable();
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                ad.start();
            }
        }, 300);
    }
}

Hehe, super simple, right? In the future, when you need to use frame animation, just go with AnimationDrawable, of course, it's only suitable for frame animations that don't need to be controlled, such as the above is a simple frame animation made from the progress bar material when pulling down for refresh! Expand according to your own needs~

Summary of this section:

-1.0 Android Basic Tutorial for Beginners

-[1.

2.3.3 Button and ImageButton

❮ Es6 Setup Find The Best Language ❯