Want to make your Android more unique? Try DIYing an icon pack

As we all know, one of the characteristics of Android is that it provides users with relatively greater freedom, which has become one of the reasons why many smartphone enthusiasts choose Android. You know, in terms of personalization, Android users can change application icons, system colors, fonts, themes, desktop widgets, and even the entire desktop launcher in addition to changing wallpapers and ringtones.

[[222971]]

With so many customization options, every Android phone can have a thousand faces to reflect your own personality.

Well, if you have studied how to personalize Android before, you must have heard of the concept of "icon pack". Generally speaking, icon packs on Android refer to some custom icon collection packages suitable for some third-party launchers, usually installed as an APK.

But these Android icon packs are publicly available for download. Friends with good hands-on skills may feel that they are not personalized enough and want to draw a set by themselves; some people like the icons in other ROM themes and want to use them on their own launchers...

The question is, is it possible to DIY an icon pack by yourself? If you have this idea, congratulations, this article is prepared for you.

What is NanoIconPack?

NanoIconPack is a simple and lightweight icon pack template developed by Chinese By_syk and open sourced under the Apache License Version 2.0. Anyone can redevelop an icon pack based on this template.

This template doesn't have many functions, but it is simple and practical, with a user-friendly interface and high compatibility. In addition to the "old three" Nova, Apex and ADW, it also supports various other launchers that follow the icon pack specifications.

There are already many icon packages that are developed based on NanoIconPack, including PDC icon package, Cardicons Ⅱ icon package, etc. If you also want to draw icons and package them yourself, then choosing to develop based on NanoIconPack is a very good choice.

In theory, it is best to have a certain foundation in Android development for secondary development of NanoIconPack; but if you have never been exposed to programming, it doesn’t matter. Just follow the steps described in this article, be bold and careful, and you can also create an icon pack of your own.

Prepare Icon

Since you want to make an icon pack, preparing icons is a hard condition. You can choose to draw a set of icons yourself, or extract them from theme files of other ROMs (such as MIUI).

It should be noted that although there is no hard and fast rule for the icon size, the best size is 192*192 px, which is also the default size of xxxhdpi resolution icons on Android. It is also possible to have a larger size, but it should not be too large, otherwise it may affect the normal display of the launcher.

The naming of icons is also a little bit particular. Developer By_syk gave the following naming rules on the Wiki:

• Icon file names (excluding the .png extension) should only use lowercase letters + numbers + underscores ([az\d_]+)
• Do not use leading numbers (\D.*)
• If the name is duplicated, add a suffix of underscore and number (_1)
• To avoid conflicts with the previous naming rule, do not use underscores to separate letters and numbers in the application name. For example, Camera 360 should be named camera360 instead of camera_360.png

Correct example:

• cuto.png chrome_dev.png camera_1.png
• Wrong example: Calendar.png 500px.png camera_360.png

Because there are already placeholders in the template file, I suggest naming several commonly used system icons as follows to save some work:

• calculator
• Calendar
• Camera
• Clock - clock
• Contacts - contacts
• Email
• Gallery
• Music
• Phone
• Settings
• Text messages - sms

Once you are ready, save them to a folder for later use.

This article will use icons extracted from the MIUI "Aotu World" theme file as examples. Icon original author: hynick

Install Android Studio and SDK tools & register a GitHub account

In order to continue the development work, you need to install an Android Studio and the corresponding SDK tool package.

Please be aware that during the installation process you may encounter errors that require network environment adjustments to resolve. Please search the Internet for relevant tutorials to resolve them.

The relevant installation process will not be described in detail in this article.

At the same time, if you don't have a GitHub account before, you need to register a new one. Registering a GitHub account is very simple. Click Sign Up and enter the corresponding information as prompted. I won't discuss it in detail here.

Import the project into Android Studio

After everything is ready, open Android Studio, find the File option in the upper right corner, and select New → Project from Version Control → GitHub:

Then the Clone Repository window will pop up, as shown in the figure, fill in https://github.com/by-syk/NanoIconPack.git in the URL (you can click the Test button to test whether it can be accessed normally), change the Directory Name to the name you gave to the icon package, and click Clone.

If you have not logged in to Android Studio with a GitHub account before, you will be prompted to log in to GitHub. Follow the prompts to log in normally and perform the above steps.

Next, you need to wait patiently for the Cloning operation to complete.

Once completed, Android Studio will automatically display the project interface:

The left side of the interface shows the folders and files of the project, where /nanoiconpack is the library code and /app is the application code. The following content basically only involves the modification of the application code, that is, the /app directory.

Add Icon

It’s time to add icons to the template. Find the /res/drawable directory under /app, right-click it, and select the “Show in Explorer” option. The res folder should be displayed. Double-click to open drawable-nodpi:

At this time, delete all the files inside, and then copy the icons prepared previously into it.

