This lesson describes many kinds of android Layout.

1. UI Layout
Prepared By: Ms. Sokngim Sa

2. Content
- Constraint Layout
- FrameLayout
- LinearLayour
- RelativeLayout
- GridLayout
- ScrollView
- TableLayout

3. 6.1 Constraint Layout
- Constraint layout is provided by an external library.
- It allows you to use a flat view hierarchy and has great performance.
- Also the design tools support constraint layout very well.
- New projects should prefer the usage of constraint layout.
Details: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

4. 6.2 FrameLayout
• 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.

5. <?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000"
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="@mipmap/ic_launcher_round"
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>

6. 6.3 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"

7. horizontal
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/a
ndroid"
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>

8. vertical
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/a
ndroid" 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>

9. 6.4 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

10. <?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>

11. 6.5 GridLayout
- GridLayout allows you to organize views into a grid / table. GridLayout
separates its drawing area into: rows, columns, and cells.
- You can specify how many columns the grid should have. For each view you
can specify in which row and column it should be placed and how many columns
and rows it should use. If not specified, GridLayout uses defaults, e.g., one
column, one row and the view position depends on the order of the declaration.

12. <?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:columnCount="2"
android:orientation="horizontal"
android:rowCount="2"
tools:context=".GridLayoutActivity">
<Button
android:id="@+id/button1"
android:layout_gravity="left|top"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_gravity="left|top"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_gravity="left|top"
android:text="Button" />
<Button
android:id="@+id/button4"
android:layout_gravity="left|top"
android:text="Button" />
</GridLayout>

13. 6.6 ScrollView
The ScrollView or the
HorizontalScrollView class is useful to
make views available, even if they do not fit
onto the screen. A scroll view can contain
one view, e.g., a layout manager containing
more views. If the child view is too large,
scroll view allows scrolling the content.

14. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
...
<ScrollView/>
<HorizontalScrollView
android:id="@+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<LinearLayout
android:id="@+id/ll_select_participant"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="10dp"/>
</HorizontalScrollView>

15. 6.7 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/androi
d">
<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>