Android Studio Image Asset Launcher Icon Background Color

Android Studio Image Asset Launcher Icon Background Color

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

Sample Image

EDIT:

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

Sample Image

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 

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)

Sample Image

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

Create Launcher icon using Image Asset without background color or xml in Android Studio 3.0.1

It is not a problem of the icon you created with Android Studio, but it's a problem related to your specific device you're testing the application on.
In fact, in the Image Asset if you specify the Shape to None, you get a trasparent background.

To address your problem, please try to use a different Home theme, like the Nova Launcher; you can change the home theme in Settings - Home.

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.

Change background color of flutter app icon

  1. Open android folder in Android Studio.

  2. Right-click the res folder and select New > Image Asset.

  3. In the Icon Type field, select Launcher Icons (Adaptive & Legacy).

  4. In the Foreground Layer tab, select an Asset Type, and then specify the asset in the field underneath:

  • Select Image to specify the path for an image file.
    * Select Clip Art to specify an image from the material design icon set.
    * Select Text to specify a text string and select a font.

  1. In the Background Layer tab, select an Asset Type, and then specify the asset in the field underneath. You can either select a color or specify an image to use as the background layer.
  2. In the Legacy tab, review the default settings and confirm you want to generate legacy, round, and Google Play Store icons.
  3. Optionally change the name and display settings for each of the Foreground Layer and Background Layer tabs:
  • Name - If you don't want to use the default name, type a new name. If that resource name already exists in the project, as indicated by an error at the bottom of the wizard, it's overwritten. The name can contain lowercase characters, underscores, and digits only.

  • Trim - To adjust the margin between the icon graphic and border in the source asset, select Yes. This operation removes transparent space, while preserving the aspect ratio. To leave the source asset unchanged, select No.

  • Color - To change the color for a Clip Art or Text icon, click the field. In the Select Color dialog, specify a color and then click Choose. The new value appears in the field.

  • Resize - Use the slider to specify a scaling factor in percent to resize an Image, Clip Art, or Text icon. This control is disabled for the background layer when you specify a Color asset type.
    Click Next.


  1. Optionally, change the resource directory: Select the resource source set where you want to add the image asset: src/main/res, src/debug/res, src/release/res, or a custom source set. The main source set applies to all build variants, including debug and release. The debug and release source sets override the main source set and apply to one version of a build. The debug source set is for debugging only. To define a new source set, select File > Project Structure > app > Build Types. For example, you can define a beta source set and create a version of an icon that includes the text "BETA" in the bottom right corner. For more information, see Configure Build Variants.
    Click Finish. Image Asset Studio adds the images to the mipmap folders for the different densities.

How do I make launcher icon w/ gradient background?

Create an color_gradient.xml in drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="@color/start_gradient" <!--Start color of the gradient-->
android:endColor="@color/end_gradient" <!--End color of the gradient-->
android:angle="45" /> <!--Change this to see the combination of gradient color-->
</shape>
</item>
</selector>

When using for your image:

 android:backgroundTint="@drawable/color_gradient

EDIT:

In case of using Android Image Asset, you still can link the background color to this xml file, to create a gradient background



Related Topics



Leave a reply



Submit