0

I started learning maui a couple of days ago. I'm making an app on pixel 9 pro emulator, but when I run my app on samsung s21 fe, the interface gets too big. Below I will attach the maui script and photos. (I connect to s 21 fe via cable and don’t use an emulator)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage BackgroundColor="#DCEBFF"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Interval_Jogging.MainPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             Shell.BackgroundColor="#DCEBFF">
    <ContentPage.Behaviors>
        <toolkit:StatusBarBehavior
            StatusBarColor="#DCEBFF"
            StatusBarStyle="DarkContent"/>
    </ContentPage.Behaviors>

    <Grid>
        <Button
            x:Name="MenuBtn1"
            VerticalOptions="End"
            HorizontalOptions="Center"
            WidthRequest="150"  HeightRequest="80"
            CornerRadius="50"
            Margin="0, 0, 0, 30"
            BackgroundColor="#AFC3FF" />
        <RoundRectangle
            x:Name="Rect"
            WidthRequest="370"  HeightRequest="390"
            Margin="0, 0, 0, 90"
            CornerRadius="50"
            BackgroundColor="#AFC3FF" />
        <RoundRectangle
            x:Name="Rect1"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            WidthRequest="370"
            HeightRequest="300"
            CornerRadius="50">
            <RoundRectangle.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#406BEB" Offset="0.0" />
                    <GradientStop Color="#5F87FF" Offset="1.0" />
                </LinearGradientBrush>
            </RoundRectangle.Background>
        </RoundRectangle>
        <Label
            x:Name="Walk_RunText"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            Margin="0, 0, 0, 220"
            FontFamily="ClimateRegular"
            FontSize="60"
            TextColor="White"
            Text="Walk"/>
        <Image
            x:Name="Walk_RunImg"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            Margin="0, 70, 0, 0"
            Scale="0.5"
            Source="icon_walk.png"/>
        <Label
            x:Name="TimerText"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            Margin="0, 0, 0, 390"
            FontFamily="LexendBold"
            FontSize="75"
            TextColor="#436DED"
            Text="00:00:30"/>
        <Button
            x:Name="PauseBtn"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            WidthRequest="175"  HeightRequest="80"
            CornerRadius="50"
            Margin="0, 420, 195, 0"
            Text="PAUSE"
            FontFamily="LexendBold"
            FontSize="35"
            TextColor="#436DED"
            BackgroundColor="#AFC3FF" />
        <Button
            x:Name="StopBtn"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            WidthRequest="175"  HeightRequest="80"
            CornerRadius="50"
            Margin="195, 420, 0, 0"
            Text="STOP"
            FontFamily="LexendBold"
            FontSize="35"
            TextColor="#B55354"
            BackgroundColor="#E5A2A2" />
        <RoundRectangle
            x:Name="WorkoutTime"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            WidthRequest="190"  HeightRequest="80"
            CornerRadius="50"
            Margin="0, 0, 180, 600"
            BackgroundColor="#AFC3FF" />
    </Grid>
</ContentPage>

pixel 9 pro s21 fe

As I mentioned earlier, I started learning maui quite recently and I don’t know what to do at all. I didn't find the answer anywhere.

Improve this question
5
  • You have an issue with the margins. See learn.microsoft.com/en-us/dotnet/maui/user-interface/… and egvijayanand.in/2024/03/22/… Commented Aug 14 at 12:13
  • @jdweng I looked at these articles, but still didn’t understand anything. Do I have a specific error in the script, or is absolutely everything wrong? Commented Aug 14 at 15:00
  • The page on the left has a margin/border around the Walk Object while the page on the left does not. You want to make sure when the object is scaled there is always a minimum margin /border around the page. Commented Aug 14 at 16:46
  • You're not using "fluent design" principles. Anytime you supply a "hard-coded" dimension or a scaling factor, you limit the framework to adapt to the various devices it runs on. There are device "break points", and size multiples, that should be considered when designing for multiple devices. One tests on multiple devices, before "finalizing" margins, font sizes, etc. Commented Aug 14 at 16:52
  • The device on the right apparently has fewer DIPs across its screen. Unfortunately, every device is a little different. That device may be an extreme case. Instead of numbers, like widthRequest=100, use Grid or FlexLayout, so you can divide the screen width between items in each row. Then margins or padding to make gaps between items. Commented Sep 2 at 8:19
Related questions
1244
Android SDK installation doesn't find JDK
1
Xamarin.Forms TitleView FillAndExpand not working with Android
750
Standard Android Button with a different color
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.