Relative layout design in Android using Xamarin

Introduction:
Xamarin provides different layout for designing the user interface in Android.
Some common ones being used are Relative Layout, Linear Layout, Grid Layout, Table Layout, Frame Layout etc. Most of them are understandable from their name itself. Here we will discuss about how to design using Relative Layout in Xamarin for Android.

Description:
As the name suggests, Relative Layout mainly makes use of the controls present in the Designer and places controls relatively to each other. The most important aspect of this design being the First element placed inside the tag. The places itself depending on the properties set for the children in the Relative Layout.
For example:
if the Gravity property of the Element is set to “Center” then the controls inside the Layout would set themselves exactly at the vertical and horizontal center. Most common property that specify the positioning inside a Relative Layout are :

  • layout_below
  • layout_above
  • layout_toLeftOf
  • layout_toRightOf

Demo:
Here’s a code snippet demonstrating the placement of TextViews in Relative Layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativeLayout1"
    android:gravity="center">
    <TextView
        android:text="Top Text with gravity of Relative Layout as Center"
        android:layout_width="match_parent"
        android:layout_height="64.8dp"
        android:id="@+id/textViewTop"
        android:gravity="center"
        android:background="#ffaa758c"
        android:textColor="#000000" />
    <TextView
        android:text="Middle Text view"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="164.3dp"
        android:layout_height="64.3dp"
        android:layout_below="@id/textViewTop"
        android:id="@+id/textViewMiddle"
        android:textColor="#000000"
        android:background="#ffb4e03c"
        android:gravity="center" />
    <TextView
        android:text="Bottom Textview"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="60.1dp"
        android:layout_toRightOf="@id/textViewMiddle"
        android:id="@+id/textView7"
        android:layout_below="@+id/textViewMiddle"
        android:background="#ff60dce5"
        android:textColor="#000000"
        android:gravity="center" />
</RelativeLayout>

Below is a screen shot of the resulted layout.

RelativeLayout

Conclusion:
Relative layout can be easily used to place items one besides the other relatively. In case of extended long layout it is better to make a Scrollview as a parent and include a Relative Layout inside it so as to enable scrolling.

Written By: Anobik Dey, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s