[Android] Background image squished.

[Gunashree-R-V]

Platform

• Android

Author or host

Microsoft Teams

Version of SDK

1.2.10

Details

Here is the JSON:

When a background image has fillMode: "repeat"/"repeatHorizontally"/"repeatVertically", the image is compressed.
And this happens irrespective of where the background image is placed.

Here is the Desktop, Android and iOS comparison:

Desktop	Android	iOS

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "minHeight": "150px",
            "backgroundImage": "https://adaptivecards.io/content/AlkiBeach.jpg",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "What a beautiful background"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "They can even repeat a bunch of different ways..."
        },
        {
            "type": "Container",
            "minHeight": "100px",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "Repeat"
            }
        },
        {
            "type": "Container",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "RepeatHorizontally",
                "verticalAlignment": "Center"
            }
        },
        {
            "type": "Container",
            "minHeight": "100px",
            "backgroundImage": {
                "url": "https://adaptivecards.io/content/uparrow.png",
                "fillMode": "RepeatVertically",
                "horizontalAlignment": "Center"
            }
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

cc: @VikrantSingh01, @anbah34, @shbhadra

[ghost]

Hi @Gunashree-R-V. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions.

[shalinijoshi19]

@golddove please update with your investigation comments here. Moving to 20.10 based on priorities around Accessibility for 9/30

[golddove]

Talked with @dclaux about this before - the same issue occurs with Image that has size: auto. Android shows a much smaller image than JS.

This needs a design discussion about how we want to treat images when there's no explicit width/stretch given.

Our spec just says that auto means no scaling (as long as it fits). This would mean every device would show a different sized image subject to the display's pizel density. But perhaps we want to instead scale them such that the same images take up the same physical size across devices..?

[shalinijoshi19]

@golddove currently working on this. Testing out/Validating fix.

[shalinijoshi19]

@golddove updates? Is this still on track to be checked in by EOW?

[golddove]

@golddove updates? Is this still on track to be checked in by EOW?

Should be good. In PR.

[ghost]

🎉This issue is now fixed by #4956 and successfully released as part of our AdaptiveCards@2020.10 offering.:tada:

Handy links:

• Release Notes
• AdaptiveCards Website
• Official NPM Designer Release
• Official NPM Templating Release
• Official NPM Renderer Release
• Official Nuget Templating Release
• Official Nuget Renderer Release
• Official Maven Renderer Release
• Official CocoaPod Renderer Release