Step By Step Create Relative Layout User Interface

Step By Step Create Relative Layout User Interface

RelativeLayout container arranges all the user interface elements relative to each other in a single ViewGroup to achieve complex layout.It is also a direct subclass of ViewGroup class.so lets learn and code it step by step.

• first open the eclipse select File -> New -> Project.

• Then Select Android -> Android Application Project and then click next.
• Now fill with following details:
• Project name- RelativeLayoutExample
• Application name-RelativeLayoutExample
• package name-relative.layout
• Minimum required SDK- select android 3.0
• tick on create custom laucher icon.
• tick on create project in workspace.

• In Config Launcher Icon window click Next and finally choose Blank Activity in Create Activity window and the click Next and then Finish.
• Now you have configured the Eclipse and ready to use RelativeLayout.Now select your project RelativeLayoutExample and click on res ->layout ->activity_main.xml. 
• After opening the activity_main.xml you will see the following code.

• Now you need to edit the given above code and add some new xml lines,so that final code look like this .
• add textview widget give id name as "textView"
• add EditText widget give id name as "editText"
• add Button widget give id name as "okButton"
• add Button widget give id naem as "cancelButton"

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:  android:orientation="vertical"  
4:  android:layout_width="fill_parent"  
5:  android:layout_height="fill_parent"  
6:  >  
7:  <TextView                   
8:  android:id="@+id/textView"            
9:  android:layout_width="fill_parent"  
10:  android:layout_height="wrap_content"  
11:  android:text="Type here:" />  
12:  <EditText  
13:  android:id="@+id/editText"           
14:  android:layout_width="fill_parent"  
15:  android:layout_height="wrap_content"  
16:  android:layout_below="@+id/textView"      
17:   />    
18:  <Button  
19:  android:id="@+id/okButton"           
20:  android:layout_width="wrap_content"  
21:  android:layout_height="wrap_content"  
22:  android:layout_below="@+id/editText"    
23:  android:layout_alignParentRight="true"  
24:  android:layout_marginLeft="10dip"       
25:  android:text="OK"/>  
26:  <Button  
27:    android:id="@+id/cancel"  
28:  android:layout_width="wrap_content"  
29:  android:layout_height="wrap_content"  
30:  android:layout_toLeftOf="@+id/okButton"  
31:  android:layout_alignTop="@+id/okButton"  
32:  android:text="Cancel"/>  
33:  </RelativeLayout>  

• Now lets understand some lines which are added in the activity_main.xml file.
• At line 16-it means its position is below the textView widget.
• At line 22-it means its position is below edittext widget.
• At line 24-it gives 10dip space from the left widget.
• At line 30-it means its position is left to okButton widget.
• At line 31-it means its position aligned with it on the top.

• Now click src ->linear.Layout ->MainActivity.java  you will see the following already written.

1:  package relative.Layout;  
2:  import android.os.Bundle;  
3:  import android.app.Activity;  
4:  import android.view.Menu;  
5:  public class MainActivity extends Activity {  
6:    @Override  
7:    public void onCreate(Bundle savedInstanceState) {  
8:      super.onCreate(savedInstanceState);  
9:      setContentView(R.layout.activity_main);  
10:    }  
11:   }  

• This is the main java file of the project so lets discuss the basic points of this java file.
• first line shows the package where all your java file resides
• the Activity class which is a super class for any activity you create ,therefore wee needs to import the android.app.Activity
• android.os contain the classes of operating system utilities .and one of the class is Bundle which creates Bundles of variables for convenience.
• note-Platform is the highest level of hierarchy of java which contain all the core packages.
• onCreate() method is declared as public so that it is open to the any part of the android application.
• savedInstanceState object is a Bundle object ,it is a collection of all of the state of activity screen user interface elements.It stores all the states of user interface elements before it is replaced by any other screen.]
• the super keyword calls the method( onCreate() ) of  superclass android.app.Activity so it is just a shortcut of android.app.Activity.onCreate(savedInstanceState).
• setContentView(R.layout.activity_main) loads the activity_main.xml file from res ->layout folder. It  is  a method of android.app.Activity.
• Now for running your projects you need to compile the project.
• As you have already set up emulator for android.
• so to compile right click on top level of project RelativeLayoutExampleproject folder in the package explorer and select run as ->android application.
• The emulator will take approximately 30 sec then after it will launch your project in the emulator  environment.