Tuesday, August 6, 2013
Hi everyone! For this post, I am going to keep working with the different layouts. On my previous post Relative Layout, I created a new Android application project named LayoutDemo. I am going to use the same project now to learn about the layout called Linear Layout. The Java class LinearLayout is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.
The LinearLayout arranges objects in a single column or a single row. Similar to the RelativeLayout class, you can arrange this layout by using XML attributes which can be found here: XML attributes
To test a few of this attributes, I am going to modify the activity_main.xml
file. On my previous post, I added two string resources to the application and used
the Relative Layout. Now, I modified the XML file to:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft =
"20dp"
android:paddingRight =
"20dp"
android:paddingTop =
"20dp"
android:orientation =
"vertical"
tools:context=".MainActivity" >
<TextView
android:id = "@+id/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<TextView
android:id = "@+id/first_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/first_name" />
<TextView
android:id = "@+id/last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/last_name" />
</LinearLayout>
The XML attributes android:padding sets the padding in pixels of all four edges. Here, I modified the left, right, and top edges to 20dp:
android:paddingLeft =
"20dp"
android:paddingRight =
"20dp"
android:paddingTop =
"20dp"
With the XML attribute android:orientation = "vertical", I
set the layout direction to vertical. The result is:
 |
| LayoutDemo App |
A vertical orientation will have one object per row. Instead
of setting it to vertical, I am going to now set it to horizontal. With the XML
attribute android:orientation = "horizontal" , I can set the layout direction to
horizontal and the result is:
 |
| LayoutDemo App |
A horizontal orientation
will only be one row high, which is the height of tallest object and any
padding you add. For example, if I add
android:paddingRight =
"20dp"
android:paddingTop = "20dp"
to the second TextView, the result will be:
 |
| Graphical Layout - activity_main.xml |
As you can see, there is space to the right of the second
string resource and at the top. Now, I will add a button to the layout. You add
a button by using the <Button /> tag. First, I added a new string resource.
To do this, go to the XML file strings.xml found under the res->values
folder in the Project Explorer. Add a new string resource with name “ok” and
value “Ok”.
The activity_main.xml file now looks like this with the button added:
 |
| strings.xml |
The activity_main.xml file now looks like this with the button added:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft =
"20dp"
android:paddingRight =
"20dp"
android:paddingTop =
"20dp"
android:orientation =
"vertical"
tools:context=".MainActivity" >
<TextView
android:id = "@+id/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<TextView
android:id = "@+id/first_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/first_name" />
<TextView
android:id = "@+id/last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/last_name" />
<Button
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/ok" />
</LinearLayout>
The result is:
 |
| LayoutDemo App |
With the XML attribute android:layout_gravity , you can set a
left, right, or center alignment. In my case, I chose a center alignment and
displayed the string resource named ok for the button. A weight can be set for
an object using the XML attribute android:layout_weight. A weight value is set
to assign the amount of space the object can occupy on the screen. The default
weight for an object is zero and the larger the value the more space the object
has to expand. For example, if you have three objects on your layout and you
give two of the objects a weight of 1 and the third object is left on the
default value, the two objects with the weight of 1 will expand equally and the
third object with weight of 0 will not. To see how this works, I modified the second TextView on activity_main.xml:
<TextView
android:id = "@+id/first_name"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight =
"1"
android:text="@string/first_name" />
The result is:
 |
| LayoutDemo App |
As you can see, now the string resource first_name has a
weight of 1 and can expand more than the other two string resources. If I
modify the third TextView like this,
<TextView
android:id = "@+id/last_name"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight =
"1"
android:text="@string/last_name" />
The result is:
 |
| LayoutDemo App |
Now, the second and third string resources are assigned a
weight of 1. As you can see, they expanded equally.
There are more XML attributes which you can try. A list of attributes can be found in the link mentioned before. On my next posts, I will try the other layouts like GridView and ListView. Thank you for reading. Feel free to leave comments, subscribe, or follow me on Google+.
