Creating a Linear Layout

Whats up Geeks,

From our last tutorial we created a sample "Hello Geeks" example on eclipse.


In this tutorial we are going to learn how to create a Linear Layout?

In Eclipse, while creating a project we are required to provide Fragment Layout Name along with Layout name. See below pics:


                                                                               ^
                                                                               ^
                                                                               ^


 So we can give accordingly. Now after creating a project fragment_mai.xml will be placed a res/layout/ folder.
Open the fragment_main.xml file from the res/layout/ folder.
Then it will show Graphical Layout editor (by default), so click the fragment_main.xml tab at the bottom of the screen to open the XML editor.

It will display a <RelativeLayout> root view and a <TextView> child view.
First, delete the <TextView> element and change the <RelativeLayout> element to <LinearLayout>. Then add the android:orientation attribute and set it to "horizontal". The results will look like below:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>
  
 
LinearLayout is a view group (a subclass of ViewGroup) that lays out child views in either a vertical or horizontal orientation, as specified by the android:orientation attribute. Each child of a LinearLayout appears on the screen in the order in which it appears in the XML.
The other two attributes, android:layout_width and android:layout_height, are required for all views in order to specify their size.
Because the LinearLayout is the root view in the layout, it should fill the entire screen area that's available to the app by setting the width and height to "match_parent". This value declares that the view should expand its width or height to match the width or height of the parent view.

For Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>
 
 


For more information about layout properties, see the Layout guide.

No comments:

Post a Comment