The golden ratio has been identified naturally in nature for hundreds of years. Likewise, in art and architecture, it has been a staple of good composition. In short, humans just find layouts that exhibit the golden ratio naturally pleasing to the eye. It is just magic. Luckily for us Xamarin developers, Xamarin.Forms XAML has a very easy way of implementing the golden ratio and maintaining the correct ratio, no matter the device screen size. Note that you will need a different layout for Landscape mode. The following shows four different XAML implementations of the golden ratio for a phone-sized display, in portrait mode.
Check out my GitHub Repo for a Working Example of this.
The simplest implementation would just include two regions.
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="Red" Grid.Row="0">
<StackLayout >
<Label Text="Row Height = 5*" TextColor="White"/>
</StackLayout>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="1">
<StackLayout >
<Label Text="Row Height = 8*" TextColor="White"/>
</StackLayout>
</Grid>
</Grid>
Adding a bit more complexity in the next iteration, the 5 box is split into two regions. This is a really useful layout for Xamarin.Forms XAML for a portrait mode on a phone.
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="2*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid BackgroundColor="Red" Grid.Row="0" Grid.RowSpan="2">
<StackLayout>
<Label Text="Row Height = 5*" TextColor="White" />
<Label Text="Column Width = 5*" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Orange" Grid.Row="0" Grid.Column="1">
<StackLayout>
<Label Text="Row Height = 3*" />
<Label Text="Column Width = 3*" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Yellow" Grid.Row="1" Grid.Column="1">
<StackLayout>
<Label Text="Row Height = 2*" />
<Label Text="Column Width = 3*" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="2" Grid.ColumnSpan="2">
<StackLayout>
<Label Text="Row Height = 8*" TextColor="White" FontSize="Large" />
<Label Text="Column Width = 8*" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
</Grid>
This is more of a traditional Golden Ratio.
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor="Red" Grid.Row="0" Grid.RowSpan="3" >
<StackLayout >
<Label Text="Row Height = 5*" TextColor="White" />
<Label Text="Column Width = 5*" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Orange" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<StackLayout >
<Label Text="Row Height = 3*" />
<Label Text="Column Width = 3*" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Yellow" Grid.Row="1" Grid.Column="2" Grid.RowSpan="2">
<StackLayout >
<Label Text="2" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Black" Grid.Row="1" Grid.Column="1">
<StackLayout >
<Label Text="1" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Black" Grid.Row="2" Grid.Column="1">
<StackLayout >
<Label Text="1" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="3" Grid.ColumnSpan="3">
<StackLayout >
<Label Text="Row Height = 8*" TextColor="White" FontSize="Large"/>
<Label Text="Column Width = 8*" TextColor="White" FontSize="Large"/>
</StackLayout>
</Grid>
</Grid>
Ok – so this next one is a bit of a stretch, I am not sure I would ever use this in a real app. But, I thought it might be fun to see what it would look like to build out one more iteration of the spiral. I kept the smaller boxes the same color to illustrate the boxes I added.
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="13*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="34*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="21*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor="Purple" Grid.Row="0" Grid.RowSpan="4" >
<StackLayout >
<Label Text="21" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Green" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4">
<StackLayout >
<Label Text="13" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="1" Grid.Column="4" Grid.RowSpan="3">
<StackLayout >
<Label Text="8" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Orange" Grid.Row="1" Grid.RowSpan="2" Grid.Column="1">
<StackLayout >
<Label Text="3" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Yellow" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2">
<StackLayout >
<Label Text="2" />
</StackLayout>
</Grid>
<Grid BackgroundColor="Black" Grid.Row="2" Grid.Column="2">
<StackLayout>
<Label Text="1" TextColor="White" FontSize="Micro"/>
</StackLayout>
</Grid>
<Grid BackgroundColor="Black" Grid.Row="2" Grid.Column="3">
<StackLayout >
<Label Text="1" TextColor="White" FontSize="Micro"/>
</StackLayout>
</Grid>
<Grid BackgroundColor="Red" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3">
<StackLayout>
<Label Text="5" TextColor="White" />
</StackLayout>
</Grid>
<Grid BackgroundColor="SaddleBrown" Grid.Row="4" Grid.ColumnSpan="5">
<StackLayout>
<Label Text="34" FontSize="Large" TextColor="White"/>
</StackLayout>
</Grid>
</Grid>
This was originally one of my 25 Ways to Deliver your Xamarin.Forms App On-Time and On-Budget.
Read more about the Golden Ratio! Happy Coding!