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.

    Xamarin

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.

    Xamarin

Step 3

After this, go to

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

    Xamarin

 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.

    Xamarin
    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.

    Xamarin
    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.