Xamarin.Android - Horizontal And Vertical View In Linear Layout Using Visual Studio 2017

What are Xamarin and Xamarin Forms?

Xamarin is a cross-platform tool to develop multi-platform applications.
Xamarin offers a shared code (C#) but separately designed UIs Android (java), Windows (C#), iOS (Objective C & XCODE).
Xamarin.Forms UIs and shared code (C#) are the same in all projects. To develop multi-platforms applications, run all projects (Android, Windows, iOS) at the same time.

Prerequisites

Visual Studio 2017 Enterprise

The steps given below are required to be followed in order to design Linear layout horizontal & vertical view in Xamarin.Android, using Microsoft Visual Studio 2017.

Step 1

Go to the Visual Studio 2017.
Click File -> New -> Project.

Step 2

Click to C# -> Android -> Blank App (Android).
Enter the application name.
Go to Blank App = A project for creating a Xamarin.Android Application.

Step 3

After this, go to

Open Solution Explorer window.
Click Resources folder followed by clicking Layout folder -> Open Main.axml

The below steps are the same for Horizontal & Vertical Views.

Step 4.1: Linear Layout – Horizontal View

In this step, go to the .axml page and insert the code given below in Main.axml and save it.
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="horizontal"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:minWidth="25px"
7. android:minHeight="25px">
8. <Button
9. android:text="Click me 1"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:id="@+id/button1"
13. android:layout_margin="5dp"
14. android:layout_marginRight="2dp"
15. android:layout_marginLeft="2dp"
16. android:layout_marginTop="5.0dp"
17. android:backgroundTint="#ff5f9ea0" />
18. <Button
19. android:text="Click to"
20. android:layout_width="129.5dp"
21. android:layout_height="39.0dp"
22. android:id="@+id/button2"
23. android:layout_margin="10dp"
24. android:layout_marginRight="2dp"
25. android:layout_marginLeft="2dp"
26. android:layout_marginTop="5dp"
27. android:backgroundTint="#ff0000ff"
28. android:layout_marginBottom="12.5dp" />
29. <Button
30. android:text="Click me 2"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:id="@+id/button1"
34. android:layout_margin="5dp"
35. android:layout_marginRight="2dp"
36. android:layout_marginLeft="2dp"
37. android:layout_marginTop="5.0dp"
38. android:backgroundTint="#ffdaa520" />
39. </LinearLayout>

Click Main.axml page Designer View. Wait for a few minutes to get the Designer View visible.

Xamarin

The Designer View horizontal buttons are given below.

Xamarin

Step 4.2: Linear Layout – Vertical View

In this step, go to axml page. Insert the code given below in Main.axml and save it.
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:minWidth="25px"
7. android:minHeight="25px">
8. <Button
9. android:text="Am first button"
10. android:layout_width="match_parent"
11. android:layout_height="wrap_content"
12. android:id="@+id/button1"
13. android:backgroundTint="#ffff7f50" />
14. <Button
15. android:text="ButtonAam Scond Button"
16. android:layout_width="match_parent"
17. android:layout_height="wrap_content"
18. android:id="@+id/button2"
19. android:backgroundTint="#ffd2691e" />
20. <Button
21. android:text="Don't Touch Me"
22. android:layout_width="match_parent"
23. android:layout_height="wrap_content"
24. android:id="@+id/button3"
25. android:layout_marginLeft="2dp"
26. android:layout_marginRight="2dp"
27. android:backgroundTint="#ff7fffd4" />
28. <Button
29. android:text="touch Me"
30. android:layout_width="match_parent"
31. android:layout_height="wrap_content"
32. android:id="@+id/button4"
33. android:backgroundTint="#ffee82ee"
34. android:layout_marginRight="2dp"
35. android:layout_marginLeft="2dp" />
36. <Button
37. android:text="Button"
38. android:layout_width="match_parent"
39. android:layout_height="wrap_content"
40. android:id="@+id/button5"
41. android:layout_margin="2dp"
42. android:layout_marginLeft="2dp"
43. android:layout_marginRight="2dp"
44. android:backgroundTint="#ff008000" />
45. </LinearLayout>

Go to Main.axml page designer view. Wait for a few minutes to get Designer View visible.

Xamarin

The Designer View vertical buttons are given below.

Xamarin

Your horizontal and vertical Views are designed succesfully.