[Android][Autolayout] The right margin can be inverted in some situation

[Marc-Antoine-Soucy]

Current behavior

As you can see, a right part of the grid is getting cutoff on the right side

Expected behavior

It should look the same, for this code, as if you put padding. Or what it looks like on any other platform.

How to reproduce it (as minimally and precisely as possible)

Open an android app with this:

<utu:AutoLayout Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<utu:AutoLayout utu:AutoLayout.PrimaryAlignment="Stretch">

			<utu:AutoLayout Margin="16"
							utu:AutoLayout.PrimaryAlignment="Stretch"
							Spacing="16">

				<Grid CornerRadius="20"
					  HorizontalAlignment="Stretch"
					  Background="Aqua"
					  utu:AutoLayout.CounterAlignment="Stretch"
					  Height="100" />
			</utu:AutoLayout>
		</utu:AutoLayout>
	</utu:AutoLayout>

BasicApp.zip

Nuget Package:

<PackageReference Include="Uno.Resizetizer" Version="1.2.0-dev.19" />
		<PackageReference Include="Uno.Toolkit.WinUI" Version="4.0.0-dev.39" />
		<PackageReference Include="Uno.WinUI" Version="5.0.0-dev.1380" />
		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
		<PackageReference Include="Microsoft.Extensions.Logging.Console" Version="7.0.0" />
		<PackageReference Include="Uno.Extensions.Logging.OSLog" Version="1.6.0-dev.2" />
		<PackageReference Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.0.0-dev.1380" />

Package Version(s):

Affected platform(s):

• [ ] WebAssembly
• [X] Android
• [ ] iOS
• [ ] macOS (AppKit)
• [ ] Mac Catalyst
• [ ] Skia
  • [ ] WPF
  • [ ] GTK (Linux)
  • [ ] Linux Framebuffer
  • [ ] Tizen
• [ ] Windows

IDE:

• [X] Visual Studio 2022
• [ ] Visual Studio 2019
• [ ] Visual Studio Code
• [ ] Visual Studio for Mac
• [ ] Rider Windows
• [ ] Rider macOS

Relevant plugins:

Anything else we need to know?

As a workaround, you can use padding instead of Margin and it works fine.

[Marc-Antoine-Soucy]

@Robert-Louis

[Marc-Antoine-Soucy]

The reason there is a second autolayout is because the code was from the figma plugin (it was padding in the plugin, but at the time, there was this bug: https://github.com/unoplatform/uno.toolkit.ui/issues/624 with the padding so I put margin to fix the bug on other platform) and the page was more complex. Removing the second autolayout made the bug not happen anymore so I left it there.

[nguyeenvy]

I noticed this happened too when I was working on a page. Basically, when we use a FlipView in a page and there is a margin in that FlipView, the right margin is inverted. A workaround to it was replacing the margin with a padding in the outside container of that FlipView.

[Youssef1313]

This could be related to layouting issues on Android in general, not specific AutoLayout.

If someone investigated and found this to be the case, it would be good to find a minimal repro and transfer the issue to unoplatform/uno. Let me know of any updates on this.