read

Xamarin.Forms is a crazy productive framework for building cross platform apps. However, straight out of the box you might find your User Interfaces are a bit bland. A good understanding of the layout system (and a good graphic designer) are really going to help you make your UI’s awesome. (or at least not suck).

So let’s see how to recreate a simple Social Network profile type page in Xamarin.Forms.

There are two challenge ingredients for this app.

  1. Creating a curved header Image
  2. Making a Profile Image that overlaps the header

The design of the app looks a little like this:

Basic Layout

Grids are my default goto layout container for Xamarin.Forms. They aren’t perfect for every situation, but they do provide:

  • Proportional sizing of rows and columns,
  • The ability to overlaying controls within a cell (or multiple cells), and
  • They resize reasonably well by default

All of which make them pretty useful for a range of designs.

The basic structure of the page is a simple Grid with one column and multiple rows. Within the cells are stack layouts for some of the text elements that stack on each other, and to provide the three social stats across the page it has a nested grid with three columns.

Using Xamarin Inspector is a pretty good way of visualising the View Hierarchy.

Let’s break it down

 

Header

The header is just basically an Image that fills the first row of the Grid. To get the curve at the bottom you have a couple of options.

Option 1: Pre-made Image
You could create your header image with a curve at the bottom like this:


The downside of this is that you have to prepare this ahead of time, and may not be appropriate for dynamically loaded images.

Option 2: Apply a mask
Instead, we can kind of cheat and just add a mask image that lays over the bottom of the background header image. This is the option I went for here because it provides more flexibility. We could for example, have different masks for different OS’s or different Idioms (eg. Phone, Tablet, Desktop). The mask image could be any design you want, but for this I just went for a simple arc, like this (shadow added so you can see the shape).

It provides a nice effect and the only real downside is that it has to be the same colour as the background. You may notice that there is something slightly hacky in there and that is setting the Margin bottom to -1. This is just to cover off some weirdness you might get on different sizes where the background shows underneath (presumably due to rounding errors of the AspectFill). So putting the value to -1 just means it will handle that boundary condition.

Profile Image

The profile image is just a simple graphic, but the trick to get it to overlay the background image is with just a couple of settings.

  • Set the WidthRequest and HeightRequest to a known value (100 in this case)
  • Set the Margin to a negative value so that it comes up the page by half of it’s height (50).

And that’s it.

Now I did kind of cheat because I’ve got a precreated image for this sample, but that’s because I just wanted to talk about layout. In a real app, I highly recommend you use the ImageCirclePlugin from James Montemagno, or use the FFImageLoading Library and apply a CircleTransformation to the image.

ScrollView

I’ve wrapped the main grid with a ScrollView, this is just so if the page ends up being larger than the screen then you can scroll down to the bottom.

Also there is a ScrollView around the Profile Description. Generally speaking having one ScrollView within another is a no-no, but in this case it’s not really a deal breaker because it is just there to handle the case where the profile description is just a little bit longer and pushes the button off the bottom of the page.

How does it scale?

 

The true test of any page is how does it scale across different sizes, and actually it does pretty well. That’s the magic of grids.

Show me the codez

 

A little bit of Style

 

You’ll notice that I use Styles throughout the page. This is really important so you are hard coding values all around the place. The basic structure of my ResourceDictionary is normally something like:

 

Colors

First I specify the colors I use throughout the system. Of course, this makes it nice and easy to change later on.

 

Font Families

Specifying font families for each platform allow me to specify the base fonts used for different weights and on different platforms. This makes it dead simple to change the fonts across the application if required.

 

Fonts

Specifying the fonts allows me to create basic font types which incorporate FontSize and FontFamily, which references the font families already defined in resource dictionary.

 

Styles

And finally we have the styles, these are the various styles for elements I want to use throughout the application. This basically brings together colours and Fonts into styles which I can apply to my elements.

 

More to come

 

So that’s a a quick sample of how to do a pretty common layout in Xamarin.Forms with grids and some overlapping elements. Always remember, there are lots of different ways we could achieve the same layout, but this what sprang to mind.

I’ve got a whole series of layouts I’ll be posting over the comming weeks to show different layout techniques and ideas.

As YouTubers would say: “let me know in the comments if you liked this” 🙂 Also, If you have any layouts that you thing would be interesting to cover, just let me know.

Oh yeah, and you can grab the project over at https://github.com/kphillpotts/XamarinFormsLayoutChallenges

Happy Layouts!

Kym

Mobile, Xamarin, Windows Store Apps, Agile -- I love 'em all! Check out more


Published on

Show Comments
  1. Hi Kym!

    Looking great! I’m looking forward to the layouts to come. I’m an effort to aggregate the coolest Forms layouts me and a colleague have launched snppts.io. It didn’t really take off because of the lack of content.

    If you’d like maybe you could put some of your layouts on there and hopefully turn it into a success 🙂

    Nevertheless, keep them coming!

    1. Pranay says:

      @Gerald, snppts.io is indeed a very good idea! Look forward to seeing many more out there.

      @Kym, thank you! this series on layouts will be a great help for many of us. And a good start with this one.

      1. Pranay says:

        @Kym, Oh and if it helps to point you to some good UI design that you can cover, here are a few: MakeMytrip (India based), Selfcare app, Runkeeper and UOBSingapore.

      2. Kym says:

        Awesome thanks. I’ll check them out!

  2. Kym says:

    Thanks Gerald,

    Happy to add to Snppts.io – All the better for the community.

    Cheers,
    Kym

  3. Kym, this is great. Thanks for sharing!

    1. Kym says:

      No worries Kevin, let me know if there are any others you would find useful

  4. Junian says:

    Hi Kym,

    Thanks for sharing this tutorial. Just the one I’m looking for!

    1. Kym says:

      No worries, pleased it’s useful for you!

  5. Julie Misson says:

    Many thanks Kym. Extremely useful. I have a few layouts that I would love to know how to do. If you are interested I can send them to you to see if they are suitable for a tutorial.

    1. Kym says:

      Pleased you found it useful Julie. Please do send through some layouts, would love to create some tutorials for layout challenges people are facing

  6. Bart says:

    Hi Kym, I liked this. I think it’s very valuable to have these kind of samples available. Looking forward to the others in your series.


Leave a Reply

Your email address will not be published. Required fields are marked *

Kym Phillpotts

I write about Xamarin Forms, mobile development or whatever else I might be concentrating on.

Back to Home