Mastering Android Layouts: A Guide to ViewGroups and Their Key Attributes

Introduction

ViewGroups in Android Kotlin are containers that hold and manage child views (other Views or ViewGroups). They define the layout structure for the views they contain and determine how child views are positioned and displayed on the screen.

Some Common attributes under ViewGroups :

Relative Layout

A RelativeLayout is a ViewGroup that allows you to position child views relative to each other or relative to the parent container.

Some common key attributes:

android:layout_alignParentTop Aligns the view to the top of the parent.
android:layout_alignParentBottom Aligns the view to the bottom of the parent.
android:layout_alignParentLeft Aligns the view to the left of the parent.
android:layout_alignParentRight Aligns the view to the right of the parent.
android:layout_centerInParent Center the view both vertically and horizontally within the parent.
android:layout_centerHorizontal Center the view horizontally within the parent.
android:layout_centerVertical Center the view vertically within the parent.
android:layout_above Places the view above the specified sibling view.
android:layout_below Places the view below the specified sibling view.
android:layout_toLeftOf Places the view to the left of the specified sibling view.
android:layout_toRightOf Places the view to the right of the specified sibling view.
android:layout_alignTop Aligns the top edge of a view with another view's top edge.
android:layout_alignBottom Aligns the bottom edge of a view with another view's bottom edge.
android:layout_alignLeft Aligns the left edge of a view with another view's left edge.
android:layout_alignRight Aligns the right edge of a view with another view's right edge.

Linear Layout

A LinearLayout is a ViewGroup that aligns all its child views in a single direction, either vertically or horizontally.

Some common key attributes:

android:orientation Specifies the direction of child views (vertical or horizontal).
android:gravity Aligns all child views within the parent layout (center, left, right, top, bottom).
android:layout_gravity Aligns an individual child view within its parent (center, left, right, top, bottom).
android:layout_weight Allocates extra space to child views proportionally.
android:divider Adds a drawable as a divider between child views.
android:showDividers Specifies where dividers should appear (none, beginning, middle, end).
android:dividerPadding Adds padding around dividers.

Constraint Layout

A ConstraintLayout is a ViewGroup that allows you to position and size views using constraints relative to other views, the parent layout, or guidelines.

Some common key attributes :

app:layout_constraintLeft_toLeftOf Aligns the left edge of a view to the left edge of another.
app:layout_constraintRight_toRightOf Aligns the right edge of a view to the right edge of another.
app:layout_constraintTop_toTopOf Aligns the top edge of a view to the top edge of another.
app:layout_constraintBottom_toBottomOf Aligns the bottom edge of a view to the bottom edge of another.
app:layout_constraintBaseline_toBaselineOf Aligns the baseline of text in one view with another.
app:layout_constraintHorizontal_bias Controls the horizontal positioning of a view
(0.0 for start, 1.0 for end, 0.5 for center).
app:layout_constraintVertical_bias Controls the vertical positioning of a view
(0.0 for start, 1.0 for end, 0.5 for center)
app:layout_constraintWidth_default Controls the default behaviour of width (spread, wrap, or percent).
app:layout_constraintHeight_default Controls the default behaviour of height (spread, wrap, or percent).

1. Aligning the View’s Vertical Coordinates on the layout view-group

2. Aligning the View’s Horizontal Coordinates on the layout view-group

3. Defines the View’s Constraint in each direction

4. Making the View’s width & height: 0dp, will make it expand to fit the size in the horizontal or vertical axis respectively.

Chains in ConstraintLayout are a powerful feature that lets you control how multiple views are arranged and distributed along a single axis (horizontal or vertical). Chain Styles involve:

• spread - Views are distributed evenly across the available space.

• spread_inside - Views are distributed evenly but the first and last view are aligned to the chain boundaries.

• packed - Views are packed tightly together, and the whole group can be aligned within the chain.

• weighted - Assign weights to views

Guidelines in ConstraintLayout are invisible layout components that help you align and position views. They are used as reference lines that don't display on the screen but act as anchors to which other views can be constrained.

Frame Layout

A FrameLayout is a simple and lightweight ViewGroup that is designed to hold a single child view. It is mainly used for stacking views on top of one another.

Some common key attributes :

android:foreground Defines a drawable to be displayed on top of the children.
android:foregroundGravity Specifies the gravity of the foreground drawable (e.g., center, start, end).
android:measureAllChildren If set to true, ensures all children are measured even if they are GONE.
android:clipChildren If set to true (default), clips child views to the bounds of the FrameLayout.

ScrollView

A ScrollView is a type of ViewGroup that allows users to scroll through a large number of child views that may not fit entirely on the screen. It is primarily used when the content inside the layout exceeds the available screen space
Just add a Scroll View element on the layout file & define elements under the Scroll View tree. Similarly, a horizontal scroll bar can be created by the HorizontalScrollBar element.

<androidx.constraintlayout.widget.ConstraintLayout .. > 
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"> 
        <TextView .. > 
<!-- if our textview goes out of bonds a scroll bar is created -->
    </ScrollView> 
</androidx.constraintlayout.widget.ConstraintLayout>

Some common key attributes :

android:fillViewport If set to true, ensures that the ScrollView fills the entire screen, even if its content is smaller than the screen size.
android:scrollbars Controls the visibility of the scrollbar. Options include none, vertical, horizontal, or both.
android:overScrollMode Defines how the ScrollView behaves when the user reaches the end of the scrollable content (e.g., never, always, ifContentScrolls).
android:layout_height The height of the ScrollView is typically set to match_parent so it occupies the full height of the screen.

Making the view scrollable requires the height to be wrap content, or a height that does’t allow the view to contain the whole data at once.

Nested ScrollView

A NestedScrollView is an enhanced version of the standard ScrollView that supports advanced scrolling behaviours, especially when used with other scrolling views such as RecyclerView or AppBarLayout.

Some common key attributes :

android:fillViewport If set to true, ensures the NestedScrollView fills the entire screen, even if the content is smaller than the screen size.
android:scrollbars Controls the visibility of the scrollbar (none, vertical, or horizontal). android:clipToPadding If false, the view will allow its children to be drawn beyond its padding area. app:layout_behaviour Used to define the scrolling behaviour when used with CoordinatorLayout. android:overScrollMode Defines the over-scroll behaviour (always, never, ifContentScrolls).

Grid Layout

GridLayout is a ViewGroup in Android that organizes its child views into a flexible grid structure. It allows you to specify rows and columns and place child views accordingly, making it suitable for creating layouts like dashboards or grids.

Some common key attributes :

android:rowCount Specifies the total number of rows in the grid.
android:columnCount Specifies the total number of columns in the grid.
android:orientation Defines whether the grid is laid out horizontally or vertically.
layout_row Specifies the row index of a child view.
layout_column Specifies the column index of a child view.
layout_rowSpan Defines how many rows a child view should span.
layout_columnSpan Defines how many columns a child view should span.
layout_gravity Specifies alignment for child views within their grid cell (top, bottom, left, right, center).
layout_margin Adds spacing around child views.

---