androidnine-patchgoogle-payandroid-night-mode

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


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.

night and light mode google pay shadowless button


Solution

  • 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/: comparing google pay 9patches

    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 MDPI
    HDPI HDPI
    XHDPI XHDPI
    XXHDPI XXHDPI
    XXXHDPI XXXHDPI