Why does the black shadowless "Buy with Google Pay" button variant not match the white variant?

Question

When using the official "Buy with Google Pay" assets to create a shadowless button in my app, the black button has more padding on all sides than the white button.

As seen in the image below, when using the buttons for night and day mode the difference is noticeable.

Answer 1

This is due to an inconsistency in "shadow" vs "non-shadow" assets provided by Google. This can be seen by comparing the 9patch PNGs in /app/[colour]/res/drawable-xhdpi/:

Notice that whilst the shadowed image for each is identical, the _no_shadow variant is not. The black asset has extra margins around the edge (before the 9patch black border), leading to the slightly different button appearances.

Whilst the ideal solution is for Google to update the provided assets, an immediate solution is to replace the provided assets with ones that have no margin like the white assets. I have created a set that have already had this treatment.

To use the images save each in the appropriate drawable-x directory as googlepay_button_no_shadow_background_image.9.png.

Density	Asset
MDPI
HDPI
XHDPI
XXHDPI
XXXHDPI