Android RelativeLayout example tutorial

How to use RelativeLayout in android app.

Relative Layout is one of the most usable responsive android layout comes with full widgets integrate functions to design complex android applications patterns designs. Relative Layout holds extrema responsive designing nature because of its full widgets area controlling features. Using RelativeLayout app programmer can add widgets, text fields, frames, buttons at any place in applications. So here is the complete step by step tutorial for  Android RelativeLayout example tutorial.

android-project-download-code-button

Featured attributes that can make RelativeLayout more useful then others is :

  • android:layout_alignParentTop=”true”
  • android:layout_centerHorizontal=”true”
  • android:layout_marginTop=”29dp”
  • android:layout_toRightOf=”@+id/textView1″
  • android:layout_alignBaseline=”@+id/textView2″
  • android:layout_alignBottom=”@+id/textView2″
  • android:layout_marginRight=”20dp”
  • android:layout_toLeftOf=”@+id/textView1″

Android RelativeLayout example tutorial.

Code for MainActivity.java file.

 package com.android_examples.com.relativelayoutandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
 // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.main, menu);
 return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 // Handle action bar item clicks here. The action bar will
 // automatically handle clicks on the Home/Up button, so long
 // as you specify a parent activity in AndroidManifest.xml.
 int id = item.getItemId();
 if (id == R.id.action_settings) {
 return true;
 }
 return super.onOptionsItemSelected(item);
 }
}

Code for activity_main.xml layout file.

 <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.relativelayoutandroid.MainActivity" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="29dp"
 android:text="A"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/textView1"
 android:layout_marginLeft="22dp"
 android:layout_marginTop="40dp"
 android:layout_toRightOf="@+id/textView1"
 android:text="C"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/textView2"
 android:layout_alignBottom="@+id/textView2"
 android:layout_marginRight="20dp"
 android:layout_toLeftOf="@+id/textView1"
 android:text="B"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView4"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignRight="@+id/textView3"
 android:layout_below="@+id/textView3"
 android:layout_marginTop="42dp"
 android:text="D"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView5"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/textView4"
 android:layout_alignBottom="@+id/textView4"
 android:layout_alignRight="@+id/textView2"
 android:text="E"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/textView4"
 android:layout_marginLeft="52dp"
 android:layout_marginTop="26dp"
 android:text="F"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView7"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/textView6"
 android:layout_alignBottom="@+id/textView6"
 android:layout_marginLeft="33dp"
 android:layout_toRightOf="@+id/textView5"
 android:text="G"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView
 android:id="@+id/textView8"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/textView7"
 android:layout_marginTop="76dp"
 android:layout_toLeftOf="@+id/textView2"
 android:text="H"
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Screenshot:

Android RelativeLayout example tutorial

Click Here To Download Android RelativeLayout example tutorial project.

Leave a Reply

Your email address will not be published. Required fields are marked *