The document discusses various Android layouts including LinearLayout, RelativeLayout, FrameLayout, AbsoluteLayout, and TableLayout. LinearLayout arranges components vertically or horizontally based on an orientation attribute. RelativeLayout positions components relative to each other using attributes like above, below, left and right. FrameLayout displays one component at a time based on top-left positioning. AbsoluteLayout precisely positions each component using x and y coordinates. TableLayout organizes content into rows and columns with elements automatically spanning multiple columns if specified.

1. Android
Layout

2. LinearLayout
• Linear Layout is a common layout that arranges “component” in
vertical or horizontal order.
• Component is arrange via orientation attribute.
• For example
• FOR HORIZONTAL ARRANGEMENT
• android:orientation="horizontal“
• FOR VERTICAL ARRANGEMENT
• android:orientation=“vertical"

3. horizontal
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.c
om/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1"/>
</LinearLayout>

4. vertical
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.c
om/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1"/>
</LinearLayout>

5. RelativeLayout
• RelativeLayout let you position your component base on the nearby
(relative or sibling) component’s position.
• It’s the most flexible layout, that allow you to position your component
to display in anywhere you want.
• in Relative Layout, you can use “above, below, left and right” to
arrange the component position

6. <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="@+id/btnButton1“ android:layout_width="wrap_content"
android:layout_height="wrap_content“ android:text="Button 1"/>
<Button
android:id="@+id/btnButton2“ android:layout_width="wrap_content"
android:layout_height="wrap_content“ android:text="Button 2"
android:layout_toRightOf="@+id/btnButton1"/>
<Button
android:id="@+id/btnButton3“ android:layout_width="wrap_content"
android:layout_height="wrap_content“ android:text="Button 3"
android:layout_below="@+id/btnButton1"/>
<Button
android:id="@+id/btnSubmit“ android:layout_width="wrap_content"
android:layout_height="wrap_content“ android:layout_alignParentRight="true"
android:layout_below="@+id/btnButton3“ android:text="Submit" />
</RelativeLayout>

8. FrameLayout
•Frame Layout is designed to display a
single item at a time.
•You can have multiple elements
within a Frame Layout but each
element will be positioned based on
the top left of the screen.

9. <?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/ImageView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/icon"
android:scaleType="fitCenter"/>
<TextView android:text="welcome mca student"
android:id="@+id/TextView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="20dp"
android:gravity="center"
android:textColor="#003456"/>
</FrameLayout>

10. • You can see I had both
the ImageView and
TextView fill the parent
in both horizontal and
vertical layout.
• If I had not set a
gravity then the text
would have appeared
at the top left of the
screen.

11. • You can see I had both the ImageView and TextView fill the parent
in both horizontal and vertical layout.
• If I had not set a gravity then the text would have appeared at the
top left of the screen.

12. AbsoluteLayout
• 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.
• 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.

13. AbsoluteLayout
<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="150px"
android:layout_y="10px"
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>

14. • how each element has
android:layout_x and
android:layout_y specified
• Layout_x put space left-right
side on screen
• Layout_y put space top-
bottom side on screen

15. TableLayout
• 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.
• You can specify that an element should occupy more than one column using
android:layout_span.

16. <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>