How to use Android image resources to create a more sophisticated APP

Preface

Due to the openness of the Android system and the relative closedness of IOS, it is currently impossible for third-party devices to use Apple's OS. Therefore, various manufacturers have embraced Android.

The Android camp is becoming more and more powerful. Today, the mobile operating system is dominated by Android and iOS. It is precisely because of the openness of Android and its high degree of customization that Android devices of various screen sizes and resolutions are available.

It is covered with various application scenarios such as mobile phones, tablets, smart TVs, watches, boxes, smart hardware, etc.

As a programmer with a sense of style, it will take a lot of effort to create an app that works across so many sizes and resolutions.

drawable-xxx resource folder

Fortunately, Google has already thought of a solution for us and provides different drawable resources for different resolutions.

Let's first look at the WeChat Android client and see how it uses image resources.

In the res directory, folders starting with drawable account for more than half, followed by folders such as -hdpi, -land, -mdpi, -xhdpi... to adapt to models with different resolutions.

Some people may say that when developing applications, you only need to adapt to hdpi or xhdpi, and it can be displayed just the same! Why do we have so many versions, wasting space and causing trouble?

If this is your idea, it can only mean that your app's audience has not reached a certain level, or that you do not pursue perfection in details. For high-end apps, even the loss of a pixel is imperfect.

After all this nonsense, let's first look at Google's official definition of DP

Density-independent pixel (dip)

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

Density-independent pixel (dp)

A virtual unit used to determine the UI layout. Used to express the size or position of the layout.

dp is a unit related to screen density. The conversion relationship between dp and pixel is px = dp * (dpi / 160). For example, on a screen with a density of 240 (dpi), one dp is equal to 1.5 pixels. In the future, we should try to use dp units for layout instead of pixels. This will make your app more compatible with screens.

Put the same 96x96 pixel png image into hdpi, xhdpi, and xxhdpi folders respectively, and display the width and height with wrap_content

 ![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-b929ae8b-ace3-4e8d-ad2d-5cb311738b04.jpg)
 As you can see, resource images adapted to lower drawable-dpi have a relatively large display size, but poor clarity. Images adapted to higher dpi have a relatively small display size, but high sharpness and are clearer!

Place pictures of 72x72, 96x96, and 144x144 pixels in the hdpi xhdpi xxhdpi folders respectively, and use wrap_content to display the width and height.

 ![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-bd311903-f4f9-4a40-baf5-0e8eaaf03e9d.jpg)
 It can be seen that pictures of different sizes, placed in different resource folders, are actually the same size when displayed on the screen! However, the picture corresponding to 144x144 pixels is displayed the most delicately and clearly.

At this point, you should be able to see the relationship between image resources and drawable folders. Even if you don't use high-quality images, you can still display them on a high-resolution screen, but at the expense of the fineness of the control display. The higher the screen dpi, the less clear the display. If a high-resolution photo is placed under an inappropriate drawable, it cannot accurately restore the proper size and clarity.

Compared with IOS's definition of images, 2x images have -xhdpi density, and 3x images have -xxhdpi density.

Therefore, if you want to make the icons in your application appear more refined, you need to configure pictures with different pixels accordingly.

Use wrap_content instead of dp

Many people specify the size of icons when dealing with images, such as:

 <ImageView
          android:layout_width= "45dp"  
          android:layout_height= "45dp"  
          android:src= "@drawable/icon_hdpi" />

Wrap_content can be understood as wrapping content. When the control is set to wrap_content, it will be displayed according to the actual size. Compared with the way of directly setting dip, there will be more or less scaling in the display of the picture. This will also cause the icon to be displayed less delicately.

 <ImageView
         android:layout_width= "wrap_content"  
         android:layout_height= "wrap_content"  
         android:src= "@drawable/voip_camerachat_xhdpi" />

The following is a comparison of the commonly used tabbar in applications: (screenshot at 1920x1080 screen pixels)

Figure 1

[[175411]]

Figure 2

[[175412]]

The icons in Figure 1 are all set to a fixed size of 24dp, and the images are only adapted in drawable-xhdpi. It can be seen that the images are stretched to varying degrees, and the icons appear blurry.

Figure 2 sets the icon width and height to wrap_content and adapts it in drawable-xxhdpi. The icon in Figure 2 has improved sharpness. Because of the setting of wrap_content attribute, the icon images are of different sizes, resulting in inconsistent icon display sizes. Therefore, the perfect solution is to require the UI to provide large images of uniform size and adapt them to drawable-xxhdpi.

Compared with WeChat's high-definition picture resources, the exquisite effect displayed is:

[[175413]]

SVG

Scalable Vector Graphics

In Android 5.0 (API level 21) and higher, you can define vector images that can be scaled without losing clarity. You only need one asset file to create a vector image, while bitmap images require an asset file for each screen density. To create a vector image, define the shape details in a <vector> XML element.

The following example defines a vector image:

In the drawable folder --> new --> vector Asset

You can select Material Icon to use the icon resources built into the studio. Here, Local SVG file is selected to use the SVG file you defined.

Determine the location to save the file. The svg file will be exported as an xml file:

The generated moon.xml content is as follows. The fillColor attribute under the path node can customize the color value.

 <vector xmlns:android= "http://schemas.android.com/apk/res/android"  
 android:width= "24dp"  
 android:height= "24dp"  
    android:viewportHeight= "22.0"  
    android:viewportWidth= "22.0" >
 <path
        android:fillColor= "#FF000000"  
        android:pathData= "M16,10l0.8,-3.2L20,6l-3.2,-0.8L16,2l-0.8,3.2L12,6l3.2,0.8L16,10zM6,8c0,-2.17 0.867,-4.134 2.269,-5.575C4.634,3.581 2,6.982 2,11c0,4.971 4.029,9 9,9c4.018,0 7.419,-2.634 8.575,-6.269C18.134,15.133 16.17,16 14,16C9.582,16 6,12.418 6,8z" />
 </vector>

The layout uses the same method as normal images.

 <ImageView
         android:layout_width= "40dp"  
         android:layout_height= "40dp"  
         android:src= "@drawable/moon" />

Interface display effect:

[[175414]]

The width and height of the control can be set arbitrarily in dp without affecting the clarity.

In addition to being used in vector images, SVG can also be used on Android to display exquisite animation effects.

I will give a more detailed introduction to the generation and use of SVG when I have time.