Scribd
Upload
81 views

RelativeLayout Exercise

The document discusses using a RelativeLayout instead of absolute positioning to keep the space between a banner and description fixed at 30 units, regardless of device size. It describes the elements that would be included in the RelativeLayout such as the banner taking 1/3 of the page height, buttons, and labels, with the description StackLayout positioned 30 units below the banner.

Uploaded by

Houman Jafarnia
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

RelativeLayout Exercise

The document discusses using a RelativeLayout instead of absolute positioning to keep the space between a banner and description fixed at 30 units, regardless of device size. It describes the elements that would be included in the RelativeLayout such as the banner taking 1/3 of the page height, buttons, and labels, with the description StackLayout positioned 30 units below the banner.

Uploaded by

Houman Jafarnia
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Relative Layout By: Mosh Hamedani

Exercise
Quite often, you can interchange between
absolute or relative layout.

Consider the UI from the last exercise.


Earlier, we set the height of the banner to
about a third (0.3) of the page height, and the
y coordinate of the StackLayout that contains
the description to half of the page height.

So, the space between the banner and the


description is 0.2 of the page height. The
bigger the device, the more space between
these two elements.

Sometimes this may be perfectly fine, but


other times you may want to keep this space
fixed. So, let’s imagine we want the
description to be always 30 units below the
banner. Now, it’s better to implement this UI
using RelativeLayout.

• Banner
• BackgroundColor = “#f7f7f7”
• Should take 1/3 of the page height.
• $11.95 label
• TextColor = “#33353a”
• FontSize = “60”
• FontAttributes = “Bold”

1
Relative Layout By: Mosh Hamedani

• Button
• BackgroundColor = “#1695A3”
• BorderRadius = “15”
• HeightRequest = “30”
• FontSize = “15”
• FontAttributes = “Bold”
• StackLayout that contains the description
• Should be 30 units below the parent.
• “Why pay for credit” label
• FontSize = “15”
• FontAttributes = “Bold”
• Description label
• FontSize = “13”

You might also like