Blog

We wrote below article to let our users about maskable icon issue.

PLEASE NOTE : If you are using, Joomla PWA Plugin, you do not need to implement any code because we do it for you.

We released this article just for some more information.

Maskable Icons will be re-released at version 3.1.3

Have you ever encountered a situation where your meticulously crafted maskable icon displays with an unexpected black background on Android devices? Fear not, fellow developer! This seemingly ominous issue has a straightforward solution. Let's delve into the world of maskable icons, understand the cause of the black background, and equip you with the knowledge to banish it forever.

What are Maskable Icons?

Before tackling the problem, let's establish a common ground. Maskable icons, introduced in Android Nougat (API level 24), are a powerful tool for app developers. They allow you to define a foreground image that adapts to different shapes on Android launchers and notification bars. This ensures a visually consistent and dynamic icon representation across various devices and themes.

The Cause of the Black Background

The culprit behind the black background is often a missing or transparent background layer in your maskable icon. Here's what happens:

• When you don't specify a background for your maskable icon, the Android system attempts to fill the empty space.
• Depending on the launcher or theme settings, the system might resort to a default black background.
• This unintended black backdrop clashes with your foreground icon, causing an undesirable visual effect.

Vanquishing the Black Background

To achieve a flawless icon presentation, you have two primary options:

1. Include a Solid Background:

The simplest solution is to add a solid color background to your maskable icon during creation. This background should extend to the full size of the canvas, ensuring complete coverage and preventing the system from filling any gaps.

2. Leverage Transparency:

For a more transparent aesthetic, you can utilize a transparent background for your icon. However, this requires additional configuration in your Android Manifest file. Here's how:

Add the `maskable` property:

Within the `` tag of your Manifest file, add the `android:icon` attribute and set the `android:maskable` property to `true`. This informs the system that your icon utilizes a mask.

Specify a Background Color:

Even with a transparent background, it's still recommended to define a fallback background color in the Manifest file. This color will be used if the launcher or theme doesn't support transparency. You can do this by adding the `android:banner` attribute with your desired color code within the `` tag.

Tools and Resources

Several online tools and resources can assist you in creating flawless maskable icons:

• **Android Studio:** The official Android development environment provides built-in functionalities for generating maskable icons.
• **Online Icon Generators:** Numerous online platforms offer user-friendly interfaces for crafting maskable icons with various background options.
• **Android Developer Documentation:** The Android developer documentation offers a comprehensive guide on maskable icons, including best practices and troubleshooting tips: Maskable Icons: Android Developer Guide

By following these steps and leveraging the available resources, you can ensure your beautiful maskable icons grace Android devices without the unwanted black background. Remember, a visually appealing icon can significantly enhance your app's user experience and brand recognition on Android!