How to create a simple app icon using text in Android Studio

Are you done building your app and trying to figure out how to go about an app icon? Maybe you wish you had a designer to design an app icon for you but you can’t afford it or you don’t want to spend much on that. You can easily create an app icon using text right in your Android Studio, at no cost. Something like this:

Image Asset Studio

Android Studio includes a tool called Image Asset Studio that helps you generate your own app icons from material icons, custom images, and text strings. It generates a set of icons at the appropriate resolution for each pixel density that your app supports. Image Asset Studio places the newly generated icons in density-specific folders under the res/ directory in your project. At runtime, Android uses the appropriate resource based on the screen density of the device your app is running on.

With the Image Asset Studio, we will create a text-based app icon. Shall we?

---

Open the Image Asset Studio by right-clicking the res folder and selecting New > Image Asset, as shown below:

You should see a screen like this displayed:

Setting Text

Once you have that opened, select Text under the Source Asset option. You should see options such as Text and Color displayed. In the Text box that has the Aa text, put in your desired text. For me, I name my app Raiden.

Specifying Font

To the right of the Text box, is a drop-down that has a list of available fonts to choose from. You can go ahead and use the default Roboto font. You can also change it by selecting your desired font in the drop-down. For me, I will use the AppleGothic font.

Setting Text Color

Below the Text option, is the Color option. Click on it to select your desired color from the Color Picker. For me, I will choose the white color (hex code – #FFFFFF).

Scaling and Resizing

Below the Color option is the Scaling options. This is where you can scale or resize your text as you desire. Drag the Resize slider till you get your desired size. The Trim option is used to adjust the margin between the icon graphic and border in the source asset. The operation removes transparent space while preserving the aspect ratio. You can select Yes to see the effect. For me, I will leave it as No.

Setting Background Color

What do you think of the background color? Can be better right? Presently, the Asset Studio uses the default primary color. Let’s change it.

Select Background Layer from the tab options. From the Source Asset option, you should notice Image is set as the Asset Type. Meaning, the background you see right now is an image. Let’s try and use Color instead.

Select Color from the Asset Type options. Click on the color box to select your desired color from the Color Picker. I will select a Red color, because why? My Raiden produces red lighting.

For color background, the Scaling option is not modifiable, or better still, not needed.

---

If all is done well, you should have something similar to this, depending on your chosen options:

Now let’s save it. Click on Next.

A new screen would be displayed showing the locations the icons would be placed in and the corresponding names. Due to the fact that Android Studio automatically creates a set of app icons by default, those files would be overridden by our operation, which is fine. Click on Finish to save the generated icons and close the dialog.

An interesting thing to note is that Android Studio automatically generates the 512×512 High-res Icon needed when uploading to Playstore, which is great!

Using the icon

Now, let’s make use of our generated app icons. Go to your manifest file and confirm @mipmap/ic_launcher is selected as the app icon and @mipmap/ic_launcher_round for round icon. Make sure the name matches what the generated icons are saved as.

Run your app.

You can see my app icon looking peng among other apps ?. Easy right?

---

Now that you’ve seen how it’s done, go ahead. Try it out. Feel free to share your experience with me and also tell your friends about it.

Peace out ✌?