Chrome Custom Tabs change the default close button not working

Question

I am trying to change the default close button on the actionbar of the custom chrome tabs. I have tried to set using setCloseButtonIcon() However, the default c

Answer 1

You can directly get BitmapDrawable from Drawable but not from VectorDrawable as setCloseButtonIcon requires @NonNull Bitmap icon

You can also use svg as follows. Download the svg from here ic_arrow_back_black_24px

Below methods are self explanatory:

private static Bitmap getBitmapFromDrawable(Context context, int drawableId) {
Drawable drawable = ContextCompat.getDrawable(context, drawableId);
if (drawable instanceof BitmapDrawable) {
  return ((BitmapDrawable) drawable).getBitmap();
} else if (drawable instanceof VectorDrawable) {
  return getBitmapFromVectorDrawable((VectorDrawable) drawable);
} else {
  throw new IllegalArgumentException("Unable to convert to bitmap");
}
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static Bitmap getBitmapFromVectorDrawable(VectorDrawable vectorDrawable) {
Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
    vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
vectorDrawable.draw(canvas);
return bitmap;
}

You can use the above as:

builder.setCloseButtonIcon(getBitmapFromDrawable(this, R.drawable.ic_arrow_back_black_24px)); 

Ref from SO

Answer 2

I too had to face the same problem

Solution :-

1) Take image(back arrow) in png format.
2) Keep the image size under 24dp .

Answer 3

To make this work in Kotlin (using Android KTX) with any 24dp drawable resource:

AppCompatResources.getDrawable(activity, R.drawable.ic_arrow_back_white_24dp)?.let {
    builder.setCloseButtonIcon(it.toBitmap())
}

And if you need to do some tinting:

AppCompatResources.getDrawable(activity, R.drawable.ic_arrow_back_black_24dp)?.mutate()?.let {
    DrawableCompat.setTint(it, Color.WHITE)
    builder.setCloseButtonIcon(it.toBitmap())
}

If the drawable needs to be resized, then pass in the new width/height to the Drawable.toBitmap() function.

And if you are not using Kotlin then you can just use the equivalent of the Drawable.toBitmap() code:

fun Drawable.toBitmap(
    @Px width: Int = intrinsicWidth,
    @Px height: Int = intrinsicHeight,
    config: Config? = null
): Bitmap {
    if (this is BitmapDrawable) {
        if (config == null || bitmap.config == config) {
            // Fast-path to return original. Bitmap.createScaledBitmap will do this check, but it
            // involves allocation and two jumps into native code so we perform the check ourselves.
            if (width == intrinsicWidth && height == intrinsicHeight) {
                return bitmap
            }
            return Bitmap.createScaledBitmap(bitmap, width, height, true)
        }
    }

    val (oldLeft, oldTop, oldRight, oldBottom) = bounds

    val bitmap = Bitmap.createBitmap(width, height, config ?: Config.ARGB_8888)
    setBounds(0, 0, width, height)
    draw(Canvas(bitmap))

    setBounds(oldLeft, oldTop, oldRight, oldBottom)
    return bitmap
}

For more see this answer.

Answer 4

I have an observation. Last month, when searching through SO for various chrome custom tab issues, I found this answer suggesting to use 24dp size icon and also found this question saying that it is working fine with PNG.

I have checked your code with using back arrow icon from here.

When I used "ic_arrow_back_black_48dp", it didn't change the default close button to an arrow (see left image).

final Bitmap backButton = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_48dp);

But when I used "ic_arrow_back_black_24dp", it perfectly changed the default close button to an arrow (see right image).

final Bitmap backButton = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_24dp);

As it has worked perfectly for me, you should also try with "24dp" size back arrow icon from here instead of "48dp" size back arrow icon.

Screenshot : [ Device: ASUS_Z00UD; OS: 6.0.1 ]

Answer 5

why not you Add Image Asset and store in mipmap then it will be easier to use default icons inbuilt in android studio Assest Studio

After Uploading You can easily access icons and image from mipmap in xml file using src resource in ImageView for an instant

android:src="@mipmap/ic_launcher"

Answer 6

I had to go to this site: https://material.io/tools/icons/?icon=keyboard_backspace&style=baseline

I got the PNG and then used it that way. I know that I am late for the party but it is for whoever needs it.