How can I make an attractive and balanced displaying of few short informations on a 13,3" tablet?

antinetaantineta CAMember ✭✭
edited May 2015 in Xamarin.Forms

Hi,

I have actually some difficulties with tablet adaptation of the application I write.

I develop an application that need to run on phones and tablets. I work with a 13,3" tablet, so I have a very large screen. One of the pages display few informations, but it's very short. I try to make a design who is attractive and balanced for every page, so in this case, it's very difficult. On the phone version, it's generally correct (it could be better), but on the tablet version, it's ugly : all labels are compacted in the top-left corner, and I can't think how to correct it for an attractive, balanced displaying. I never use pixel-size for labels, always "Micro", "Small", "Medium" or "Large".

Anybody have some ideas for this situation? I am opened for every suggestion.

Thanks in advance.

Answers

  • AdamWolfAdamWolf USMember, University ✭✭

    Hi @antineta you could use Device.Idiom to change your fonts or layout you use on phones or tablets.

    TargetIdiom Enum has these values:

    • Desktop
    • Phone
    • Tablet
    • Unsupported
  • antinetaantineta CAMember ✭✭

    @AdamWolf,

    Thanks for your answer.

    How can I implemented it if my application need to run on phones and tablets with the same build?

  • AdamWolfAdamWolf USMember, University ✭✭

    Try this.

    var fontsize = 10;
    
    if (Device.Idiom == TargetIdiom.Tablet) {
        fontsize = 30;
    }
    
  • antinetaantineta CAMember ✭✭

    I currently use XAML. I think your code will only works if I make my user interface with C#?

  • JohnHardmanJohnHardman GBUniversity mod

    @artineta - another thing you can do is to draw the focus of the viewer to a smaller area of the screen. The attached image is something I knocked together as a prototype earlier (this is a screenshot from my iPad). As the text strings are all quite short, the screen looked unbalanced (text on the left, white space on the right), so rather than use the whole screen I put the blue border around the outside of a central, smaller area, in which the short text strings are shown. It needs more work, but it is one option.

  • stvansolanostvansolano UMInsider, University ✭✭✭

    @antineta You could implement a Converter and use it from your XAML and have the Device.Idiom detection stuff as needed.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    Device.Idiom can be used in xaml, like so:

    <StackLayout>
        <StackLayout.Orientation>
        <OnIdiom x:TypeArguments="StackOrientation">
            <OnIdiom.Phone>Vertical</OnIdiom.Phone>
            <OnIdiom.Tablet>Horizontal</OnIdiom.Tablet>
        </OnIdiom>
        </StackLayout.Orientation>
        <Label Text="child0"/>
        <Label Text="child1"/>          
    </StackLayout>
    

    (Taken from @StephaneDelcroix in this thread)

Sign In or Register to comment.