Layouts

Posts tagged with Layouts

A stylized group of overlapping circular UI tiles arranged along a cyan measurement guide.

How to Create a Custom Layout in Jetpack Compose

Create a custom Jetpack Compose layout with Layout, measure children once, respect parent constraints, and choose LayoutModifier when only one child needs custom placement.

A centered Compose-style UI card surrounded by nested measurement boundaries and directional handles.

Constraints in Jetpack Compose Explained

Understand how Jetpack Compose constraints control measurement, why sizes change inside parents, and how to debug fill, size, and unbounded-layout surprises.

Two stylized content panels aligned along a shared horizontal guide beside a vertical divider.

Baseline Alignment and Intrinsic Measurements in Compose

Learn how to align text by its baseline in Jetpack Compose and use IntrinsicSize when a layout needs content measurements before placing its children.

An abstract violet grid of cards arranged in responsive columns on a teal frame, with one coral highlighted card.

LazyVerticalGrid in Jetpack Compose: Adaptive Grids That Scale

Build responsive, efficient grids with LazyVerticalGrid in Jetpack Compose, including adaptive columns, stable keys, full-width spans, and practical performance guidance.

A violet vertical list with a fixed teal section header and a small coral footer on a dark navy background.

Sticky Headers, Headers, and Footers in Compose Lazy Lists

Build grouped LazyColumn content with sticky headers, regular headers, and footers in Jetpack Compose, with stable keys, state ownership, and practical accessibility guidance.

Violet cards of different heights flowing through a teal two-column masonry grid, with one coral card highlighted.

Lazy Staggered Grid in Jetpack Compose: Build Masonry Layouts

Learn when to use LazyVerticalStaggeredGrid in Jetpack Compose, including adaptive lanes, stable keys, full-line content, spacing, and accessible image tiles.

A dark technical illustration of an Android layout with expanding width, centered content, proportional weighted columns, and a fixed square inside a constraint frame.

fillMaxWidth, wrapContentSize, weight, and size in Jetpack Compose

Learn how fillMaxWidth, wrapContentSize, weight, and size respond to parent constraints in Jetpack Compose with practical layout examples.

A dark technical illustration of an Android layout showing evenly spaced horizontal cards, centered vertical cards, and an overlaid corner-aligned element.

Arrangement and Alignment in Jetpack Compose

Learn how Arrangement and Alignment position children in Row, Column, and Box, with practical Compose examples for spacing, centering, and overlays.