Lesson 12: Layouts & ContentPages — Android Dev Tutorial

🎨 UI with MAUI

Layouts & ContentPages

VerticalStackLayout, Grid, FlexLayout, and responsive design.

MAUI Layout Containers

VerticalStackLayout & HorizontalStackLayout

xml

<VerticalStackLayout Spacing="12" Padding="16">
  <Label Text="Title" FontSize="24" FontAttributes="Bold" />
  <Label Text="Subtitle" TextColor="Gray" />
  <Button Text="Go" />
</VerticalStackLayout>

Grid

xml

<Grid RowDefinitions="Auto,*,80"
      ColumnDefinitions="*,*"
      RowSpacing="8" ColumnSpacing="8" Padding="16">

  <Label Text="Header"
         Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />

  <BoxView Color="LightBlue"  Grid.Row="1" Grid.Column="0" />
  <BoxView Color="LightGreen" Grid.Row="1" Grid.Column="1" />

  <Button Text="OK"
          Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>

FlexLayout

xml

<FlexLayout Wrap="Wrap" JustifyContent="SpaceAround">
  <BoxView Color="Coral"     WidthRequest="100" HeightRequest="100" />
  <BoxView Color="Teal"      WidthRequest="100" HeightRequest="100" />
  <BoxView Color="Goldenrod" WidthRequest="100" HeightRequest="100" />
</FlexLayout>

Key Takeaways

VerticalStackLayout/HorizontalStackLayout for simple linear arrangements

Grid for precise row/column positioning and spanning

FlexLayout behaves like CSS flexbox — wrapping, centering, spacing

* = proportional, Auto = content-size, fixed number = exact pixels