Step By Step Set Margin In ViewGroups In User Interface

Step By Step Set Margin In ViewGroups In User Interface

Margin provides space from the four side of screen area to ViewGroups.It can be set for any ViewGroup objects.Imp points about Margin:

• It can only be set for ViewGroup objects not for View objects.
• Margin class name is android.view.ViewGroup.MarginLayoutParams.
• ViewGroups subclass include classes like Absolute Layout,Relative Layout,Grid Layout,Sliding Drawer,Grid view etc.
• Margin can be set from four side left,top,right,bottom.

So lets look at this 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- MarginExample
• Application name-MarginExample
• package name-margin.ViewGroups
• 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 MarginExample. Now select your project MarginExample and click on res ->layout ->activity_main.xml. 
• After opening the activity_main.xml you will see the following code.

• Now in the activity_main.xml file remove Text_View and add a Button so that final code look like this.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent" >  
5:    <Button  
6:      android:id="@+id/button1"  
7:      android:layout_width="wrap_content"  
8:      android:layout_height="wrap_content"  
9:      android:layout_alignParentTop="true"  
10:      android:layout_centerHorizontal="true"  
11:      android:layout_marginTop="155dp"  
12:      android:text="Button" />  
13:  </RelativeLayout>  

• Now we need to run this project before doing margin in button.

• As you have already set up emulator for android.
• so to compile right click on top level of project MarginExample project 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.
• This is the view without Margin

• Now lets do the margin inside the Relative layout.so add few xml lines inside <RelativeLayout > ViewGroup so that final code look like this.

• android:layout_marginBottom="50dp"
• android:layout_marginLeft="50dp"
• android:layout_marginRight="50dp"
• android:layout_marginTop="50dp"
• android:background="#678954"

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:layout_marginBottom="50dp"  
6:    android:layout_marginLeft="50dp"  
7:    android:layout_marginRight="50dp"  
8:    android:layout_marginTop="50dp"  
9:    android:background="#678954" >  
10:    <Button  
11:      android:id="@+id/button1"  
12:      android:layout_width="wrap_content"  
13:      android:layout_height="wrap_content"  
14:      android:layout_alignParentTop="true"  
15:      android:layout_centerHorizontal="true"  
16:      android:layout_marginTop="155dp"  
17:      android:text="Button" />  
18:  </RelativeLayout>  

• Now when we run this using the same procedure as above it will like this,in this layout will look smaller in size by 50dp from each side.and we have given background color so that margin can be easily seen.