. LAYOUT’s
An Android layout is a class that handles arranging
the way its children appear on the screen. Anything that is a View (or
inherits from View) can be a child of a layout. All
of the layouts inherit from ViewGroup (which inherits from View) so you can
nest layouts. You could also create your own custom layout by making a
class that inherits from ViewGroup. There are 5 types of standard layout which
are,
·
Absolute Layout
·
Frame Layout
·
Linear Layout
·
Relative Layout
·
Table Layout
4.1 ABSOLUTE LAYOUT
AbsoluteLayout is based on the simple idea of
placing each control at an absolute position. You specify the exact x and
y coordinates on the screen for each control. This is not recommended for
most UI development (in fact AbsoluteLayout is currently deprecated) since
absolutely positioning every element on the screen makes an inflexible UI that
is much more difficult to maintain. Consider what happens if a control needs
to be added to the UI. You would have to change the position of every single
element that is shifted by the new control.
|
<AbsoluteLayout xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width= "fill_parent"
android:layout_height= "fill_parent">
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_x="10px"
android:layout_y="5px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="10px"
android:layout_y="110px"
android:text="First
Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="150px"
android:layout_y="100px"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="10px"
android:layout_y="160px"
android:text="Last
Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="150px"
android:layout_y="150px"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</AbsoluteLayout>
|
Note how each element has android:layout_x and
android:layout_y specified. Android defines the top left of the screen as (0, 0)
so the layout_x value will move the control to the right, and the layout_y
value will move the control down. Here is a screenshot of the layout produced
by this XML. Also about the attribute layout_width=”wrap_content” there is also
options like fill_parent (fill the
attribute i.e, width or height to fill the entire layout), match_parent (used while using RelaiveLayout
and when there are more than one Activity),
wrap_content (used to match wrap
around the text).
4.2 FRAME LAYOUT
FrameLayout
is designed to display a single item at a time. You can have multiple elements
within a FrameLayout but each element will be positioned based on the top left
of the screen you cannot specify a different location for a child. Elements
that overlap will be displayed overlapping.
|
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="@drawable/icon"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Learn-Android.com"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
|
Here is the result of this XML.
You can see that both
the ImageView and TextView fill the parent in both horizontal and vertical
layout. Gravity specifies where the text appears within its container, so it is
set to center. If it had not given as gravity then the text would
have appeared at the top left of the screen.
4.3 LINEAR LAYOUT
LinearLayout
organizes elements along a single line. You specify whether that line is vertical
or horizontal using android:orientation. All children are stacked one after the
other, so a vertical list with one child per row, no matter how wide they are,
and a horizontal list will only be one row high(the height of the tallest child
plus padding).A linear layout respects margins
between children and the gravity(right,
left, center) of each child.
It also
supports assigning a weight to
individual children. This attribute assigns an “importance” value to a view and
allows it to expand to fill any remaining space in the parent view. It is given
as any integer value. For example, if
there are three text boxes and two of them declare a weight of 1, while the
other is no weight 0, the third text box without weigh will not grow and will
occupy the area required by its content. The other two will expand equally to
fill the space remaining after all three boxes are measured. If the third box
is then given a weight of 2 (instead of 0), then it is now declared “more
important” than both others, so its gets half the total remaining space, while
the first two share the rest equally.
Here is a sample Layout XML
using LinearLayout.
|
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="First
Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Last
Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
|
Here is a screenshot of the
result of the above XML.
It was mentioned
on the first page that Layouts can be nested. LinearLayout is frequently
nested, with horizontal and vertical layouts mixed. Here is an example of this.
|
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
|
Here is a screenshot of the
result of the above XML.
4.4 RELATIVE LAYOUT
RelativeLayout
lays out elements based on their relationships with one another, and with the
parent container. This is arguably the most complicated layout, and we need
several properties to actually get the layout we want.
4.4.1 RELATIVE TO CONTAINER
These properties will layout
elements relative to the parent container.
- android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
- android:layout_alignParentLeft – Places the left of the element on the left side of the container
- android:layout_alignParentRight – Places the right of the element on the right side of the container
- android:layout_alignParentTop – Places the element at the top of the container
- android:layout_centerHorizontal – Centers the element horizontally within its parent container
- android:layout_centerInParent – Centers the element both horizontally and vertically within its container
- android:layout_centerVertical – Centers the element vertically within its parent container
4.4.2 RELATIVE TO OTHER ELEMENTS
These properties allow you
to layout elements relative to other elements on screen. The value for each of
these elements is the id of the element you are using to layout the new
element. Each element that is used in this way must have an ID defined using
android:id=”@+id/XXXXX” where XXXXX is replaced with the desired id. You use
“@id/XXXXX” to reference an element by its id. One thing to remember is that
referencing an element before it has been declared will produce an error.
- android:layout_above – Places the element above the specified element
- android:layout_below – Places the element below the specified element
- android:layout_toLeftOf – Places the element to the left of the specified element
- android:layout_toRightOf – Places the element to the right of the specified element
4.4.3 ALIGNMENT WITH OTHER ELEMENTS
These properties allow you to specify how elements are aligned in relation to other elements.- android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
- android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
- android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
- android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
- android:layout_alignTop – Places top of the new element in alignment with the top of the specified element
|
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/firstName"
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/backbutton" />
<EditText
android:id="@+id/editfirstName"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/firstName"
android:layout_alignBaseline="@id/firstName" />
<EditText
android:id=”@+id/editlastName”
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/lastName"
android:layout_alignBaseline="@id/lastName" />
<TextView
android:id="@+id/lastName"
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf=”@id.editlastName”
android:layout_below="@id/firstName" />
</RelativeLayout>
|
Here
is a screenshot of the result of the above XML.
4.5 TABLE LAYOUT
TableLayout organizes content into rows and columns. The
rows are defined in the layout XML, and the columns are determined
automatically by Android. This is done by creating at least one column for each
element. So, for example, if you had a row with two elements and a row with
five elements then you would have a layout with two rows and five columns.
You can specify that an element should
occupy more than one column using android:layout_span. This can increase the
total column count as well, so if we have a row with two elements and each
element has android:layout_span=”3″ then you will have at least six columns in your
table. By default, Android places each element in the first unused column in
the row. You can, however, specify the column an element should occupy using
android:layout_column.
|
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow>
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
|
Here
is a screenshot of the result of the above XML.
No comments:
Post a Comment