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:
- Open eclipse (Read: how to setup android in eclipse?)
- File->New->Android XML File
- The above steps open up the below window
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
click on the highlighted “+” symbol to create new views. This takes you to the below screen.
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:
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.
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.
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.
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:
How to create a new activity in Android?