How to Proportionally Size Columns with FlexGrid (Star Sizing)

We designed Xuni FlexGrid for mobile apps, and one of the key principles to designing a great mobile app is adaptability. Adaptive UIs can mean a lot of things, but specifically here we’re looking at adapting to various device sizes. It’s hard enough to predict the screen size that your app will be run on when developing for a single platform, but with Xuni we are interested in cross-platform at once so adaptability out of the box is extremely valuable. In this post I will discuss a useful feature we’ve added to FlexGrid known as star-sizing columns. Star sizing lets you proportionally size columns and enables FlexGrid to be used in more adaptive scenarios. It’s such a simple concept and feature to implement, but it’s useful in so many scenarios. If you’re going to use FlexGrid you should know how to take advantage of its star sizing capabilities. In a nutshell, star sizing allows columns to stretch and fill the available space. So you can achieve the same exact layout on devices of all sizes and orientations. If you’ve done any HTML or XAML development then you have probably created a Grid or a Table that proportionally sizes itself to the page. That is typically one basis for an adaptive UI, and it conceptually represents what star sizing delivers for FlexGrid. In fact, this feature works exactly like the XAML Grid control in implementation. If you are using FlexGrid in Xamarin.Forms (which supports XAML-defined views), you can implement star sizing in XAML exactly how you would with a regular Grid control. XAML:

<xuni:FlexGrid x:Name="grid" AutoGenerateColumns="False">  
  <xuni:FlexGrid.Columns>  
    <xuni:GridColumn Binding="FirstName" Width="*"/>  
    <xuni:GridColumn Binding="LastName" Width="*"/>  
    <xuni:GridColumn Binding="LastOrderDate" Width="*" Format="d"/>  
    <xuni:GridColumn Binding="OrderTotal" Width="*" Format="N"/>  
  </xuni:FlexGrid.Columns>  
</xuni:FlexGrid>  

It works by using the asterisk symbol within the Width value of a column (hence the term, star-sizing). Setting the width of every column to “” will result in every column being the same width regardless of the screen size. And just like the XAML Grid control, you can size columns proportionally to one another, as well as include some fixed column widths where necessary. For instance, you can make one column twice the size of every other column by setting its width to “2”, or three-times the size with “3*” and so on. Columns with explicit sizes claim their UI space first and the remaining space is divided among the star-sized columns accordingly. In this animation you can see some columns have different sizes but remain proportional when the resolution changes. You can configure star sizing in code too. If you’re working in Android or iOS then the coded approach is your only option. The code below shows how to access 2 existing columns in code and set each Width. Check out the documentation or samples to see how the columns are fully created in code. C# (Xamarin.Forms):

// Width="*"  
grid.Columns[1].Width = new GridLength(1, GridUnitType.Star);  
// Width="2*"  
grid.Columns[2].Width = new GridLength(2, GridUnitType.Star);  

C# (Xamarin.iOS):

// Width="*"  
Column c1 = grid.Columns.GetItem<Column>(1);  
c1.Width= 1;  
c1.WidthType = FlexColumnWidth.FlexColumnWidthStar;  
// Width="2*"  
Column c2 = grid.Columns.GetItem<Column>(2);  
c2.Width= 2;  
c2.WidthType = FlexColumnWidth.FlexColumnWidthStar;  

Java: [java] // Width = "" GridColumn col1 = mGrid.getColumns().get(1); col1.setWidth(""); // Width = "2" GridColumn col2 = mGrid.getColumns().get(2); col2.setWidth("2"); [/java] Objective-C:

// Width = “*”  
FlexColumn *c1 = [grid.columns objectAtIndex:1];  
c1.widthType = FlexColumnWidthStar;  
c1.width = 1;  
// Width = “2*”  
FlexColumn *c2 = [grid.columns objectAtIndex:2];  
c2.widthType = FlexColumnWidthStar;  
c2.width = 2;  

Swift:

// Width = “*”  
let c1: FlexColumn = grid.columns.objectAtIndex(1) as! FlexColumn  
c1.widthType = FlexColumnWidth.Star  
c1.width = 1  
// Width = “2*”  
let c2: FlexColumn = grid.columns.objectAtIndex(2) as! FlexColumn  
c2.widthType = FlexColumnWidth.Star  
c2.width = 2  

Without proportionally sizing columns, it’s very likely that you will end up with columns out of view that the user must scroll. If you have 5 or more columns then this is to be expected on a phone, but if you have 3 or 4 columns you may not want any horizontal scrolling. Star sizing is useful to eliminate horizontal scrolling and use FlexGrid like a list.

Anything that can go wrong, will go wrong?

What makes this feature unique in FlexGrid is that there exists a fail-safe. What should happen if the user’s screen is so small that proportionally the columns may become unreadable? Each column in FlexGrid has a MinWidth property which you can specify to guarantee that the column will never be sized smaller. If the cumulative MinWidth value from all the columns is still greater than the device size, then FlexGrid falls back into horizontal scroll-mode so no content is ever unreadable. It may just be off screen and require scrolling into view.

Star-sizing Helps Create Adaptive Grids

Star sizing allows columns to stretch and fill the available space - a common approach to mobile layouts that may be run on a multitude of device sizes. The main thing to take away from this post is that star-sizing is just a fancy term for proportionally sizing columns in a grid. It’s a small, yet significant part in creating an adaptive UI. This post is intended to be part 1 of several topics on tips to creating an adaptive FlexGrid. Other things should go into consideration when it comes to an adaptive FlexGrid, such as freezing columns for smaller displays or showing less columns. We even have more in the pipeline for adaptive FlexGrid features so stay tuned! See this feature in action by installing the Xuni Explorer app on your phone.