Android skill Tree – Drawable summary

preface

Android Skill Book Series:

Android Basics

Android Skill Tree – Animation summary

Android Skill Tree – View summary

Android Skill Tree – Activity summary

Android Skill Tree – View event system summary

Android Skill Tree – Summary of Android storage paths and I/O operations

Android Skill Tree – Multi-process related summary

Android skill Tree – Drawable summary

Android Skill Tree – Fragment overview

Basic knowledge of data structures

Android Skill Tree – Array, linked list, hash table basic summary

Android Skill Tree — Basic Knowledge of The Tree

Basic knowledge of algorithms

Android Skill Tree – Sorting algorithm basics summary

Upper brain diagram:

Brain map download link

Drawable

Inherent height/width & size

We know that the most commonly used Drawable is probably an image. We know the original size of an image, such as this image:

The size is 64X64, we assign it to an ImageView as the background, and the ImageView is set to a large width and height:

 <ImageView       
      android:layout_width="300dp"
      android:layout_height="300dp"
      android:background="@drawable/back"/>
Copy the code

We can see that our image actually gets bigger, so the final image size is not necessarily its inherent width/height.

So for this image, its inherent height/width is the size of its original image, but when it is the background of our ImageView, it is stretched to the same size as the View. And for some Drawable that we draw ourselves, we don’t have a Drawable that has its own size. For example, if we write a red Drawable, it doesn’t have a fixed size, so getIntrinsicWidth/height will return -1.

Drawable classification

A single Drawable

BitmapDrawable:

For tile mode, for example, the arrow image above, we write the corresponding BitmapDrawable code:

<? xml version="1.0" encoding="utf-8"? > <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/back"
    android:tileMode="repeat"
    >
</bitmap>
Copy the code

  <ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/bitmapdrawable"/>

Copy the code

One thing to note here: remember to assign android:background, and if you’re used to it, you might assign the Android: SRC attribute to the ImageView, and it won’t work.

ShapeDrawable

We mainly pay attention to the following points:

1. When we set dashed lines to the stroke, android:dashWidth and Android :dashGap will not work as long as either of them is 0. Such as:

<? xml version="1.0" encoding="utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="30dp"
        android:dashWidth="40dp"/>
    
</shape>
Copy the code

We can see the effect:

2. Tag Settings: Define the distance between the content and the border.

<? xml version="1.0" encoding="utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="0dp"
        android:dashWidth="40dp"/>

    <padding android:left="130dp"
        />

    <solid android:color="@color/warning_stroke_color"/>

</shape>
Copy the code

<ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"     
        android:background="@drawable/bg"/>
Copy the code

And then we find out, “What hasn’t changed. But what we really want to know is how far the content is from the boundary. For example, let’s change this to TextView:

<TextView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="aaaaaaaaaaaaaaaaaaaa"
        android:background="@drawable/sdf"/>
Copy the code

3. What tags do: We know that images have their own inherent width/height, but shapebitmaps like this have no inherent width/height,getIntrinsicWidth/heightWe get -1, so if we set the label, we get the value that you set.

<size 
     android:width="100dp"
     android:height="100dp"/>
Copy the code

InsetDrawable:

You can embed other Drawable within yourself, and then set the distance around it.

For example, we can sometimes click the back button in the status bar, but the back button is a little too small, so we can set it directly, and sometimes the user can’t press the back button. One way is to make the width and height of the ImageView larger, and the other way is to use this InsetDrawable.

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/back"
    android:insetLeft="20dp"
    android:insetTop="20dp"
    android:insetRight="20dp"
    android:insetBottom="20dp"
    >

</inset>
Copy the code

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/insetdrawable"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/back"
        />

Copy the code

We can see what the back button looks like with InsetDrawable set and the return button image set directly:

ScaleDrawable:

The Drawable that can be scaled looks like this:

Android Drawable – Scale Drawable usage details

ClipDrawable:

The clipable Drawable looks like this:

See this article for examples: ClipDrawable makes development easier

Drawable collection

The Drawable set means that these drawables can hold multiple drawables, such as multiple image resources.

LayerDrawable

It is a hierarchical set of drawables, with different drawables placed on different layers to achieve the effect of stacking. And the item below overrides the item above.

Like the search box on this image:

We can do this using LayerDrawable, just by turning the middle magnifying glass and text into an image, for example

Then the background is:

<? xml version="1.0" encoding="utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners android:radius="20dp"/>
    <solid android:color="@color/colorWhite"/>
    
</shape>
Copy the code

Finally, use LayerDrawable:

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

    <item
        android:drawable="@drawable/search_bg"/>

    <item android:drawable="@drawable/search"
        android:right="60dp"
        android:left="60dp"
        android:top="10dp"
        android:bottom="10dp"
        />

</layer-list>
Copy the code

Effect picture:

For details, please refer to the following articles:

Android Drawable – Layer Drawable

Layer-list – Basic usage of layer-list

StateListDrawable

This is probably the one you use the most, usually on different buttons, what’s the background when you press it, what’s the background when you send it away, what’s the background when you’re not clickable.

Drawable subclass StateListDrawable (Drawable)

Here’s an extra note: The system looks up and selects the corresponding item from the selector list based on the state of the View from top to bottom, so the default item is the last one, so if none of the above matches, it will match the default item, because the default item doesn’t have any state attached to it, it can match any state of the View

LevelListDrawable

This is a bit like StateListDrawable, which uses different graphs at different levels. The difference is that it is determined by the Level range set for each item.

TransitionDrawable

It is used to fade in and out between two Drawable. It is easy to think of animation to do this, but it is found that using animation, but when calling statAnimation, because the image is already displayed, playing the animation again will actually cause a subtle flicker effect. This can be done using TransitionDrawable.

The following effects:

Specific can refer to the article: [how to use TransitionDrawable implement switch background gradient effect] (blog.csdn.net/u011043551/…).

conclusion

It’s pretty basic stuff. But think of it as a summary.

PS: Refer to the Art of Android Development for Drawable content.