Mobile Computing - Unit 2

Android Layouts - Complete Notes for Students

Introduction to Android Layouts

In Android, a Layout defines the structure for a user interface (UI). It determines how UI
components (Views) like TextView, Button, and ImageView are arranged on the screen.
Layouts are usually defined in XML files under the 'res/layout' directory, but can also be
created programmatically in Java. They are essential for creating responsive and visually
appealing applications.

LinearLayout
LinearLayout arranges its child views in a single row or column depending on the
orientation set. It is simple to use and best suited for stacking elements either vertically or
horizontally.

Key Attributes
android:orientation - Defines the direction of layout: 'horizontal' or 'vertical'.

android:gravity - Specifies how child views are aligned within the layout.

android:layout_weight - Specifies how much of the remaining space a child view should take
up.

android:padding - Specifies padding inside the layout.

Example XML
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name" />
</LinearLayout>

Visual Representation
Blocks stacked in a single column (vertical) or row (horizontal).

Best Practices & Tips

- Use 'weight' to distribute available space proportionally.

- Avoid deep nesting; it may affect performance.

RelativeLayout
RelativeLayout arranges its children relative to each other or the parent container. It offers
flexible positioning options.

Key Attributes
android:layout_below - Places a view below another view.

android:layout_alignParentTop - Aligns the view to the top edge of the parent.

android:layout_centerHorizontal - Centers the view horizontally within the parent.

android:layout_alignParentStart - Aligns the view to the start (left in LTR) of the parent.

Example XML
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:layout_below="@id/label" />

</RelativeLayout>

Visual Representation
Views positioned relative to others or to the parent container.
Best Practices & Tips
- Good for complex layouts but can become hard to manage with many rules.

- Prefer ConstraintLayout for complex modern layouts.

ConstraintLayout
ConstraintLayout allows positioning and sizing of views using constraints relative to other
views or the parent container. It is flexible and helps reduce layout nesting.

Key Attributes
app:layout_constraintTop_toTopOf - Constrains the top of a view to the top of another view
or parent.

app:layout_constraintStart_toStartOf - Constrains the start of a view to the start of another

view or parent.

app:layout_constraintBottom_toBottomOf - Constrains the bottom of a view to the bottom of

another view or parent.

app:layout_constraintEnd_toEndOf - Constrains the end of a view to the end of another view

or parent.

Example XML
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Press"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Visual Representation
Views connected with constraints to other views or the parent.

Best Practices & Tips

- Use the Layout Editor in Android Studio for easier constraint setup.

- Best choice for complex, responsive UIs.

FrameLayout
FrameLayout is designed to block out an area on the screen to display a single item. Multiple
children are stacked, with the last child on top.

Key Attributes
android:foreground - Specifies a drawable to draw in the foreground.

android:foregroundGravity - Specifies the gravity for the foreground drawable.

android:measureAllChildren - Determines whether to measure all children or just the

visible ones.

Example XML
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/background" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overlay Text" />

</FrameLayout>

Visual Representation
Children are stacked; last added is on top.

Best Practices & Tips

- Great for overlays, fragments, and simple content display.

- Avoid using it for complex nested layouts.

TableLayout
TableLayout organizes its children into rows and columns.

Key Attributes
android:stretchColumns - Specifies which columns should stretch to fill available space.

android:shrinkColumns - Specifies which columns can shrink to fit the content.

android:collapseColumns - Specifies which columns are hidden.

Example XML
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableRow>
<TextView android:text="Name" />
<EditText android:hint="Enter Name" />
</TableRow>

<TableRow>
<TextView android:text="Email" />
<EditText android:hint="Enter Email" />
</TableRow>

</TableLayout>

Visual Representation
Content organized into a grid of rows and columns.

Best Practices & Tips

- Use for forms or tabular data.

- Avoid too many columns to keep it readable.

GridView
GridView displays items in a two-dimensional, scrollable grid.

Key Attributes
android:numColumns - Defines the number of columns in the grid.

android:verticalSpacing - Specifies the vertical spacing between rows.

android:horizontalSpacing - Specifies the horizontal spacing between columns.

android:stretchMode - Defines how columns should stretch to fit the grid width.

Example XML
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="10dp"
 android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />

Visual Representation
Items displayed in rows and columns that can scroll.

Best Practices & Tips

- Perfect for image galleries and product listings.

- Use an Adapter to supply data to the GridView.

Layout Comparison Table

• LinearLayout: Simple, best for stacking views vertically/horizontally.
• RelativeLayout: Flexible positioning, but can get complex.
• ConstraintLayout: Modern, powerful, reduces nesting.
• FrameLayout: Good for overlays and fragments.
• TableLayout: Great for forms and tabular content.
• GridView: Ideal for displaying items in a grid pattern.