Published on | Prototyping: From UX to Front End — Medium Lumiq Creative

Welcome to this step-by-step tutorial, which will teach you how to create your first Android icon pack app with little or no knowledge about coding and Android development. Let’s begin!

We recommend reading through the article two times — once before starting work on the app, and once again, whilst working on it. This will help you get a hold of things quicker, while also reducing the risk of making a mistake during the process. Good luck!

Setting Up The Software

You’ll need two pieces of software to create your icon pack — Android Studio and Java SE Development Kit. Click on the names of the programs to download them for Windows, Mac, or Linux. Both have simple setup wizards, so we won’t be going into how to get them set up. Simply download the executables, click on them, and follow the instructions that appear on your screen. Both programs can take some time to install, especially if you’ve got a weak internet connection, so be patient and wait for everything to finish.

Downloading The Dashboard’s Code

To make stuff simple, we will be using the free and open-source icon pack dashboard — Polar. While there are other dashboards available, such as IconShowcase and CandyBar, Polar is the easiest to set up, so we will be focusing on it in this tutorial. However, once you’ve got a hold of the basics, it won’t be hard for you to use the other available dashboards.

Click on the green button to download the code

Polar Dashboard is available for free on GitHub here, so head over to that page, click on the green Clone or download button and select Download ZIP. Once the files have finished downloading, open the archive in a file manager and extract all the files to a secure location (preferably not Downloads). You might also want to rename the folder to your icon pack’s name to make things a little bit easier later on.

Importing The Dashboard’s Code

Once you’ve got all the files downloaded and extracted, open up Android Studio, select Import project on the home page, locate the folder you just extracted, and start the import. The process might take a while, so be patient. Once the files are imported, you’ll be greeted by the Android Studio UI. You’ll see a few toolbars, the main editor area, and a file tree on the left side (it might be hidden by default, to show it click on Project in the left bar). Before we move on, make sure the project build was successful, by clicking on the Messages button in the bottom bar. If there are no errors, you’re ready to go. Most probably, however, there are errors and the Gradle build did not finish correctly. This is due to missing SDK components such as platforms and tools. To solve the problem, take a look at the error message (which will tell you which components are missing), and navigate to Tools, Android, SDK Manager using the top toolbar.

The SDK Manager in Android Studio

Open the correct section, download the necessary components, and click Apply. Now head over to Build, Rebuild project in the top toolbar. If the build succeeds, move on to the next section of the tutorial. If it doesn’t, take a look at the error message, and install the missing components listed there again. Repeat this process until there are no errors during the Gradle build.

If this is your output, you’re ready to go

Setting Up The Dashboard (Part 1)

Polar Dashboard has an official tutorial here, so you might want to open that in a separate tab, if you don’t understand something we write ober here. Now let’s start setting up your app.

Here’s what we’re going to be working on

Before we begin, make sure the file tree view is set to Project instead of Android. You can change this by clicking on the header of the file tree and selecting the Project option from the dropdown. We’re now ready to continue.

First and foremost, you’ll need to change the package name. The package name is your app’s unique identifier which is used by the Google Play Store and Android OS to identify and run your app. You can do so by heading over to app, build.gradle in the file tree, and editing the applicationID under defaultConfig to your own value (remember to keep the quotation marks). The package name format is usually com.companyname.appname, for example com.lumiq.circa for Lumiq Creative’s Circa Icon Pack.

The defaultConfig section in build.gradle

To edit the version code and version name, go to app, build.gradle, and replace the characters next to versionCode and versionName with your app’s version number (in this case probably 1.0.0). versionCode cannot have spaces or dots (1 for version 1.0, 123 for version 1.2.3), and versionName has dots (1.0, 1.2.3). Remember to add quotation marks to the version name (i.e. “1.0”, “1.2.3”). A graphical representation of this process is available in the Polar Dashboard Wiki, linked above.

To edit the app name, go to app, src, main, res, values, strings.xml and edit the app_name string to your liking. This file is also the place where you can modify the dashboard texts, and change the name your app’s wallpapers will be displayed under in Muzei Live Wallpaper.

To add your app icon, go to app, src, main, res, and add your app icon to the 5 mipmap folders, in the following resolutions:

mipmap-mdpi: 48px x 48px
mipmap-hdpi: 72px x 72px
mipmap-xhdpi: 96px x 96px
mipmap-xxhdpi: 144px x 144px
mipmap-xxxhdpi: 192px x 192 px

