Xamarin.Forms working within Android low resolution devices.

I was working on a project last time, the customer required the Xamarin.Forms App can be running on low resolution devices, like 480×800. I was following the design of iPhone, every thing worked fine with devices above iPhone 5, but not good on some Android devices with low resolution.

My Code is here. That is two entry and one button in a Frame, very simple.
<?xml version=1.0 encoding=UTF8?>
<local:ValidatorBasePage 
    xmlns:local=clrnamespace:MyAPP 
    BackgroundColor={x:Static local:AppColors.PageBackgroundGrey}
    Title=Enter Account &amp; Routing &#35;>
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height=9* />
                <RowDefinition Height=1* />
            </Grid.RowDefinitions>
                <Grid Padding=10,30,10,30>
                    <Grid.RowDefinitions>
                        <RowDefinition Height=*/>
                        <RowDefinition Height=2*/>
                        <RowDefinition Height=*/>
                    </Grid.RowDefinitions>
                    <Frame>
                        <Image Source=ManualEnrollmentTopImage/>
                    </Frame>
                    <Frame Grid.Row=1>
                        <Grid Padding=10,10,10,15 RowSpacing=10>
                            <Grid.RowDefinitions>
                                <RowDefinition Height=1.5* />
                                <RowDefinition Height=1* />
                                <RowDefinition Height=1* />
                            </Grid.RowDefinitions>
                            <Label Text=“… />
                            <Entry Grid.Row=1/>
                            <Entry Grid.Row=2/>                         
                        </Grid>
                    </Frame>
                </Grid>
            <Button Grid.Row=1/>
        </Grid>
    </ContentPage.Content>
</local:ValidatorBasePage>

I want to built UI like this, even the keyboard appear, everything will be fine on iOS.

Simulator Screen Shot 7 Feb 2016, 10.21.36 AM

But in some Android devices, it like this. When the keyboard appear, it’s terrible.

 

That’s because of I have set this

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height=9* />
                <RowDefinition Height=1* />
            </Grid.RowDefinitions>
                <Grid Padding=10,30,10,30>
                    <Grid.RowDefinitions>
                        <RowDefinition Height=*/>
                        <RowDefinition Height=2*/>
                        <RowDefinition Height=*/>
                    </Grid.RowDefinitions>

The grid’s height is based on the screen size, but the label and entry’s height is by default. It’s possible to get the devices’ size and do some change in UI, but it need lots of codes behind and hard to maintain.

Finally, I found a simply way to do that, just add a ScrollView
Like

            <ScrollView>
                <Grid Padding=10,30,10,30>
                    <Grid.RowDefinitions>
                        <RowDefinition Height=*/>
                        <RowDefinition Height=2*/>
                        <RowDefinition Height=*/>
                    </Grid.RowDefinitions>
                    <Frame>
                        <Image Source=ManualEnrollmentTopImage/>
                    </Frame>
                    <Frame Grid.Row=1>
                        <Grid Padding=10,10,10,15 
RowSpacing=10 >
                            …
                        </Grid>
                    </Frame>
                </Grid>
            </ScrollView>

After that, it looks better in small devices. But sometime, the keyboard will cover the last entry, to solve this, you can make the third row in Grid higher then before.

Finally It looks like this, much better.

Nexus S (KitKat) Screenshot 3

Advertisements