Chrome Custom Tabs change the default close button not working

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


Presuming you are using the Google library and not on of the related ones the icons size should be 24dp as documented here.

This can be achieved with BitmapFactory Options:

BitmapFactory.Options options = new BitmapFactory.Options();
options.outWidth = 24;
options.outHeight = 24;
options.inScaled = true; //already default, just for illustration - ie scale to screen density (dp)
... = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_48dp, opts);

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 ]

The default close button has changed to an arrow when using 24dp size icon instead of 48dp size.