[Android] Position Formatting for Adaptive Cards Broken for Vertical Alignment

[Andrew-J-Larson]

Steps to reproduce

We use a workflow to post adaptive cards to teams, and in part of the formatting, we have somethings vertically center aligned.

Below is the example adaptive card JSON:

{
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "items": [
                {
                    "bleed": true,
                    "style": "accent",
                    "columns": [
                        {
                            "items": [
                                {
                                    "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/PlaceholderLC.png/48px-PlaceholderLC.png",
                                    "altText": "[Example platform service image]",
                                    "type": "Image"
                                }
                            ],
                            "width": "48px",
                            "minHeight": "48px",
                            "type": "Column"
                        },
                        {
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "RichTextBlock",
                                    "inlines": [
                                        {
                                            "weight": "Bolder",
                                            "size": "Large",
                                            "type": "TextRun",
                                            "text": "Automated test ticket created"
                                        }
                                    ]
                                }
                            ],
                            "type": "Column"
                        }
                    ],
                    "type": "ColumnSet"
                }
            ],
            "type": "Container",
            "verticalContentAlignment": "Center"
        },
        {
            "items": [
                {
                    "style": "emphasis",
                    "columns": [
                        {
                            "width": "96px",
                            "items": [
                                {
                                    "horizontalAlignment": "Center",
                                    "width": "48px",
                                    "type": "Image",
                                    "height": "48px",
                                    "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Missing_avatar.svg/48px-Missing_avatar.svg.png",
                                    "style": "Person"
                                },
                                {
                                    "horizontalAlignment": "Center",
                                    "wrap": true,
                                    "spacing": "Small",
                                    "type": "TextBlock",
                                    "text": "Firstname Lastname"
                                }
                            ],
                            "type": "Column"
                        },
                        {
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "RichTextBlock",
                                    "inlines": [
                                        {
                                            "weight": "Bolder",
                                            "type": "TextRun",
                                            "text": "Ticket Title"
                                        }
                                    ]
                                },
                                {
                                    "isSubtle": true,
                                    "wrap": true,
                                    "spacing": "Small",
                                    "type": "TextBlock",
                                    "text": "Ticket #: [**12345678**](#linkToTicketingSystem)"
                                }
                            ],
                            "separator": true,
                            "spacing": "Large",
                            "type": "Column"
                        }
                    ],
                    "type": "ColumnSet"
                }
            ],
            "type": "Container",
            "verticalContentAlignment": "Center"
        },
        {
            "inlines": [
                {
                    "text": "Example text included as a comment.",
                    "type": "TextRun"
                }
            ],
            "separator": true,
            "spacing": "ExtraLarge",
            "type": "RichTextBlock"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "msteams": {
        "width": "Full"
    }
}

Expected behavior

This shows up properly on PC/Web, where the text meant to be vertically aligned does position to the center properly.

Actual behavior

Shows up incorrectly on Android, by positioning things at the top instead of centered vertically.

Error details

No response

[Prasad-MSFT]

Hi @Andrew-J-Larson, Thanks for raising your issue. We will check this at our end and will update you accordingly.

[Prasad-MSFT]

@Andrew-J-Larson , could you please share the screenshot showing how its rendering in Android client as compared to Desktop/web client?

We tried to repro this, and this is what we are observing: Desktop/Web:

Android:

[Andrew-J-Larson]

Yes, that's exactly how it's showing up for me too.

Notice the area with the ticket title and ticket number and how their position change on Android vs on PC/web?

[Prasad-MSFT]

Thanks for confirming @Andrew-J-Larson. We have raised a bug for this issue. We will inform you once we get any further update from engineering team. Thanks!

[Andrew-J-Larson]

I'd like to mention a few other inconsistent formattings:

• Windows: URLs are not underscored by default (on Android they are)
• Windows: Mentions are not bolded by default (on Android they are)

[Andrew-J-Larson]

Oh and the accent background color on Android is way too bright for the dark mode, see the following (from your reply):

Android:

[Andrew-J-Larson]

Also for the Android dark mode, the emphasis background color is basically gone.