UI
189 bites tagged UI — interview questions with model answers, and 60-second explainers.
Animated.sequence versus Animated.parallel
Sequence runs animations one after another in order, parallel starts them at the same time. Composing multiple animations. thinking parallel waits for the slowest before others begin, or confusing them with stagger.
Build a mount fade-in with Animated API
Create an Animated.Value(0) in a ref, drive it with Animated.timing inside useEffect, bind it to opacity on Animated.View. Basic Animated API fluency. animating opacity via setState every frame.
Build a custom layout in Jetpack Compose
Use the Layout composable with a MeasurePolicy, measure each child once with constraints, then place children and report your size. understanding Compose's measure/place model.
Implicit .animation() vs explicit withAnimation
.animation(value:) animates a view when a tracked value changes; withAnimation wraps the state mutation so all dependent views animate. How SwiftUI ties animation to state changes.
How do you build a custom SwiftUI Layout?
Conform to Layout, implement sizeThatFits to report the container size for a proposal, and placeSubviews to position each subview using its measured size. SwiftUI's Layout protocol for bespoke arrangements.
Shopify's 0% to 100% Fix: Design Dialects Over Rigidity
Shopify Polaris hit 0% completion for gloved warehouse pickers until a dialect with 90px targets and dark UI hit 100%, cutting onboarding from three weeks to one shift. Atlassian formalized this into a three-tier Flexibility Framework. Rigid systems break.
Describe CustomPaint and CustomPainter and implement a circle
This tests Flutter's render delegation. Separate CustomPaint, the canvas widget, from CustomPainter, the drawing logic; cover canvas.drawCircle and shouldRepaint returning false. Red flags: calling setState in paint or ignoring shouldRepaint.
Implicit vs explicit animations: AnimatedContainer or AnimationController?
Knowledge of Flutter's implicit versus explicit animation paradigms. Implicit widgets auto-animate property changes on rebuild; explicit controllers manage playback manually. Red flag: saying explicit is always superior or that implicit animations cannot stop.
What gesture conflict exists in a scrollable list with horizontal swipes?
Tests Flutter's gesture arena and slop disambiguation. Diagonal motion triggers both vertical scroll and horizontal swipe; the axis whose delta exceeds touch slop first wins the arena. Red flag: claiming Flutter blocks inner gestures or fires both at once.
Material Design: Android's Paper Metaphor
Material Design models Android UI as stacked paper with light and elevation. It ships pre-built components like cards and FABs so your app feels native immediately.
Elevation System: Height as a Token
Elevation is spatial height, not just shadows: it maps every surface to a specific z-height. Use it for modals, dropdowns, and draggable cards. The footgun is tuning shadows without locking z-index, so visually higher elements still get buried.
Motion Tokens Turn Timing into a System
Motion tokens standardize animation like color tokens standardize palettes. A team can retime an entire product from one file. The footgun is naming tokens after CSS curves instead of intent, locking implementation details into your design language.
What is overdraw in Android UI and how do you reduce it?
This tests GPU fill awareness. A strong answer defines overdraw as redrawing pixels repeatedly, names Debug GPU Overdraw's color overlay, and offers fixes: remove unnecessary backgrounds and flatten hierarchies. Red flag: confusing this with CPU layout issues.
How do you display a large list efficiently in Jetpack Compose?
This tests understanding of Compose lazy versus eager layout. A strong answer names LazyColumn or LazyRow, notes visible-only composition, and contrasts Column which lays out everything upfront.
Explain Jetpack Compose recomposition, its triggers, and optimizations.
This tests grasp of Compose's reactive model. A strong answer defines recomposition as recomputing composables when state changes, notes State triggers it, and explains Compose skips unchanged subtrees via smart tracking.
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.
Explain the difference between LinearLayout, RelativeLayout, and FrameLayout
Understanding of ViewGroup measurement and simplicity versus flexibility tradeoffs. LinearLayout for 1D lists, RelativeLayout for complex sibling rules, FrameLayout for single-child or overlap.
Which Android Studio tool inspects view hierarchy and what does it show?
Tests practical knowledge of runtime UI debugging tools. A strong answer names Layout Inspector, cites live view hierarchy with bounds and attributes, and distinguishes it from the static Layout Editor. Red flag: citing Logcat or the preview pane instead.
How to use a nested navigation graph for a login flow?
Tests your ability to structure complex UI flows using Navigation Component. A great answer defines a separate login graph XML, includes it in the main graph, and navigates to the graph's ID. This encapsulates the flow, making it reusable.
How to implement efficient large lists in Jetpack Compose?
This tests your grasp of Compose performance. Use `LazyColumn` to compose only visible items, unlike a `Column` which renders all items at once. A red flag is suggesting a scrollable `Column`, which has severe performance costs for large lists.
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.
Explain ConstraintLayout, Chains, and Barriers
Tests your grasp of performant Android UIs. Explain how ConstraintLayout flattens hierarchy, use chains to distribute groups of views (e.g., packed), and use barriers to align elements against dynamic content.
Android Style vs. Theme and Attribute Resolution
Tests your grasp of Android's resource scope and resolution timing. A Style targets a single View, while a Theme applies to a whole Context. `@color/` is a direct, compile-time link; `?attr/` is an indirect pointer resolved against the Theme at runtime.
Get UI bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.