Step By Step Set Padding In Views Of User Interface

Step By Step Set Padding In Views Of User Interface

Padding provides space to the view so that view content don't touches the boundary of view.Padding can be added from the four side.
Important points:

• Padding are only meant for the View class or android.view.View.
• Views subclass include class like Button,analog clock.image view,text view,calender view, scroll view etc.
• Padding can be set from the 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- PaddingExample
• Application name- PaddingExample
• package name-padding.View
• 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 PaddingExample. Now select your project PaddingExample and click on res ->layout ->activity_main.xml. 
• After opening the activity_main.xml you will see the following code.

• Now in the above activity_main.xml file add one button view.so that final code look like this.

1:   xmlns:tools="http://schemas.android.com/tools"  
2:    android:layout_width="match_parent"  
3:    android:layout_height="match_parent" >  
4:    <TextView  
5:      android:id="@+id/textView1"  
6:      android:layout_width="wrap_content"  
7:      android:layout_height="wrap_content"  
8:      android:text="@string/hello_world"  
9:      tools:context=".MainActivity" />  
10:    <Button  
11:      android:id="@+id/button1"  
12:      android:layout_width="wrap_content"  
13:      android:layout_height="wrap_content"  
14:      android:layout_alignLeft="@+id/textView1"  
15:      android:layout_alignParentTop="true"  
16:      android:layout_marginTop="83dp"  
17:      android:text="Button" />  
18:  </RelativeLayout>  

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

• As you have already set up emulator for android.
• so to compile right click on top level of project PaddingExample 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 Padding

• Now lets do the padding inside the button view.so add few xml lines inside <Button > view so that final code look like this.

• android:paddingBottom="25dp"
• android:paddingLeft="25dp"
• android:paddingRight="25dp"
• android:paddingTop="25dp"

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:    <TextView  
6:      android:id="@+id/textView1"  
7:      android:layout_width="wrap_content"  
8:      android:layout_height="wrap_content"  
9:      android:text="@string/hello_world"  
10:      tools:context=".MainActivity" />  
11:    <Button  
12:      android:id="@+id/button1"  
13:      android:layout_width="wrap_content"  
14:      android:layout_height="wrap_content"  
15:      android:layout_alignLeft="@+id/textView1"  
16:      android:layout_alignParentTop="true"  
17:      android:layout_marginTop="83dp"  
18:      android:paddingBottom="25dp"  
19:      android:paddingLeft="25dp"  
20:      android:paddingRight="25dp"  
21:      android:paddingTop="25dp"  
22:      android:text="Button" />  
23:  </RelativeLayout>  

Now when we run this using the same procedure as above it will like this,in this image button will look bigger in size by 25dp from each side.