Relative Layout Examples

Relative Layout

Items are arranged relative to sibling views or parent layout.

Main Attributes:

android:baselineAligned - Set to "true" by default. When "false" it do not need to align children views with the same base line.
android:orientation - Set the linear or horizontal orientation of the layout.
android:gravity - Align the content within the view.
android:layout_gravity - Align the view position outside of itself.
android:ignoreGravity - Views not to be affected by gravity.
android:layout_above- Positions the bottom edge of this view above another view.
android:layout_alignBottom- Positions the bottom edge of this view with bottom edge of another another view.
android:layout_alignLeft-Positions the left edge of this view with left edge of another another view.
android:layout_alignParentBottom- When "true", matches the bottom edge of view with bottom edge of parent layout.
android:layout_alignParentTop- When "true", matches the bottom edge of view with top edge of parent layout
android:layout_alignParentStart- When "true" makes the start edge of view matches the start edge of parent.
android:layout_alignParentEnd-When "true" makes the end edge of view matches the end edge of parent.
android:layout_centerInParent -When "true" makes the child view horizontally and vertically centered within the parent layout.
android:layout_alignRight - Align the right edge of given view with teh right edge of anchor view.
android:layout_alignStart- Align the start edge of given view with the start edge of the anchor view.
android:layout_alignTop - Align the top edge of given view with the top edge of anchor view.
android:layout_below - Align the top edge of given view below the top edge of the anchor view.
android:layout_centerHorizontal - When "true", will align the view horizontally centered within the parent view.
android:layout_centerVertical -When "true", will align the view vertically centered within the parent view.
android:layout_toEndOf - Align the start edge of view with the end of anchor view.
android:layout_toRightOf - Place the left edge of the view with the right edge of the anchor view.
android:layout_toStartOf - Place the end edge of the view with the start edge of the anchor view.

Relative Layout Example

MainActivity.java


package com.zyasin.relativelayout;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
}

activity_main.xml


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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

 
   <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 1">


       <Button 
         android:id="@+id/button2"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentLeft="true"

         android:layout_below="@+id/button1"

         android:text="Button 2">

 

     <Button

         android:id="@+id/button3"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_below="@+id/button2"

         android:layout_toRightOf="@+id/button2"

         android:text="Button 3">

 
  <RelativeLayout>

Relative Layout - Percentage Dimensions and Margins

Percentage support library provide features to set the percentage widths and margins for relative layout, using PercentRelativeLayout, with possible attributes of layout_widthPercent, layout_heightPercent,layout_marginPercent, layout_marginPercent, layout_marginPercent, layout_marginPercent, layout_marginPercent, layout_marginStartPercent and layout_marginEndPercent.

MainActivity.java


package com.zyasin.relativelayout;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
}

activity_main.xml


< android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

 
<TextView
android:id="@+id/textview_title"
android:layout_centerHorizontal="true"
app:layout_heightPercent="11%"
android:gravity="center"
app:layout_marginTopPercent="14%"
app:layout_widthPercent="100%"
android:textSize="50dp"
android:text="TEXT"/>



<Button
android:id="@+id/button_blogger"
android:layout_below="@+id/textview_sub_header"
android:text="button"
android:textColor="@android:color/white"
android:textSize="25dp"
android:textStyle="bold"
android:background="@android:color/holo_blue_light"
app:layout_heightPercent="13%"
app:layout_marginTopPercent="16%"
app:layout_widthPercent="100%"/>

 
<TextView
android:id="@+id/textview_bottom_text"
android:layout_height="match_parent"
android:layout_below="@+id/button_blogger"
android:gravity="center"
android:text="TEXT"
android:textSize="20dp"
app:layout_widthPercent="100%"/>
 
</android.support.percent.PercentRelativeLayout/>