Finally, let’s fill in a few other files. You’ll need to edit themecfg.xml and themeinfo.xml (which exist in app, src, main, res, xml and app, src, main, assets), as well as theme_config.xml which you’ll find in res, values. All of the info you need to add in these files is pretty obvious, and doesn’t need explaining. Take a look at the string names, and you’ll definitely know what to type in. For the preview field, you can replace the default value with the name of any PNG you add in app, src, main, res, drawable-nodpi (it is used by some launchers as a preview image of the theme — you can add a screenshot of a sample setup with your icons, or a screenshot from the app itself). Remember that the name you type in should not have .png in it.

Setting Up The Dashboard (Part 2)

Now let’s add a splash screen image. In your graphic design software, create a 512×512 image that you would like to display on the splash screen of your app (the screen that appears when the user clicks on the icon, before the app loads). This could be a big version of your app icon, your company logo, or anything else. Export the image, and place it in the app, src, main, res, drawable-nodpi location of your project, by simply dragging the file into the Android Studio window. Now navigate to app, src, main, res, drawable, and find the splash_light.xml and splash_dark.xml files. In both of these files, replace the homepage_landing_icon text with the name of your PNG file, once again remembering not to type in .png.

To switch between dark and light splash screen types, head over to app, src, main, res, AndroidManifest.xml, and replace the SplashLight text with SplashDark for a dark splash screen, or leave it the way it is for a light splash screen. To fine-tune your app’s colours, go to app, src, main, res, values, dev_theming.xml. Here you will find all the app colours as assigned to the default Polar Dashboard values. To add your own colours, simply enter their HEX codes in the color fields, replacing the default values entered there. At the very top of this file there are also two booleans which let you select which theme you want the app UI to use, and whether the user should be allowed to switch themes themselves. In these two lines, add true to enable the options or false to disable them.

If you are planning on using the navigation drawer view instead of a tabbed UI, and want to switch out the navigation drawer header image, head over to app, src, main, res, layout, drawer_header.xml and open the file. In the bar at the bottom, click Text.

Switch views easily with the bottom bar

Locate the android:scaleType=”fitXY” line. Place your cursor at the end of it, hit enter, and add this line: android:src=”@drawable/nameofpng”. Replace nameofpng with your own navigation drawer PNG name (which you must put in app, src, main, res, drawable-nodpi), and remember not to type in .png in the name.

Setting Up The Dashboard (Part 3)

First, let’s add your info to the About section of the app. To do this, head over to app, src, main, res, values, dev_about.xml, and locate the top line in each of the arrays in this file. The first array houses the profile images’ RAW links (to get a RAW link for any image, upload it to GitHub, making sure its size is below 4MB, in the image page click on Download, and copy the link of the website you get redirected to). The second array houses the RAW links to the cover images, the third one is for the credited peoples’ names, the fourth is for the taglines, the fifth is for the names of the buttons that appear on each card, and the last one is for the links that those buttons take the user to. The first 4 arrays should be quite easy to modify — simply replace the text between the item marks in the first line from the top in each of the arrays. If needed, you can add more lines to have more people in the about section. The last 2 arrays are a bit harder to set up. Both the button names and button links are separated with “|” symbols. In the fifth array, add your button names like so: Button Name|Button Name|Button Name. In the sixth one, add links that the buttons are supposed to take the user to like so: website.com|website.com|website.com. Remember that the first link will be associated with the first button name, the second one with the second one, and so on. Remember not to remove the bottom 5 lines in each array, which houses the info for the About cards of the Polar Dashboard authors.

Next, let’s set your app’s changelog, which you will probably want to modify each time you roll out an update to the app. To do so, navigate to app, src, main, res, values, dev_changelog.xml, and replace the current positions with your own. If you want to add more points in your changelog, just add another line in the string array with the same formatting as the ones above. You can use HTML formatting in your changelog, more about which you can find out in W3Schools’ tutorial here.

The deault changelog in Polar Dashboard

Next, navigate to app, src, main, res, values, dev_customization.xml. Here you can set tons of stuff to tailor the app to your preferences. Most of the options are booleans, which you learned how to use earlier in this tutorial, or strings, which you also already know how to use. If you leave the home page enabled, you might want to replace the big image displayed there. To do so, replace ic_web under homepage_landing_icon with the name of a high definition PNG from app, src, main, res, drawable-nodpi (without .png, as usual). We recommend a resolution of 512×512 for this image.