If you have prepared large-size icon samples of 384*384 px, you can return to the previous directory and copy those icons to the mipmap-nodpi folder, which will automatically display high-definition icons in the icon pack application. However, these icons are only used for display and will not be used in the launcher.

Next, find icon_pack.xml under /res/drawable/values ​​in Android Studio. It contains two icon_pack.xml files, one with the Chinese flag icon as the simplified Chinese localization version.

The function of this file is to record the icon file names contained in the icon pack and the application names corresponding to the icon files. Take the values\icon_pack.xml file as an example, the first part is the icon file name:

 <! -- File name (no suffix) list of all icons in /res/drawable-nodpi/ -->  
 <! -- Names like "Calendar", "500px", "camera_360" are not allowed or recommended. -->  
 <string-array name = "icons" translatable= "false" >
 <! -- A -->  
 <item>alipay</item>
    <item>amazon_kindle</item>
 <item>autonavi</item>

The second part is the English application name corresponding to each icon file:

 <! -- Corresponding app name list of all icons in /res/drawable-nodpi/ -->  
 <string-array name = "icon_labels" >
 <! -- A -->  
 <item>Alipay</item>
    <item>Amazon Kindle</item>
    <item>Autonavi Maps</item>

Please remember that there must be a one-to-one correspondence between each icon file name and the application name. In other words, you cannot have a file name with some application names and some not. Although you can choose not to write any application names, I do not recommend doing so.

After editing, you can open the zh\icon_pack.xml file with the national flag. This section is used to fill in the Chinese application name:

 <! -- Corresponding app name list of all icons in /res/drawable-nodpi/ -->  
 <string-array name = "icon_labels" >
 <! -- A -->  
 <item>Alipay</item>
 <item>Amazon Kindle</item>
 <item>Amap</item>

From now on, icon_pack.xml modification is complete. The next thing to modify is drawable.xml, which is located in the /res/xml directory:

What is the purpose of this file? You can browse the icon pack directly in Nova Launcher, and you will find that it can also display icons in different categories:

The credit behind this feature is drawable.xml: it is used to provide icon selection lists to launchers such as Nova Launcher, and tell the launcher which icons belong to which type.

The NanoIconPack template provides three different categories by default. If you find it troublesome, you can edit based on these three categories. The first category "Basic" contains some placeholders:

 <category title= "Basic" /><! -- Copy basic icons here from All category -->  
 <! --<item drawable="browser" />-->  
 <! --<item drawable="calculator" />-->  
 <item drawable= "calendar" />
 <! --<item drawable="camera" />-->  
 <! --<item drawable="clock" />-->  

You may have noticed that item drawable= is followed by the file name of each icon. So, be careful not to make a mistake.

If you followed my advice above (naming common system application icon file names), all you need to do now is to delete the beginning of the placeholder. Like this:

 <category title= "Basic" /><! -- Copy basic icons here from All category -->  
 <item drawable= "browser" />
 <item drawable= "calculator" />
 <item drawable= "calendar" />
 <item drawable= "camera" />
 <item drawable= "clock" />

Then, you can fill in the remaining two categories "Game" and "Alternative" or not. If you don't want to fill them in, just delete them. But the "All" category at the end must be filled in. Fill in all the files of the icon package like this:

After filling in the form, the work on this file is also finished. Finally, we need to find the appfilter.xml file which is also located in the /res/xml directory like drawable.xml.

Don't underestimate it, this file is very important! It determines the correspondence between each icon and the program. In other words, because of its existence, the launcher can automatically identify the adapted applications in the icon pack and overlay the icons on each application.

This file consists of many lines of code, and the structure of a line of code is roughly as follows:

 <item
 component = "ComponentInfo{[package name]/[startup Acrivity name]}"   
 drawable= "[icon file name]" />

The application package name is the unique identifier of each Android application. The system judges and identifies the application based on the package name. Even if an application changes its name, as long as the package name is the same, the system will consider them to be the same application.

For example: One day, the Cuto wallpaper I created suddenly decided to change the name of the app to Otuc, and the icon was also changed.

But when installing Otuc, since I didn't change the package name when I changed the name, the system still determined that "Otuc" and "Cuto" were the same application, and would directly update the old application instead of reinstalling a new one.

Another "launch activity" is a more complicated concept. Simply put, it determines which page the application will open when you click the icon on the launcher.

Therefore, these two elements are the key to distinguishing applications in icon packs; and this also allows different applications to use the same icon file.

For example, on a Google Pixel, the adaptation code for the "Camera" app looks like this:

 <item
    component= "ComponentInfo{com.google.android.GoogleCamera/com.android.camera.CameraLauncher}"  
 drawable= "camera" />

