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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s