How to create a Layout xml file in Android?

As we have discussed in one of our previous posts Layouts in android layouts are the containers that hold the components of UI that you want to display in your application. When you compile your application,each xml layout file is compiled into a View resource. This tutorial describes how you can add a layout file to a newly created activity.

also read:

To create a layout file, follow the steps:

  1. Open eclipse (Read: how to setup android in eclipse?)
  2. File->New->Android XML File
  3. The above steps open up the below window

1_post7_pic2

Once you fill up all required details in the above screen click on “Finish” button. This creates your layout xml file in res/layout directory. The initial code of the created layout “layout_first_activity.xml” is as below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

When you create a layout file,by default it contains only one linear layout. You have to add views that you want to display in your activity.

Adding Views to a layout File

Add the views that you want to display in your Activity. Lets now add a Textview and a Button. You can find the below pane called outline when you create a layout. If you don’t find it open window->Show View->Outline

2_outline

click on the highlighted “+” symbol to create new views. This takes you to the below screen.

3_text_view

Select the view that you want to add. I have selected textView. Then click “OK” button. Let us now add a button to our layout file. Again click on the “+” symbol in the outline pane to add a button and select the button and click “OK” to add it. Then your “layout_first_activity” file contains a LinearLayout which inturn contains a textview and a button. The structure of the layout file as seen in the outline is as below:

4_structure_outline

You can always remove the view that you have added by clicking on the “-” symbol present on right side of the “+” symbol.
To view the layout that you have created before you run the project, select the layout section in your layout window.

5_layout_section

Edit the properties of the Views in your layout file

Edit the properties of the newly created views. To the Edit the properties of a particular view, double click on that view which opens up a pane called “Properties”. Lets us edit the Textview text as  “Hi you are in first activity”. The property Window is as below.

6_properties

Double click on the Button view to Edit the properties of the button.Let us edit the text property of the button to “Click to Navigate”.
You can customize your views by editing various properties present in the Property pane. For example: text size,Text color, orientation of the views etc. By default when you add views to your linear layout the orientation will be “Horizontal”. Now change the Orientation property of the LinearLayout to vertical.

The layout code  after editing the required property values is as below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
android:orientation="vertical" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textStyle="bold" android:layout_gravity="center"
android:layout_marginTop="30dip" android:text="Hi you are in first activity">
</TextView>
<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Click to Navigate"
android:layout_gravity="center" android:layout_marginTop="40dip">
</Button>
</LinearLayout>

You should load the created layout file from your application code,in your Activity.onCreate() callback implementation. You can do that by calling setContentview(), passing it the reference to your layout file in the form of  R.layout.layouy_first_activity. The code of your activity is as below.

package my.app;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class First_activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_first_activity);
}
}

Now run your application. The output is as below.

7_first_act_opt

This is how you can create a layout xml file in android. If you have any queries,please post in it comment section.

also read:

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better