Forum Xamarin Xamarin.Forms

Is it possible to design adaptive UI with Grid layout?

MadameGreenPeaMadameGreenPea Member ✭✭
edited September 2018 in Xamarin.Forms

I am trying to understand the logic of the Grid layout structure in Xamarin.Forms. If it is possible, I don't want to use margin and padding properties too much to have an adaptive design.

I created some rows and columns with Grid tags and encoloured them with background colours to be able to check their width and height.

When I check the result, I see a lot of different outputs depending on the dimensions of devices.

Please check the emulators' outputs:

I am trying to understand the logic of the Grid layout structure in Xamarin.Forms. If it is possible, I don't want to use margin and padding properties too much to have an adaptive design.

I created some rows and columns with Grid tags and encoloured them with background colours to be able to check their width and height.

When I check the result, I see a lot of different outputs depending on the dimensions of devices.

Please check the emulators' outputs: "

My application will be only a mobile application and it won't be displayed on any other platforms. I think these differences are too much for a mobile application. Is it possible to design adaptive UI with Xamarin or do we have to write separate codes for all different dimensions?

Or are there any logical errors in my xaml file?

<ContentView.Content>
        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Image Source="bg.png" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.1*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="0.1*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <StackLayout Grid.Column="0" Grid.Row="0" BackgroundColor="Fuchsia" />
                <StackLayout Grid.Column="1" Grid.Row="0" BackgroundColor="Blue" />
                <!--Title Starts-->
                <StackLayout Grid.Column="1" Grid.Row="1" BackgroundColor="Blue" Padding="0, 2, 0, 0">
                    <Label Text="TITLE" HorizontalOptions="Center" TextColor="#28ddff" FontSize="32" BackgroundColor="Black" Opacity="0.7">
                        <Label.FontSize>
                            <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="25" />
                        </Label.FontSize>
                    </Label>
                    <!--Title Ends-->
                    <!--SubTitle Starts-->
                    <Label Text="SUBTITLE" HorizontalOptions="Center" TextColor="#ffffff" FontSize="32" BackgroundColor="Black" Opacity="0.7">
                        <Label.FontSize>
                            <OnPlatform x:TypeArguments="x:Double" iOS="32" Android="27" />
                        </Label.FontSize>
                    </Label>
                </StackLayout>
                <!--SubTitle Ends-->
                <!--Description Starts-->
                <StackLayout Grid.Column="1" Grid.Row="2" BackgroundColor="Blue">
                    <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco." BackgroundColor="Transparent" TextColor="White" FontAttributes="Bold">
                        <Label.FontSize>
                            <OnPlatform x:TypeArguments="x:Double" iOS="15" Android="13" />
                        </Label.FontSize>
                    </Label>
                </StackLayout>
                <!--Description Ends-->
                <StackLayout Grid.Column="1" Grid.Row="3">
                    <Button Text="LOGIN" TextColor="Black" BackgroundColor="White" WidthRequest="120" HorizontalOptions="Center" Clicked="Handle_Clicked" />
                </StackLayout>
            </Grid>
        </AbsoluteLayout>
    </ContentView.Content>

Your suggestions will be very appreciated.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Even though you set the same font size, it will render to different size depending on the device's resolution. If you want your grid to fill full in the AbsoluteLayout, you need to use AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" the same as your image.
    Then depend on your RowDefinitions, the screen will be separated to four parts, since you use StackLayout to wrap your content. StackLayout won't clip its children if the content is too large. So your label will render outside the father layout.
    This different display is caused by the particular device‘s screen resolution and sizes. If you have two devices with the same resolution and size, Grid will give a same presentation.

Sign In or Register to comment.