The file we are in right now is also the place to set options regarding the icon requests (including the email adress they should be sent to, under icon_request_email), and enable the license checker. To do the latter, paste your Base64 Licensing Key in the licensing_public_key string. To get the key, you will have to have your app in the Play Store (which means you will be able to enable the license checker only in the first update after publishing the app). Under your app’s page, navigate to Development tools, Services & APIs, and copy the license key from there.

Get the license key from the Developer Console

To enable donations in the app, paste the same key you just copied in the donate_license_key field, and add the donate option names and ID’s (which you can set up in the Google Play Developer Console, by going to Store presence, In-app products), remembering that the first name will be connected to the first ID, the second one to the second, and so on.

Finally, this file is also the place to paste your RAW link to the wallapapers’ JSON file. If you’ve already got such a file, put the RAW link in the wallpapers_json_url field. If not, follow along, learn how to create the wallpaper file, and come back here once you’ve got that ready.

Adding The Icons And XML’s For Launchers

First, let’s add your icons to the app. All icons should be 32-bit PNG’s with a resolution of 192×192. Drop your files into app, src, main, res, drawable-nodpi. You can remove the icons that were there by default, but remember to keep the other important PNGs there.

For your icons to display correctly in the app and launchers, and for them to apply automatically, we will need to modify two files. These files are drawable.xml and appfilter.xml, which you will find under app, src, main, res, xml, as well as app, src, main, assets.

First, let’s work on drawable.xml. Take a look at the default formatting, and you should get a hold of it. The file can be split into as many groups as you want to, with each group having its own name (under category title) and the icons being listed below (under drawable). You can add and remove groups and icons, but remember to keep the same formatting that was there by default. And, as always, remember not to add .png in the icons’ names. Remember to modify drawable.xml in both locations (listed above) to avoid issues with the app and launchers.

The default drawable.xml file

Polar Dashboard offers an optional file which will let you have separate drawable.xml files for the dashboard and launcher icon selector, in case you want to display different sets of icons in those two screens. If you want to make use of this functionality, head over to app, src, main, res, xml and edit the dashboard_drawable.xml file which has the same formatting as the drawable.xml file described earlier.

Now let’s take a look at appfilter.xml. This file is used to connect your PNGs to apps’ activity names, which allows the launcher to associate the icons with apps, and apply your icon pack automatically. The default appfilter might not be enough for you to get a hold of how it works, so we created a slightly larger sample appfilter which you can view here. In the appfilter, each icon (under drawable) is connected to an app’s activity name (under ComponentInfo). While the PNG name is pretty straight-forward (you guessed it, no .png at the end of the name), the ComponentInfo requires explaining. To get activity names for apps, use the built-in icon request tool in your app. Select all the apps you would like to get the ComponentInfo for, and send the request to yourself via email. Then just copy and paste the activity names into the appfilter, while maintaining the same formatting as in the sample we linked above. Some apps might have different activity names on different devices. In that case, simply add each activity name as a separate app, while typing in the same PNG name in the drawable field.

The default appfilter.xml file

You might be familiar with dynamic calendar support, which lets you change the calendar icon’s day number based on the actual day of the month. To add support for this feature in your icon pack, create 31 separate calendar icons and name them calendar_1, calendar_2, and so on. Then, in the appfilter, add a new field and replace item with calendar, and drawable with prefix. Set the prefix to the name of the PNGs without the numbers (in this case it will be calendar_), and you’re good to go! To make sure the calendar icon works properly in launchers that don’t support dynamic calendar, also add a static icon for the calendar as a separate field in the appfilter.

There is one last file called theme_resources.xml, which you will find under app, src, main, res, xml, as well as app, src, main, assets. This file is very similar to the appfilter, with a few extra lines at the top, which are, in turn, similar to the theme details files we edited at the beginning of this tutorial. This file is used by LG Home, so make sure to fill it in if you want to support that launcher. You’ll certainly get a hold of it as soon as you see it, so we won’t be explaining it in-depth.

Adding Wallpapers

Wallpapers are yet another important part of the app. To add them, make sure you have a GitHub account. If you don’t, create one here. Add a new GitHub repository, and create a file called wallpapers.json in it. You should also upload all your wallpapers to this location, making sure they are not larger than 4MB. We have created a sample wallpapers.json file, which you can view here. The file is divided into fields, with each field consisting of three lines. One for the wallpaper author, one for the wallpaper RAW link, and one for the wallpaper name. You’ve already learnt how to create RAW links at the beginning of the tutorial, so you can now edit your wallpapers.json file, while maintaining the same formatting as in the sample file linked above. Next, get a RAW link for your wallpapers.json file and paste the link in app, src, main, res, values, dev_customization.xml, under wallpapers_json_url.

