How to Make the Icon Background of an Android App Transparent

Android Studio Image Asset Launcher Icon Background Color

To make background transparent, set shape as None.
See the image below:

enter image description here

EDIT:

For Android Studio 3.0,
you can set it from Legacy Tab

enter image description here

How to make the icon background of an Android app transparent?

Method 1:

if you have a png, just copy it and paste it in drawable, and refer to image name from manifest.

<application
android:allowBackup="true"
android:icon="@mipmap/new_image"
android:label="@string/app_name"
android:roundIcon="@mipmap/new_image"
android:supportsRtl="true"
android:theme="@style/AppTheme">

....
</application>

Method 2:

Goto file > new > image asset, make sure you select a png image (with transparent background) & set background shape to none.

enter image description here

Transparent adaptive icon background

TL;DR Adaptive Icons cannot have transparent Background

Transparent background will be opaque black.

According to the source code of Android 8.0 framework, the <background> layer is inherently opaque; the framework fills the background with opaque black, as mentioned in the question.

The framework has a class AdaptiveIconDrawable, which draws adaptive launcher icons.
https://developer.android.com/reference/android/graphics/drawable/AdaptiveIconDrawable.html

The element <adaptive-icon> creates an instance of it:

This class can also be created via XML inflation using <adaptive-icon> tag in addition to dynamic creation.

The source code of method draw in AdaptiveIconDrawable.java is:

@Override
public void draw(Canvas canvas) {
if (mLayersBitmap == null) {
return;
}
if (mLayersShader == null) {
mCanvas.setBitmap(mLayersBitmap);
mCanvas.drawColor(Color.BLACK);
for (int i = 0; i < mLayerState.N_CHILDREN; i++) {
if (mLayerState.mChildren[i] == null) {
continue;
}
final Drawable dr = mLayerState.mChildren[i].mDrawable;
if (dr != null) {
dr.draw(mCanvas);
}
}
mLayersShader = new BitmapShader(mLayersBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint.setShader(mLayersShader);
}
if (mMaskBitmap != null) {
Rect bounds = getBounds();
canvas.drawBitmap(mMaskBitmap, bounds.left, bounds.top, mPaint);
}
}

In short, a Canvas instance receives a bitmap to draw into, and initially it fills the bitmap with black color. Then the foreground drawable and the background drawable do the job:

mCanvas.setBitmap(mLayersBitmap); // reset
mCanvas.drawColor(Color.BLACK); // fill
for (int i = 0; i < mLayerState.N_CHILDREN; i++) { // two layers
...
final Drawable dr = mLayerState.mChildren[i].mDrawable;
...
dr.draw(mCanvas); // draw
...
}

The Color.BLACK is opaque:

0xff000000

The method drawColor fills the bitmap with it, using SRC_OVER mode:

Fill the entire canvas' bitmap (restricted to the current clip) with the specified color, using srcover porterduff mode.

So, the background will be always opaque, even if you set transparent color to the background, as in the screenshot below (from my answer to a similar question).

NoAdaptive and Adaptive

How used android launcher icon without any background

Go to -

Image Asset -> Foreground layer (here browse your icon)

Image Asset -> Background layer (here browse any transparent icon)

Image Asset -> Legacy (here give none shape for icon)

enter image description here

How to make image asset with transparent background in Android studio? (with option add image asset)

Select "Action Bar and Tab Icons" instead of "Launcher Icons" and you'll get the transparent background as required for all the images.

Removing the green background for android icon

code structure

 <?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/> // this is background color
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

color resource found in values/ic_launcher_background.xml in your project dir

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ic_launcher_background">#00FF00</color> // change color using(#) like : #000000(black)
</resources>

I mentioned black color code,
you try to change color according to your icon.

or use transparent color like this

<color name="ic_launcher_background">#0000ffff</color> // transparent background color 


Related Topics



Leave a reply



Submit