Hello everyone, it is now 2018, and the Android 8.0 system has gradually begun to become popular. Samsung's latest flagship Galaxy S9 launched this year is already equipped with the Android 8.0 system, followed by the upcoming new year flagships of Xiaomi, Huawei, OV and other domestic mobile phone manufacturers will also be equipped with the Android 8.0 system. Therefore, it is time to adapt our application to Android 8.0.
In fact, when the Android 8.0 system was first launched last year, I carefully read Google's official function change document. There are quite a few changes, but there are not many places where we really need to make functional adaptations. To sum up, there are two main places that need to be adapted: the application icon and the notification bar. Then we will divide it into two parts to explain the adaptation of these two functions, starting with the application icon.
Why apply icon adaptation?
Some friends may be confused. The application icon has been around since the ancient times of Android, and the function is extraordinarily simple, just put a picture, what is there to adapt to it? But in fact, in the current Android environment, the application icon function is extremely confusing.
If we want to talk about the history of mobile application icons, we should start with Apple. In the 1980s, when Apple was still designing the Lisa and Macintosh computers, Jobs was an avid proponent of the rounded rectangle. At that time, Apple's engineers wrote a brilliant algorithm that could draw circles and ellipses on the computer. All the viewers were shocked, except Jobs, because Jobs thought that although circles and ellipses were not bad, if they could draw circles and ellipses A rectangle with rounded corners is even better. At that time, the engineer felt that this was impossible, and there was no need for a rounded rectangle at all, and it could meet the basic drawing needs. Jobs angrily dragged him down 3 streets, pointing out various examples of applying rounded rectangles on the street, and finally the engineer made the function of drawing rounded rectangles the next day.
So when the iPhone was born in 2007, it was no surprise that all app icons used rounded rectangle icons, and even third-party apps were mandated to use rounded rectangle icons, and this rule has always been Continued into today's iOS 11, as shown below:
On the contrary, the Android system does not like Apple's closure and coercion when it is designed, but chooses freedom and openness, and does not impose any mandatory requirements on the shape of the application icon, and developers can freely choose:
It can be seen that on Android, the application icon can be a square, a circle, a rounded rectangle, or any other irregular shape.
Originally, the two companies have different design concepts, and it is impossible to say which is better. However, since the Android operating system is open source, some domestic mobile phone manufacturers have changed this feature when customizing the operating system. For example, Xiaomi mobile phones have chosen to move closer to Apple and force application icons to be rounded. What if the icons of some apps are not rounded rectangles? The Xiaomi system will automatically add a rounded corner effect to it, as shown below:
Xiaomi's approach seems to be learning from Apple, but it's actually quite disgusting. Because everyone can see that this automatically added rounded rectangle is very ugly, so many companies simply design the application icons as rounded rectangles. It happens that both Android and iOS use the same set of icons to save trouble.
But this makes Google unhappy. Isn't this change to force developers to design icons into rounded rectangles? So at last year's Google I/O conference, Google named and criticized Xiaomi's approach, saying that it violated the concept of Android's freedom and openness.
In addition to the mandatory requirement to round the corners of the application icons when changing directions, this method of Xiaomi has a disadvantage, that is, if the rounded corners of the application icons are different from those required by the Xiaomi system, there will be abnormally ugly effects:
Seeing such an app icon is really embarrassing. Just because the rounded radians of these two application icons are designed to be larger than the rounded radians required by the Xiaomi system, such ugly white borders are automatically added.
The problem is already there, so how should it be solved? To be honest, this is indeed a long-standing headache, and Google has turned a blind eye to it for many years. Finally, in the Android 8.0 system, Google is determined to rectify the standardization of Android application icons. Today we will learn about it.
8.0 system application icon adaptation
This problem is still quite difficult for Google to solve. Because Google has been emphasizing freedom and openness, Xiaomi's mandatory requirement that all app icons have rounded corners is also their freedom. Do you not allow others to do this, does it violate the concept of freedom and openness in itself? Of course we're discussing this here, and it's a bit like a chicken-and-egg debate, but Google has come up with a perfect solution.
Starting from the Android 8.0 system, the icon of the application is divided into two layers: the foreground layer and the background layer. That is to say, when we design the application icon, we need to separate the foreground and background parts, the foreground is used to display the logo of the application icon, and the background is used to set off the logo of the application icon. It should be noted that the background layer is only allowed to define colors and textures at design time, but not shapes.
So who defines the shape of the app icon? Google will give this right to mobile phone manufacturers. Don't some mobile phone manufacturers like to learn Apple's rounded icons? No problem, because the design of the application icon is divided into two layers, the mobile phone manufacturer only needs to cover a layer of mask on top of the two layers. This mask can be a rounded rectangle, a circle or a square, etc., depending on the specific mobile phone manufacturer. You can instantly make all app icons on your phone the same specification. The schematic diagram is as follows:
It can be seen that the background layer is a blue grid image, the foreground layer is an Android robot logo image, and then a circular mask is covered, and finally a circular application icon is cut out.
Do I have to fit in?
Some friends may think that this two-layer application icon design is too cumbersome, can it not be adapted? Some friends may also say that their APP has not been adapted to the application icon, and it still runs well on Android 8.0 mobile phones.
In fact, this new feature Google is preparing to make it a gradual transition, rather than force it to all developers at once. If the targetSdkVersion in your APP is lower than 26, then you do not need to adapt the application icon, and the Android 8.0 system is still backward compatible. But if you specify targetSdkVersion to 26 or higher, then the Android system will think that your APP has been adapted to the 8.0 system, including the adaptation of the app icon of course.
If you specify targetSdkVersion to 26, but do not adapt the application icon of the Android 8.0 system, what will happen? Here are some negative examples:
This is a screenshot from a Google Pixel phone, the operating system is Android 8.0. It can be seen that the icons of these two applications are very strange. They were originally designed as rounded rectangle icons, but they were covered with a white circle. Why does this happen? It is because these two applications have specified targetSdkVersion above 26, but they have not done the application icon adaptation of the 8.0 system, and the mask set by the Pixel phone is round, so it is automatically set on the outer layer of the application icon. A white circle.
It can be seen that the two apps, iQiyi and Ele.me, have not been tested for compatibility on the Pixel. However, considering that they only provide services in the domestic market, it is also excusable.
Of course, domestic Android 8.0 mobile phones will soon become popular. I believe that no one will want their own APP to have the above effect, so let's start to learn how to adapt the application icon of the 8.0 system. .
create a new project
If someone asks me, is it difficult to adapt the 8.0 system application icons? I will answer here, it is not difficult at all. I believe that everyone who reads this article will learn it right away, but the premise is that you need a good tool - Android Studio 3.0 or higher.
I'm glad to tell you that Android Studio 3.0 has built-in 8.0 system application icon adaptation function. If you have installed Android Studio 3.0, then congratulations, you have succeeded 90%. If you are still using the old version of Android Studio, then go and upgrade it, and then continue to read this article.
Ok, so now we use Android Studio 3.0 to create a new project, let's call it IconTest.
After creating the project, open the app/build.gradle file and check that the targetSdkVersion has been specified to 26 or higher, as shown below:
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
defaultConfig {
applicationId "com.example.icontest"
minSdkVersion 15
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
}As you can see, when I create a new project, the default targetSdkVersion is 26. If you are lower than 26, it means that your Android SDK is a bit old, and it is best to update it. Of course, it doesn't matter if you are too lazy to update, you can manually change it to 26.
Next open the AndroidManifest.xml file, the code is as follows:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.icontest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>The point we need to pay attention to here is the android:icon attribute. Through this attribute, we specify the icon of the application as the ic_launcher file in the mipmap directory. In addition, you may have noticed that there is also an android:roundIcon attribute, which is a transition version only applicable to the Android 7.1 system, and will soon be replaced by the application icon adaptation of the 8.0 system, we don't need to care about it.
As I said just now, the application icon is designated as the ic_launcher file in the mipmap directory, so let's take a look at this file:
Although there are many directories here, I believe that any Android developer who has entered the door can understand it. The only thing we need to pay attention to is the mipmap-anydpi-v26 directory. What does this directory mean? That is, mobile phones with Android 8.0 or above systems will use the ic_launcher in this directory as the icon.
You will find that the ic_launcher in the mipmap-anydpi-v26 directory is not a picture, but an XML file. Let's open this file and take a look. The code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background" />
<foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>This is a standard notation for 8.0 system application icon adaptation. In the <adaptive-icon> tag, define a <background> tag to specify the background layer of the icon, and define a <foreground> tag to specify the foreground layer of the icon.
Then let's take a look at the content of the background layer and the foreground layer respectively. First open the ic_launcher_background file, as shown in the following figure:
这是一个使用SVG格式绘制出来的带纹理的底图。当然如果你看不懂这里面的代码也没有关系，因为我也看不懂。SVG格式的图片都是使用AI、PS等图像编辑软件制作之后导出的，基本没有人可以手工编写SVG图片。
当然，背景层并不是一定要用SVG格式的图片，你也可以使用普通的PNG、JPG等格式的图片，甚至是直接指定一个背景色都可以。
看完了背景层接着我们来看前景层，打开ic_launcher_foreground文件，内容如下所示：
类似地，这里也是使用SVG格式绘制出了一个Android机器人的Logo，并且这个机器人还是带投影效果的。当然了，前景层我们也是可以使用PNG、JPG等格式的图片的，待会儿会进行演示。
好的，现在已经把应用图标相关部分的代码都解释完了，那么这样一个刚刚创建完成的空项目运行起来到底会是什么样的效果呢？我们跑一下看看就知道了，如下图所示：
可以看到，这就是一个前景层盖在背景层上，然后再被圆形mask进行裁剪之后的效果。
好的，那么现在剩下的问题就是，我们如何才能对自己的应用图标在Android 8.0系统上进行适配？
开始适配
看到爱奇艺的8.0系统应用图标适配工作做得这么差，我就准备拿爱奇艺来做为例子了，我们一起来帮爱奇艺的Android版做个漂亮的应用图标适配吧。
那么很显然，根据8.0系统的应用图标设计，我们需要准备一个前景层和一个背景层才行。
前景层也就是爱奇艺的Logo了，这里我通过Photoshop把爱奇艺的Logo图取了出来。
由于这是一张背景透明的图片，如果直接贴到文章里面就一片白色，啥也看不见了，于是我只好在文章里贴了一张带灰色背景的图片。如果大家需要获取爱奇艺这张前景图的原图，可以点击 这里 获取。
解决了前景层，接下来我们来看背景层。其实背景层比前景层就简单多了，一般如果没有什么特殊需求的话，背景层直接使用某种纯色就可以了。
这里我用Photoshop吸取了一下爱奇艺原始应用图标的背景色，值是#04ca00。当然，爱奇艺的背景色并不是完全的纯色，而是有细微的颜色渐变的。不过这里我们只是举例讲解而已，就不追究这些细节了。
那么现在前景层和背景层都准备好了，接下来我们正式开始进行8.0系统的应用图标适配。重新回到IconTest项目当中，然后按下Windows：Ctrl+Shift+A / Mac：command+shft+A 快捷键，并输入Image Asset，如下所示：
点击回车键打开Asset Studio编辑器，在这里就可以进行应用图标适配了。
这个Asset Studio编辑器非常简单好用，一学就会。左边是操作区域，右边是预览区域。
先来看操作区域，第一行的Icon Type保持默认就可以了，表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称，这里也保持默认即可。接下来的三个页签，Foreground Layer用于编辑前景层，Background Layer用于编辑背景层，Legacy用于编辑老版本系统的图标。
再来看预览区域，这个就十分简单了，用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状，包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈，这个圆圈叫作安全区域，必须要保证图标的前景层完全处于安全区域当中才行，否则可能会出现图标被手机厂商的mask裁剪掉的情况。
为了让大家能够更加直观地看到操作，这里我使用一张GIF图来演示操作的过程：
最终，Android Studio会自动帮我们生成适配8.0系统的应用图标，以及适配老版本系统的应用图标，我们甚至一行代码都不用写，一切工作就已经完成了。感兴趣的朋友可以自己到mipmap目录下面去观察一下Android Studio帮我们生成了哪些东西，这里就不带着大家一一去看了。
最后，让我们来运行一下程序，并且和正版爱奇艺的应用图标放在一起对比一下吧：
可以看到，做过8.0系统应用图标适配之后，效果明显要好看太多了，也希望爱奇艺的官方APP也能早日完成适配吧。
好了，今天这篇文章就到这里，相信大家都已经轻松掌握了Android 8.0系统的应用图标适配，下篇文章会讲解Android 8.0系统的通知栏适配，感兴趣的朋友请继续阅读 Android通知栏微技巧，8.0系统中通知栏的适配 。
文章转载自sinyu890807