Layout
128 bites tagged Layout — interview questions with model answers, and 60-second explainers.
Arrange UI elements vertically or horizontally in Jetpack Compose
Tests declarative layout fundamentals. Good answers name Column and Row, explain Modifier as an ordered chain of decoration and layout behavior, and note order changes semantics. Red flag: calling Modifier "just styling" or confusing it with LinearLayout.
How does ConstraintLayout enable flat responsive UIs with chains and barriers?
It tests constraint-based positioning and flat hierarchy performance. A strong answer covers relative constraints replacing nested layouts, chains for distributing groups, and barriers for dynamic alignment to extreme edges.
How do you arrange UI elements in Jetpack Compose?
Tests your grasp of Compose's declarative layout model. Explain `Row` (horizontal) and `Column` (vertical) as the core layout composables. Define `Modifier` as the standard way to configure size, spacing, and behavior.
LinearLayout vs. RelativeLayout vs. FrameLayout
This tests your knowledge of fundamental View layouts and performance trade-offs. Define LinearLayout (single axis), RelativeLayout (relative positioning), and FrameLayout (stacking), giving a clear use case for each.
What is the `res/` directory and how do you use resource qualifiers?
This tests your grasp of Android's resource system. Explain that `res/` separates assets from code and that qualifiers (e.g., `layout-land`) let the OS pick the right layout. A red flag is checking orientation manually in code instead of using this system.
How to arrange UI elements in Jetpack Compose?
This tests your grasp of Compose's declarative layout basics. A good answer defines Column (vertical) and Row (horizontal) for structure, and Modifier for decoration, size, and behavior. A red flag is confusing Modifiers with simple styling.
LinearLayout vs. RelativeLayout vs. FrameLayout: Explain and give use cases
Tests your grasp of classic Android layouts and performance trade-offs. A good answer defines each, gives a clear use case, and mentions `layout_weight`. A red flag is proposing nested `LinearLayout`s for complex UIs, ignoring performance.
Constraints: Building UIs with Relationships, Not Boxes
Constraints define UI by relationships, not nested boxes. Think of it like telling elements 'align with that one' instead of placing them in rigid rows. This is key for complex, responsive layouts, but can lead to unsolvable rules if not defined carefully.
Visual Balance: Arranging UI Elements for Stability
Think of visual balance like a seesaw for your UI. Elements have "visual weight" from their size and color, and a balanced design distributes this weight so the layout feels stable.
Layout Grids: Your Blueprint for Consistent UI
Layout grids are visual blueprints for frames, enforcing structure and alignment. Use them to create consistent, responsive layouts for web and mobile. A common footgun is using fixed-width columns instead of 'Stretch' columns, which breaks responsiveness.
Figma: Frames vs. Groups
A Frame is a container with its own size, like an artboard; a Group's size just shrinks to fit its contents. Use Frames for UI components with fixed dimensions and clipping, and Groups for simple collections.
Baseline Grid: Aligning Text for Vertical Rhythm
A baseline grid is like ruled notebook paper for your UI, forcing all text to sit on common horizontal lines for clean vertical rhythm. Use it in text-heavy layouts to improve readability.
The Golden Ratio in UI Design
The Golden Ratio (1.618) is a proportion from art and nature used to create visually harmonious UI. Apply it to set layout dimensions or create a typographic scale (e.g., a 26px header for 16px body text).
Modular Grid: Organizing UI with Cells, Not Just Columns
Think of a modular grid as spreadsheet cells for your UI. It extends a column grid with horizontal rows, creating a matrix of modules. It's ideal for repeating items like product cards or dashboard widgets.
White Space: Designing with Nothing
White space isn't just empty background; it's an active tool for grouping related elements and separating unrelated ones. Use it to improve readability and create focus. The footgun is seeing it as leftover space to be filled, which creates visual clutter.
Kerning, Tracking, and Leading: Spacing in Typography
Kerning adjusts space between two letters, tracking adjusts space across a whole word, and leading controls vertical line spacing. These are used in UI and branding to improve readability. The footgun is confusing kerning (pairs) with tracking (groups).
PixelRatio: Bridge Layout Units to Physical Pixels
PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring `getFontScale()` creates a fixed, inaccessible UI.
React Native's Dimensions API: The Manual Approach
React Native's `Dimensions` API is a low-level way to get a one-time snapshot of screen or window sizes. Use it outside React components or when you need to subscribe to changes manually. The footgun is caching its value, as it won't update on rotation.
alignItems: Aligning Children on the Cross Axis
alignItems arranges children along the cross axis of a flex container. If items flow down (column), it aligns them left/right. If they flow across (row), it aligns them top/bottom. The footgun: `alignSelf` on a child overrides this parent property.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
React Native's Text Component: Beyond Displaying Words
The React Native `<Text>` component creates a special text layout context, not a Flexbox one. Use it for all text, nesting components to style parts of a sentence.
The View Component: React Native's UI Building Block
Think of `View` as the `<div>` of React Native. It’s the fundamental container for grouping and styling other components, used everywhere to structure layouts with flexbox. The footgun: Text must be in a `<Text>` component, not directly in a `View`.
Flexbox: Responsive Layouts in React Native
Flexbox arranges components along a primary axis, creating responsive UIs without manual calculations. It's used for nearly all layout needs, from centering items to building complex grids.
UICollectionView: Grids, Stacks, and Custom Layouts
UICollectionView is a powerful tool for displaying items in customizable layouts, going far beyond a simple vertical list. Use it for photo galleries or App Store-style interfaces.
Get Layout bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.