A MAUI application looks great in Android but terrible in iOS

[JiMMy2024]

Hello..

I have this App.xaml file:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimeApp"
             xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material"
             x:Class="TimeApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <material:ColorResource />
                <ResourceDictionary x:Name="appStyles" Source="Resources/Styles/Styles.xaml" />
                <material:StyleResource BasedOn="{x:Reference appStyles}" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

This is the AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="TimeApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:controls="clr-namespace:TimeApp.Controls"
    xmlns:views="clr-namespace:TimeApp.Views"
    xmlns:helpers="clr-namespace:TimeApp.Helpers"
    xmlns:local="clr-namespace:TimeApp">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Cargando"
            Shell.NavBarIsVisible="false"
            Shell.TabBarIsVisible="false"
            FlyoutItemIsVisible="False"
            ContentTemplate="{DataTemplate views:LoadingPage}"
            Route="LoadingPage" />
        <ShellContent Route="LoginPage"
                      Shell.NavBarIsVisible="false"
                      Shell.TabBarIsVisible="false"
                      FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate views:LoginPage}"/>
        <ShellContent
            Shell.NavBarIsVisible="true"
            Shell.TabBarIsVisible="false"
            Title="Jornada Laboral"
            ContentTemplate="{DataTemplate views:MainPage}"
            Route="MainPage">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Briefcase}" Color="Coral" Size="50"/>
            </ShellContent.Icon>
        </ShellContent>
        <ShellContent
            Shell.NavBarIsVisible="true"
            Shell.TabBarIsVisible="false"
            Title="Historia"
            ContentTemplate="{DataTemplate views:AsistenciaHistoricaPage}"
            Route="AsistenciaHistoricaPage">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.History}" Color="MediumVioletRed" Size="50"/>
            </ShellContent.Icon>
        </ShellContent>
        <ShellContent
            Shell.NavBarIsVisible="true"
            Shell.TabBarIsVisible="false"
            Title="Definición de Turno"
            ContentTemplate="{DataTemplate views:TurnoPage}"
            Route="TurnoPage">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Clock}" Color="IndianRed" Size="50"/>
            </ShellContent.Icon>
        </ShellContent>
        <ShellContent
            Shell.NavBarIsVisible="true"
            Shell.TabBarIsVisible="false"
            Title="Ubicación"
            ContentTemplate="{DataTemplate views:UbicacionPage}"
            Route="UbicacionPage">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Map}" Color="SteelBlue" Size="50"/>
            </ShellContent.Icon>
        </ShellContent>
        <ShellContent
            Shell.NavBarIsVisible="true"
            Shell.TabBarIsVisible="false"
            Title="Enrolamiento"
            ContentTemplate="{DataTemplate views:EnrolamientoPage}"
            Route="EnrolamientoPage">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="Maroon" Size="50"/>
            </ShellContent.Icon>
        </ShellContent>
    </FlyoutItem>
    <MenuItem Text="Cerrar Sesión" Clicked="LogOut_Clicked">
        <MenuItem.IconImageSource>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.SignOut}" Color="Tomato" Size="50"/>
        </MenuItem.IconImageSource>
    </MenuItem>
    <Shell.FlyoutFooter>
        <controls:FooterControl />
    </Shell.FlyoutFooter>
</Shell>

This is MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:TimeApp.ViewModels"
             xmlns:controls="clr-namespace:TimeApp.Controls"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
             x:Class="TimeApp.Views.MainPage"
             xmlns:helpers="clr-namespace:TimeApp.Helpers"
             x:DataType="vm:MainViewModel">
    <AbsoluteLayout>
        <StackLayout Padding="25" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <Label x:Name="Saludo" Text="" FontSize="20" FontAttributes="Bold" HorizontalTextAlignment="Center" />
            <Label x:Name="Empresa" Text="" HorizontalTextAlignment="Center" />
            <HorizontalStackLayout VerticalOptions="Start">
                <Label Margin="0, 22, 10, 0" FontFamily="FontAwesomeRegular" Text="{x:Static helpers:FontAwesomeIcons.Calendar}"></Label>
                <Label Margin="0, 20, 0, 0" Text="{Binding CurrentDate, StringFormat='{0:dddd, d \\de MMMM \\de yyyy}'}" />
            </HorizontalStackLayout>
            <controls:AttendanceControl VerticalOptions="StartAndExpand" Margin="0, 20, 0, 20" />
            <controls:ShiftControl x:Name="shiftView" VerticalOptions="StartAndExpand" />
            <Grid ColumnDefinitions="*, *">
                <Button Margin="10, 0, 10, 0"
                        Grid.Column="0"
                        Text="Entrada"
                        BackgroundColor="Green"
                        HorizontalOptions="FillAndExpand"
                        Clicked="EntradaButton_Clicked"/>
                <Button Margin="10, 0, 10, 0"
                        Grid.Column="1"
                        Text="Salida"
                        BackgroundColor="Red"
                        HorizontalOptions="FillAndExpand"
                        Clicked="SalidaButton_Clicked"/>
            </Grid>
        </StackLayout>
        <StackLayout
                x:Name="aiLayout"
                AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All"
                BackgroundColor="WhiteSmoke" Opacity="0.5">
            <ActivityIndicator Color="{StaticResource Primary}"
                               HeightRequest="50" WidthRequest="50"
                               x:Name="Waiting" IsRunning="True" VerticalOptions="CenterAndExpand" />
        </StackLayout>
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="checkResult">
            <skia:SKLottieView
                Source="check_animated.json"
                RepeatCount="0"
                HeightRequest="200"
                WidthRequest="200"
                IsVisible="false"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"/>
            <skia:SKLottieView
                Source="failed_animated.json"
                RepeatCount="0"
                HeightRequest="200"
                WidthRequest="200"
                IsVisible="false"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"/>
        </StackLayout>
    </AbsoluteLayout>
</ContentPage>

And this is how it looks in Android:

And this is the Drawer in Android:

However, this is how the app appears in iOS:

I have the full project in GitHub. I can share it if you can take a look.

Thanks
Jaime

 

[Rythorian]

using Microsoft.Maui.Controls;

namespace MyMauiApp
{
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            var label = new Label
            {
                Text = "Welcome to My MAUI App",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                FontSize = 24
            };

            var button = new Button
            {
                Text = "Click Me",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };

            button.Clicked += OnButtonClicked;

            Content = new StackLayout
            {
                Children = { label, button }
            };
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            DisplayAlert("Alert", "Button was clicked!", "OK");
        }
    }
}