For OnePlus phones, the adaptation code will become:

 <item
    component= "ComponentInfo{com.oneplus.camera/com.oneplus.camera.OPCameraActivity}"  
 drawable= "camera" />

Did you see it? Due to different mobile phone manufacturers, the package name and startup Activity of the "Camera" application are different; but in this way, they can all call the camera.png file in the icon package.

So, the question arises again: where can we find these package names and start the Activity? After all, for these basic applications, each mobile phone manufacturer may be different, and the workload is still quite large.

Fortunately, the developer By_syk has provided us with a template file worthy of reference, which already contains the codes of many system applications and common applications. Just find the applications included in your own icon package and then copy and paste them.

But what if the application you want to adapt does not exist in the template? At this time, you need to use the Package Name Viewer 2.0 tool.

The gadget will divide the installed apps in your phone into two categories: user apps and system apps. You can choose to search manually or by searching. Let's use Cuto as an example. After finding Cuto in the list, click it and you will see this window:

The com.sspai.cuto.android at the top is the package name, and the com.sspai.cuto.android.EntryActivity at the bottom is the startup Activity. You can choose to copy and send it to your computer, and fill in the code according to the instructions above.

At this point, the part of adding icons is over. The specific workload of this part depends on how many icons you want to adapt, but it is also the most troublesome part, and you need a certain amount of patience to edit the file.

Fortunately, after finishing this part, the icon package is almost complete, and the next work is very simple.

Configure Icon Pack

As mentioned above, the Android system needs to identify the application according to the application package name, so you also need to give your icon package a package name and set a version number for it.

Find the Gradle Scripts option on the left and double-click to open build.gradle (Module: app):

Then find the defaultConfig area in the file. The applicationId is the package name:

The package name can refer to the following template: com.[your name].iconpack.[name of the icon package] (only English letters can be used).

versionCode and versionName are both part of the version number. The former can be understood as the "internal version number", and the latter is the version number displayed on the foreground. You can set it according to your own ideas.

Also note that if you want your icon pack to be backward compatible (minimum Android 5.0), you need to fill in minSdkVersion and targetSdkVersion.

The latter can be filled with the latest SDK version (Android 8.1, API Level 27), while the former determines the lowest version of the system on which the application can be installed. It is recommended to fill in 21, which represents Android 5.0.

Since an icon pack is also an app, you obviously need an icon for it - four, to be exact.

There are four icons because the application icon file ic_launcher.png is distributed in the four directories /mipmap-hdpi, /mipmap-xhdpi, /mipmap-xxhdpi, and /mipmap-xxxhdpi. They represent four different resolutions: 72*72, 96*96, 144*144, and 192*192.

But this is not a big deal. Just make an icon with the maximum resolution, and then scale and save them separately.

Next, back to the Android Studio project, we need to edit strings.xml under /res/values.

This file is used to determine the name of the icon pack, the author, and the content displayed in the icon pack's "About" interface.

The app_name field is used to fill in the name of the icon package, and the developer_name field is used to fill in your own name.

The content below the file will be displayed in the "About" interface. NanoIconPack comes with a lot of content placeholders by default, including the author of the icon pack, donation information, etc. If you don't need to display a certain information, you can leave it blank, but don't delete it.

This file, like icon_pack.xml, also has a zh\ version with the national flag (as shown above), so remember to compile it together. The final effect presented in the application is like this:

Information allows line breaks, but you need to use \n as a line break. In addition, some specific symbols (such as ©️ for copyright) need to be replaced with codes. Please pay attention to the error message prompted by Android Studio.

NanoIconPack can also edit the theme color of the icon pack application. The relevant file is colors.xml located under /res/values:

If you are not familiar with color codes and matching, you can try to select two colors that look good on the Material Palette website, and it will automatically generate a matching plan for you.

The specific effects are as follows:

At this point, the development of the icon pack is almost complete, and the only thing left to do is testing and packaging!

Testing and packaging

Everything is ready, just need to be packaged; you can use your DIY icon pack in no time!

However, before packaging, it is best to test it on the device to see if there are any problems. First, make sure that the developer options are enabled on the Android device and the USB debugging function is enabled.

Then click the Run button on Android Studio, and a window will pop up, allowing you to select the device connected to your computer:

Next, click OK. If everything goes well, you will find that the icon pack application is automatically opened on the device. After confirming that it is correct, you can package it into an APK installation package.

In Android Studios, go to Build → Generate Signed APK:

This option is used to generate a signed APK installation package. As for how to do it, it is recommended to refer to Google's official documentation.

The only thing you need to pay attention to is the last step. Be sure to check V1 in Versions, otherwise the installation may fail:

Of course, errors may occur when generating the installation package. The specific error message will be displayed in the Messages at the bottom. Please make good use of search engines. There will definitely be solutions on the Internet.

OK, your DIY icon pack is now officially packaged! Go and try it on the launcher!