Sample wallpapers JSON file (only part shown)

If you are facing problems with slow loading speeds for the wallpaper thumbnails, you can add lower resolution ones to the JSON file. To do so, simply create a line like “thumbnail”: “rawlinktothumbnail” at the end of each section of the JSON file, replacing rawlinktothumbnail with, well… a RAW link to your thumbnail. We recommend a resolution of at least 300×300 for the thumbnail images.

Adding Zooper Widgets

Now let’s add some Zooper Widgets to the app. Go to app, src, main, assets, and create three folders there: bitmaps, fonts, IconSets, and templates. You can do so by right-clicking on the assets folder and selecting New, Directory. Now, generate all the widget assets in the Zooper app and paste them in their respective folders.

Next, head over to app, src, main, AndroidManifest.xml, and uncomment the intent filter for the org.zooper.zw.TEMPLATES field. Go down, and uncomment the provider field. Finally, add a unique authority such as com.company.appname.zooperwidgetprovider. Now, head over to app, src, main, res, values, dev_zooper.xml, and modify all the strings and booleans, which you’ve already learned how to use.

If you’d like to add a Widgets section to the app, set the enable_zooper_page in the file we are working on to true. In the zooper_widget_names array, add the names you would like to be displayed under each widget preview in the app. To make sure widget previews are shown correctly, always set the preview background to transparent when making widgets in the Zooper app.

Adding Kustom Widgets/Walls/Components (Untested)

If you’d like to add your Kustom Widgets, Live Wallpapers, and/or components, the setup process is quite similar to that of Zooper. First, create three folders in app, src, main, assets. You can do so by right-clicking on the assets folder and selecting New, Directory. The three folders should be called: komponenets, wallpapers, and widgets. Generate the necessary files in the KWGT/KLWP app and copy them into their respective folders in your project.

Next, go to app, src, main, AndroidManifest.xml and find the provider section for Kustom. Uncomment the 13 lines and then, in the intent-filter add comment marks to the providers that you are not planning to use. For example, if you are only icluding widgets, leave org.kustom.provider.WIDGETS active, but add comment marks to org.kustom.provider.WALLPAPERS and org.kustom.provider.KOMPONENTS.

Finally, go to app, src, main, res, values, dev_kustom.xml, and enter all the necessary details, similarly to how you edited dev_zooper.xml earlier. The two booleans at the bottom let you select whether to display Kustom Widgets and Kustom Wallpapers sections in the app.

Polar Request Manager

Polar Dashboard offers an alternative, more modern icon request managing feature to its users. Instead of having to deal with cumbersome email messages, all requests can be sent to the Polar Request Manager server, thanks to which you can easily manage and view all of them. You can open the manager by clicking here.

To create an account and use Polar Request Manager, click on Create Account in the top right corner of the website. Choose your plan, enter your payment details, and complete the sign-up process.

The PRM account creation screen

The Polar Request manager consists of a few separate pages, and you can connect multiple apps to it (if you’ve purchased the right plan). The website is quite user-friendly, so we won’t be going into how it works. You can find out more about PRM’s features by clicking here.

To integrate PRM with your app, you will need to copy the API key for your app from the home page of the website, and paste it under polar_backend_apikey in app, src, main, res, values, dev_customization.xml. Under polar_backend_host in this file, type https://polar.aidanfollestad.com. There is also a boolean at the bottom which lets you select whether the request manager should generate an email request if the PRM request fails.

Using PRM is totally optional, and you can skip this part of the tutorial if you’d rather use the free, traditional email requests.

Woah, That Was A Lot

Wow, we covered a lot of stuff in this article. I hope all the info we shared here will be enough for you to create your first icon pack app with ease. If you have any questions or doubts, feel free to drop a comment down below and we will try to respond as quickly as possible. Thanks for stopping by!

If you found this article helpful, consider liking it on Medium, and following Lumiq Creative on Google+ and Twitter. Happy designing!

Parts of this text were adapted from the Polar Dashboard Wiki and IconShowcase Dashboard Wiki. Special thanks to Patryk Goworowski for helping me with gathering the info for this article.

How To Create An Android Icon Pack App was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How To Create An Android Icon Pack App

Cool stuff, every week

More Articles