UI
189 bites tagged UI: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 UI interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.Animated.sequence versus Animated.parallel
Sequence runs animations one after another in order, parallel starts them at the same time.
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.
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.
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 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.
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.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.