Q-1 List out different types of layouts in android. Explain any two layouts.
A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:
- Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.
- Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.
Common layouts in Android are:
- Linear Layout
- Relative Layout
- Web View
- Table Layout
- Frame Layout
Linear Layout
LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
All children of a Linear Layout are stacked one after the other, so a vertical list will only have 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, center, or left alignment) of each child.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/to" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/subject" /> <EditText android:layout_width="match_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>
Relative Layout
- Relative Layout is a view group that displays child views in relative positions.
- The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent Relative Layout area (such as aligned to the bottom, left or center).
- Relative Layout lets child views specify their position relative to the parent view or to each other (specified by ID).
- So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on.
- By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
Some of the many layout properties available to views in a RelativeLayout include:
- android:layout_alignParentTop If “true”, makes the top edge of this view match the top edge of the parent.
- android:layout_centerVertical If “true”, centers this child vertically within its parent.
- android:layout_below Positions the top edge of this view below the view specified with a resource ID.
- android:layout_toRightOf Positions the left edge of this view to the right of the view specified with a resource ID.
Sample code illustrating Relative Layout is as follows:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" > <EditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/reminder" /> <Spinner android:id="@+id/dates"android:layout_width="0dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentRight="true" /> <Button android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:layout_alignParentRight="true" android:text="@string/done" /> </RelativeLayout>
Frame Layout
- Frame Layout is designed to block out an area on the screen to display a single item.
- Generally, Frame Layout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other.
- You can, however, add multiple children to a Frame Layout and control their position within the Frame Layout by assigning gravity to each child, using the android:layout_gravity attribute.
- Child views are drawn in a stack, with the most recently added child on top.
- The size of the Frame Layout is the size of its largest child (plus padding), visible or not (if the Frame Layout’s parent permits). Sample code showing use of FrameLayout has been shown below:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:foregroundGravity="fill" android:foreground="#0f0"><!--foreground color for a FrameLayout--> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" > <!-- Imageview will not be shown because of foreground color which is drawn over it--> <ImageView android:layout_width="200dp" android:layout_height="200dp"android:layout_marginBottom="10dp" android:src="@mipmap/ic_launcher" android:scaleType="centerCrop" /> <!--Textview will not be shown because of foreground color is drawn over it--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="AndroidSample"/> </LinearLayout> </FrameLayout>
Table Layout
- A layout that arranges its children into rows and columns.
- A Table Layout consists of a number of TableRow objects, each defining a row (actually, you can have other children, which will be explained below).
- Table Layout containers do not display border lines for their rows, columns, or cells.
- Each row has zero or more cells; each cell can hold one View object.
- The table has as many columns as the row with the most cells.
- A table can leave cells empty.
- Cells can span columns, as they can in HTML.
- The width of a column is defined by the row with the widest cell in that column.
- However, a Table Layout can specify certain columns as shrinkable or stretchable by calling setColumnShrinkable() or setColumnStretchable().
- If marked as shrinkable, the column width can be shrunk to fit the table into its parent object
- If marked as stretchable, it can expand in width to fit any extra space.
- The total width of the table is defined by its parent container.
- It is important to remember that a column can be both shrinkable and stretchable.
- In such a situation, the column will change its size to always use up the available space, but never more.
- You can hide a column by calling setColumnCollapsed().
- The children of a Table Layout cannot specify the layout_width attribute.
- Width is always MATCH_PARENT.
- However, the layout_height attribute can be defined by a child; default value is WRAP_CONTENT.
- If the child is a TableRow, then the height is always WRAP_CONTENT.
- Cells must be added to a row in increasing column order, both in code and XML.
- Column numbers are zero-based.
- If you don’t specify a column number for a child cell, it will autoincrement to the next available column.
- If you skip a column number, it will be considered an empty cell in that row.
- Although the typical child of a Table Layout is a TableRow, you can actually use any View subclass as a direct child of Table Layout.
- The View will be displayed as a single row that spans all the table columns. Sample code showing use of TableLayout has been shown below:
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TableRow> <TextView android:text="@string/table_layout_4_open" android:padding="3dip" /> <TextView android:text="@string/table_layout_4_open_shortcut" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="@string/table_layout_4_save" android:padding="3dip" /> <TextView android:text="@string/table_layout_4_save_shortcut" android:gravity="right" android:padding="3dip" /> </TableRow> </TableLayout>