[Android] Child rendering behaviour mismatched after upgrading Xamarin.Forms (>4.0) in FlexLayout

[mrhemalatha]

Description

I have a simple sample with the layout structure of FlexLayout which has more number of Grid. Each Grid has two children that are

1) Grid with Label as a child 2) Custom View (TouchView) which is inherited from View.

<FlexLayout HorizontalOptions="Start" 
                                VerticalOptions="Center" 
                                Direction="Row" 
                                Wrap="Wrap" 
                                BindableLayout.ItemsSource="{Binding ChildItems}"
                                JustifyContent="Start" 
                                AlignContent="Start" 
                                AlignItems="Start">
            <FlexLayout.BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid BackgroundColor="Aqua">
                            <Label TextColor="Black" Text="{Binding}"/>
                        </Grid>
                        <local:TouchView/>
                    </Grid>
                </DataTemplate>
            </FlexLayout.BindableLayout.ItemTemplate>
        </FlexLayout>

Here TouchView represents like

public class TouchView:View
    {

    }

This FlexLayout wraps its child element correctly up to the Xamarin.Forms version of 3.6.0.539721

But after 4.0.0.425677, it rendered be like in below

Steps to Reproduce

Case 1:

1. Run the attached sample (Lowerversion)

Case 2:

1. Run the attached sample (HigherVersion)

Expected Behavior

The FlexLayout child should be rendered in both high (>4.0) and lowest version (<4.0) of Xamarin.Forms

Actual Behavior

The FlexLayout with 4.0 > Xamarin.Forms rendered its child with parent width.

Basic Information

• Version with issue: 4.0.0.425677
• Last known good version:
• IDE:

---

=== Visual Studio Community 2017 for Mac ===

Version 7.5.1 (build 22) Installation UUID: 9e31cad9-5496-45de-a112-39c1f6e8f588 Runtime: Mono 5.10.1.47 (2017-12/8eb8f7d5e74) (64-bit) GTK+ 2.24.23 (Raleigh theme) Xamarin.Mac 4.4.1.178 (master / eeaeb7e6)

Package version: 510010047

=== NuGet ===

Version: 4.3.1.4445

=== .NET Core ===

Runtime: /usr/local/share/dotnet/dotnet Runtime Version: 2.0.5 SDK: /usr/local/share/dotnet/sdk/2.1.4/Sdks SDK Version: 2.1.4 MSBuild SDKs: /Library/Frameworks/Mono.framework/Versions/5.10.1/lib/mono/msbuild/15.0/bin/Sdks

=== Xamarin.Profiler ===

Version: 1.6.2 Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler

=== Apple Developer Tools ===

Xcode 9.3 (14154) Build 9E145

=== Xamarin.Mac ===

Version: 4.4.1.178 (Visual Studio Community)

=== Xamarin.iOS ===

Version: 11.10.1.178 (Visual Studio Community) Hash: 408d3574 Branch: d15-7 Build date: 2018-05-08 18:56:30-0400

=== Xamarin.Android ===

Version: 8.3.0.19 (Visual Studio Community) Android SDK: /Users/hemalatham/Library/Android/sdk Supported Android versions: 4.0.3 (API level 15) 4.1 (API level 16) 4.2 (API level 17) 4.3 (API level 18) 4.4 (API level 19) 4.4.87 (API level 20) 5.0 (API level 21) 5.1 (API level 22) 6.0 (API level 23) 7.0 (API level 24) 7.1 (API level 25) 8.0 (API level 26) 8.1 (API level 27)

SDK Tools Version: 26.1.1 SDK Platform Tools Version: 27.0.1 SDK Build Tools Version: 27.0.3

Java SDK: /usr java version "1.8.0_131" Java(TM) SE Runtime Environment (build 1.8.0_131-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

Android Designer EPL code available here: https://github.com/xamarin/AndroidDesigner.EPL

=== Xamarin Inspector ===

Version: 1.4.0 Hash: b3f92f9 Branch: master Build date: Fri, 19 Jan 2018 22:00:34 GMT Client compatibility: 1

=== Build Information ===

Release ID: 705010022 Git revision: 60442dd643a20c7a4ae1f8705b8d1de8972eee78 Build date: 2018-05-15 01:43:39+00 Xamarin addins: 4194ffe4868321e4c3477bd56aed579bda4c6fbb

=== Operating System ===

Mac OS X 10.13.4 Darwin 17.5.0 Darwin Kernel Version 17.5.0 Mon Mar 5 22:24:32 PST 2018 root:xnu-4570.51.1~1/RELEASE_X86_64 x86_64

=== Enabled user installed addins ===

LiveXAML 1.3.31 Gorilla Player 1.5.0.0

---

• Platform Target Frameworks
  • Android

Reproduction Link

LowerVersion.zip HigherVersion.zip

[mrhemalatha]

Hi Team,

Any update ? or suggestion to resolve this?

Regards, Hemalatha M.

[kingces95]

@xamarin/skype-collaborators Hi Hemalatha, I can reproduce your issue. The layouts change from one version to the next. That said I'm not entirely sure how it should layout (even the original behavior doesn't much look like a grid). I'm not a designer but it strikes me as odd to have a grid inside a flex layout.

Would you be open to achieving your desired layout in a manner other than a Grid nested inside of FlexLayout? Can you describe the layout you are trying to achieve? Or can you point me to the design pattern of having a grid in a flex layout on the web?

[mrhemalatha]

Hi @kingces95

My design is like to have Grid with has three columns (Each column has different items), This Grid has to populate in FlexLayout based on the collection's count. I need to have this arrangement for my custom control, currently, we have tried to measure the grid layout based on the measurer values.

[mrhemalatha]

@samhouts - Is this fixed ?

[samhouts]

@HemalathaMarikuma-syncfusion Not yet! Sorry for the delay.

[mrhemalatha]

@samhouts - Please consider this as a high priority since it affects our protectivity.