UI
189 bites tagged UI — interview questions with model answers, and 60-second explainers.
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.
Which tool inspects the view hierarchy to debug layouts?
This tests your knowledge of core Android Studio debugging tools. A great answer names the Layout Inspector, describes its 3D component tree and attributes pane, and notes its live update capability on API 29+. A red flag is only mentioning XML files.
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.
Implement an efficient list in Jetpack Compose
Tests your grasp of UI virtualization in Compose. Answer: Use `LazyColumn` as it only composes visible items. Contrast this with `Column`, which composes all items at once, causing poor performance. Mention the `items` DSL.
Explain Recomposition in Jetpack Compose
Tests your grasp of Compose's declarative model. A good answer defines recomposition, explains state-read triggers, and details how stability and positional memoization enable skipping. A red flag is assuming any state change redraws the entire UI.
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.
How does ConstraintLayout enable complex, responsive UIs?
Tests your grasp of modern Android UI performance and responsiveness. Explain how relative positioning flattens hierarchies, then define chains for distributing space and barriers for handling dynamic content size.
Styles vs. Themes and Attribute Resolution in Android
This tests your grasp of Android's resource indirection. A Style is a set of attributes for one View type. A Theme is a collection of named attributes for an app or Activity. `?attr` is resolved at runtime against the Theme, while `@color` is a direct.
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.
How do you debug a running app's view hierarchy?
Tests practical debugging skills. A good answer names the Layout Inspector, describes the component tree and attributes panes, and explains how the 3D view finds hidden elements. A red flag is only naming the tool without explaining its use.
Explain the res/ directory and resource qualifiers for layouts
Tests your grasp of Android's core resource system. A good answer defines `res/` for non-code assets, explains how qualifiers like `layout-land` match device state, and provides a concrete example.
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.
Svelte Transitions: Declarative UI Animation
Svelte transitions are declarative animations for elements entering or leaving the DOM. Use `transition:fade` on a modal or `crossfade` for items moving between lists. The footgun: they only run on mount/unmount, not on general state changes.
The Testing Trophy: Prioritize Integration Tests
The Testing Trophy flips the classic pyramid, arguing for "mostly integration tests" to maximize your return on investment. It's for UI apps where testing component interactions gives more confidence than isolated unit tests.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
Headless Components: Separate Logic from UI
A Headless Component separates a component's logic from its UI, providing the 'brain' without the 'looks'. Use it for complex elements like dropdowns that need consistent behavior but different visual styles. The footgun is assuming it's a drop-in UI.
Realistic UI Motion with Easing Curves
Easing curves control animation acceleration to make UI motion feel natural, not robotic. Use 'Ease Out' for elements entering the screen and 'Ease In' for those leaving. The footgun is overusing one curve; this makes motion feel unnaturally perfect.
Figma Widgets: Live Apps on Your Canvas
Figma Widgets are like mini-apps living on your canvas that everyone interacts with at once, unlike single-user plugins. Use them for collaborative tools like live polls or data tables.
Prototype Animations: Guiding Users Between States
Think of prototype animations as visual storytelling, showing the relationship between a user's action and the resulting UI state. Use them to show menus expanding or pages sliding in.
Prototype Triggers: Defining How Users Interact
A prototype trigger is the 'if' in an 'if-then' UI interaction, defining the user input that causes a change. It's used in design tools to simulate app behavior, from clicks to drags.
Heuristic Evaluation: An Expert UI Review on a Budget
Heuristic evaluation is like having an expert proofread your UI against a checklist of common usability flaws. It's a fast, cheap way to catch problems before writing code, but its value depends entirely on the evaluator's skill.
Low-Fi vs. High-Fi Prototypes: Test Ideas Fast vs. Polish for Realism
Low-fi prototypes are quick sketches to test core ideas and flows. High-fi prototypes are detailed, interactive mockups that look and feel like the final product. Use low-fi early for brainstorming and high-fi late for usability testing.
Wireframing: The Blueprint for Your UI
A wireframe is a UI blueprint that shows a screen's structure, not its visual design. Use it early to agree on layout and function before getting lost in colors and fonts. The footgun is adding too much detail, which distracts from its core purpose.
Figma Codegen: Turn Designs into Framework-Specific Code
Figma codegen plugins are custom translators for Dev Mode, turning designs into framework-specific code. Use them to generate React components or extract i18n strings.
Get UI bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.