“This is the 14th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

I did a lot of projects and found that there were a lot of similar ICONS in each project, such as one for each color, one for each Angle (left arrow, right arrow), etc., although these ICONS were small and did not occupy too many resources. However, when we need change, we have to replace it one by one. In fact, there are many tips in Android to reuse these resources, reduce the volume and make the project structure clearer.

Here is a summary of some of the more common reuse, including expansion: adaptive, color change, rotation, shadow, composition, transparency, cropping, white and so on

SVG vector diagram

Since Android 5.0, Android has started to support SVG vectors, which are vectors of drawable.

The advantage of using vector images is that you don’t have to provide different slices for different resolutions, and you can ensure clarity.

In Android Studio, you can create a built-in SVG Vector image by right-clicking the Drawable directory and selecting New-Vector Asset, or import it from an SVG or PSD file.

Here is an example:

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M20.5, 3 l - 0.16, and 0.03 L15, 5.1 9, 3.36, 4.9-0.21 c, 0.07-0.36, 0.25, 0.36, 0.48 V20.5 c0, 0.28, 0.22, 0.5 0.03 to 0.5, 0.5 l0.16, L9, l6 18.9, 2.1, 5.64, 1.9 c0.21, 0.07 0.36, 0.25, 0.36-0.48 V3.5 c0, 0.28-0.22, 0.5 0.5, 0.5 zM15, 19 l - 6-2.11 V5l6 V19z 2.11."/>
</vector>
Copy the code

Including the width, height and color of the image, the most important is path, which is the path of the SVG image. If you know the relevant syntax, you can even write it by hand.

discoloration

Color change is coloring, in android5.0 version Google tint shader, can be very convenient to color the picture.

(android5.0 also added the corresponding color Palette, which can dynamically pick color from the bitmap and set it to other components, so as to achieve the effect of the page changing color with the picture)

Such as

<ImageView
    .
    android:src="@mipmap/ic_launcher"
    android:tint="#FFF" />
Copy the code

This will make the image white.

But sometimes we need to use drawable in other XML resources, such as style. For example, we want to use a black arrow, but we only have a white arrow, and then we don’t have tint.

We can use the bitmap tag to create a new resource XML under drawable as follows:

      

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

     android:src="@drawable/white_arrow"

     android:tint="# 000000">

</bitmap>\

Copy the code

Then use the drawable, but note that you cannot use an SVG vector, or VectorDrawable.

rotating

Let’s say we have a left arrow, and we need a right arrow.

One way to do this is to set the Android: Rotation property in the view

<ImageView
    .
    android:src="@mipmap/ic_launcher"
    android:rotation="90" />
Copy the code

The rotate TAB can be used to create a new XML resource under drawable as follows:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/fit">
</rotate>
Copy the code

You can use SVG vector diagrams here

shadow

Sometimes we have one image, but it may or may not need a shadow for different scenes, and even the size of the shadow may not be the same.

In android5.0 and above, we can directly set the view elevation, such as:

<ImageView
    .
    android:elevation="3dp"
    android:src="@drawable/fit"/>
Copy the code

This is the concept of Google’s new layer, the Z-axis, where an elevation that elevates a component will automatically add shadows.

combination

Sometimes we have a resource that is a combination of several other resources, and there is no need to cut the combined graph again.

You can use layer-list, set the position, rotate it, and so on.

For example:

      
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="12dp"
        android:height="12dp">
        <shape android:shape="oval">
            <solid android:color="#009bfa" />
        </shape>
    </item>
    <item
        android:width="6dp"
        android:height="6dp"
        android:gravity="center">
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
        </shape>
    </item>
</layer-list>
Copy the code

We use two shapes to achieve a target-like effect.

transparency

Also use bitmap tags, familiar with setting transparency through Android: Alpha.

tailoring

You can use the Clip tag of Drawable. Note that the clipped image retains the original size, but the clipped content occupies part of the image

White space

Using the drawable inset tag, you can add white space in each direction of the resource to achieve a padding-like effect. The following is an example:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/voice_icon_32x30"
    android:inset="4dp">
</inset>
Copy the code