Xamarin LinerLayout

LinerLayout is a layout pattern which can arrange child  element either horizontally or vertically. LinerLayout arranage child element either horizontally or vertically consecutive manner. The vertical or horizontal design can we define on the property called "orientation". 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

           xmlns:tools="http://schemas.android.com/tools"

           android:layout_width="match_parent"

           android:layout_height="match_parent"

           android:gravity="center_horizontal"

           android:orientation="vertical"

           android:background="#194575">

</LinearLayout>

We are designing a LinerLayout with some child element  .For example , we are taking "Button" element. Now , when we are defining orientation  horizontal, how the interface will look like

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="center_horizontal"

        android:orientation="horizontal"

        android:background="#194575">

<Button

         android:text="Button 1"

         android:layout_width="100dp"

         android:layout_height="wrap_content"

         android:id="@+id/button1" />

<Button

        android:text="Button 2"

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:id="@+id/button2" />

<Button

            android:text="Button"

            android:layout_width="100dp"

            android:layout_height="wrap_content"

            android:id="@+id/button3" />

</LinearLayout>

Now , when we are defining orientation  vertical, how the interface will look like.

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:gravity="center_horizontal"

   android:orientation="vertical"

   android:background="#194575">

<Button

    android:text="Button 1"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:id="@+id/button1" />

<Button

  android:text="Button 2"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:id="@+id/button2" />

<Button

   android:text="Button 3"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:id="@+id/button3" />

</LinearLayout>

 
LinerLayout can be nested. LinerLayout can be nested to another  LinerLayout. This flexiblity makes designing so much easy for developer. Here the ,in the example one LinerLayout with vertical orientation, and another LinerLayout with  horizontal orientation is nested.

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         xmlns:tools="http://schemas.android.com/tools"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:gravity="center_horizontal"

        android:orientation="vertical"

        android:background="#194575">

<Button

      android:text="Button 1"

      android:layout_width="100dp"

      android:layout_height="wrap_content"

      android:id="@+id/button1" />

<LinearLayout

       android:layout_width="match_parent"

       android:layout_height="match_parent"

       android:orientation="horizontal"

       android:background="#194575"

       android:gravity="center_horizontal"

>

<Button

     android:text="Button 2"

     android:layout_width="100dp"

     android:layout_height="wrap_content"

     android:id="@+id/button2" />

<Button

    android:text="Button"

    android:layout_width="100dp"

   android:layout_height="wrap_content"

    android:id="@+id/button3" />

</LinearLayout>

</LinearLayout>

See how the design look like.

LinerLayout has a property Gravity. Gravity property controls  the position of a element in the interface. Here ,in above the example ,there is LinerLayout nested under another LinerLayout. The gravity property is set center. The second LinerLayout will be placed at the centre of the fast layout.






There is another example of gravity property at the top. 

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         xmlns:tools="http://schemas.android.com/tools"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:orientation="vertical"

         android:gravity="top"

         android:background="#194575">

<Button

         android:text="Button 1"

         android:layout_width="100dp"

         android:layout_height="wrap_content"

        android:id="@+id/button1"

/>

</LinearLayout>

See how the design look like.

There is another example of gravity property at the center.

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical"

     android:gravity="center"

     android:background="#194575">

<Button

      android:text="Button 1"

      android:layout_width="100dp"

      android:layout_height="wrap_content"

     android:id="@+id/button1"

/>

</LinearLayout>