Xamarin Forms UI Design in Visual Studio

Welcome to this two-part series of creating a basic app in the form of a BMI Calculator using Xamarin Forms Visual Studio. In this first part, we would design the user interface by adding the UI controls using XAML. In the second part, we would write code to activate the controls and make them work the way we want them to. But before we start, let’s check out what we would be building:

What we would be building

As you can see in the image above, this is a simple BMI Calculator (Body Mass Index).

PROJECT REQUIREMENTS

A computer with Visual Studio 2019 installed

Familiarity with C#.NET and XML

CREATE THE PROJECT

Follow the steps below to create the projects:

1. Fire up Visual Studio 2019
2. Click Create a new Project

3. In the Create a new Project dialog, type Xamarin in the Search bar [labeled 1] and select Android App (Xamarin) [labeled 2]

4. Name the project “BMI Calculator” and click the Create button

5. Select the Blank App template from the template dialog and leave the Minimum Android Version to the default Android 5.0 lollipop

6. Click OK

We are using the Blank App template as we want to start and create all the controls from the ground up. In that way, we would learn how each control works.

Load the Designer (Layout File)

We have successfully created the project. The next thing to do is to load the Designer and the XAML file. The Designer is a user interface for the device simulator where we can add controls directly from the toolbox. We can also see the changes updated as we type the controls in the XAML file. So what is this XAML File?

XAML stands for Extensible Application Markup Language. It is used to create and/or add controls to the Designer in a declarative way. It looks a lot like XML but the only difference is based on its use. While XML is used mainly for web applications, XAML is used for creating controls for both Windows and Mobile applications that target many devices. Follow the steps below to load the XAML Designer.

1. Delete the OnRequestPermissionsResult( ) Method and the Xamarin.Essentials code in line 35 as we don’t need them

2. Click on the Solution Explorer >> Expand the resources folder >> Expand the Layout Folder

3. Double Click the activity_main.xml file

You can change the default android simulator device to test your app. You can set up the simulator to run on your prefered device. Fig 6 was setup to run on Nexus 4 device on the Android Simulator but you can always change it by clicking on the device dropdown (as shown in the red arrow and select the device).

DESIGNING THE LAYOUT WITH XAML

According to Google reference:

The RelativeLayout is a view group that displays child views in relative positions – Google Developer Guide

Linear Layout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute. – Google Developer Guide

The RelativeLayout will allow you to add controls (views) side by side while the LinearLayout can only be done in a linear fashion (like a stack of plate on top of each other) which can either be vertical or horizontal which the user must specify using the android:orientation attribute.

Let’s start designing the layout:

1. In Fig 6, the root layout is the RelativeLayout. Change the RelativeLayout to LinearLayout
2. Choose the Orientation for the layout – In our case, it’s the vertical Orientation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:layout_height="match_parent">
</LinearLayout>

ADDING VIEWS (CONTROLS)

The views to add are basically:

A. The TextView – Think of this as the Label Control (if you are coming from a Windows Desktop developer) which displays texts only. The BMI Calculator we are building from the final image has two TextView controls.

B. The EditText – This will allow the user to type/input text into the view. You can think of this as a Textbox Control. Our app has two EditText controls.

C. Button View – This adds button to the Interface.

1. Write this XAML code to add the TextView control which instructs the user to write the values for the Height and Weight

<TextView
        android:text="Write values for Height and Weight"
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

a) The android:text in line 2 property will display the text “Write values for Height and Weight”.

b) The android:textSize in line 3 will increase the size of the text to 20sp where sp stands for Scaled-Independent Pixels which the unit used to scale texts only.

c) The android:textStyle will bold the text

d) The android:gravity line 5 specifies how an object should position its content. In our case we chose center

e) The android:Layout_marginTop and android:layout_marginBottom would separate the top margin and the bottom margin 16dp and 20dp (where dp is Density-Independent Pixels) of the text.

f) The android:layout_width =”match_parent” means you want the width of the text to extend to the edges of the layout while android:layout_height = “wrap_content” means you want the height of the TextView to be determined based on the text written on the view.

Notice that the TextView has a closing tag in the XAML Code above which is denoted as /> at the end of the wrap content.

2. Go ahead and add other controls as shown in the code below:

<EditText
        android:id="@+id/bodyWeightEditText"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:inputType="number"
        android:imeOptions="actionNext"
        android:hint="Body Weight (Kg)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/bodyHeightEditText"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:inputType="number"
        android:imeOptions="actionNext"
        android:hint="Height (m)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"
        android:hint="Answer"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/calculateBMI"
        android:text="Calculate"
        android:layout_marginTop="30dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="300dp"
        android:layout_height="50dp"/>

We have added the other remaining controls. We have defined each control with an id as bodyWeightEditText, bodyHeightEditText, and calculateBMI because we would reference them when we are writing the code. The android:hint property (in lines 7, 17, and 25) would show the hint value we have defined onto the control.

The android:inputype = “number” would display the number keyboard on the android device. The full code is shown below:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:layout_height="match_parent">


    <TextView
        android:text="Write values for Height and Weight"
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/bodyWeightEditText"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:inputType="number"
        android:imeOptions="actionNext"
        android:hint="Body Weight (Kg)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/bodyHeightEditText"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:inputType="number"
        android:imeOptions="actionNext"
        android:hint="Height (m)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"
        android:hint="Answer"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/calculateBMI"
        android:text="Calculate"
        android:layout_marginTop="30dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="300dp"
        android:layout_height="50dp"/>
</LinearLayout>

RUNNING THE APP

To run the app, click the device you have configured to display the final image