The solution is . Just as you can put a folder inside another folder on your computer, you can put a LinearLayout inside another LinearLayout .
Example 3 — Abstract UI component composition (pseudo-CodeHS/JS style)
<div class="app"> <header class="app-header">My App</header> <div class="app-body"> <aside class="sidebar">Menu</aside> <main class="content"> <section class="card"> <h2>Card Title</h2> <p>Card details...</p> </section> </main> </div> </div> .app display: flex; flex-direction: column; height: 100vh; .app-header height: 60px; background:#333; color:#fff; padding:12px; .app-body display:flex; flex:1; .sidebar width:200px; background:#eee; padding:12px; .content flex:1; padding:16px; overflow:auto; .card background:#fff; border-radius:6px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.1);
By default, your main XML file usually starts with a LinearLayout . 2.3.9 nested views codehs
: Build UI chunks (like custom headers or cards) that can be easily moved or duplicated.
Group related elements together (e.g., placing an avatar image and a username next to each other).
Whether you are building a Checkboard layout as seen in 2.3.8 or styling an artistic screen like the Andy Warhol Image exercise 2.3.10 , the core skill remains the same: understanding the parent-child hierarchy of views. The View is the most fundamental component for building a user interface, and a parent View is always needed to hold all components of your app. The solution is
/* Content goes here */ Use code with caution. Why Use Nesting?
Pseudo-code:
If you are a student stuck on this assignment, take a step back and draw your webpage on a piece of paper. Draw boxes around the elements. Each box you draw is a div . If you can visualize the boxes on paper, the code becomes much easier to write. : Build UI chunks (like custom headers or
Distributes items with equal space around each item. 3. alignItems
styles = StyleSheet.create({ container: flex: , backgroundColor: // Change to the color required by the assignment alignItems: // Centers the child view horizontally justifyContent: // Centers the child view vertically , nestedView: width: , height: , backgroundColor: // Change to the color required by the assignment Use code with caution. Copied to clipboard Key Concepts to Remember: : The parent view uses justifyContent alignItems to control the position of the nested view. Hierarchical Structure : The inner
Aligns items to the start or end edge. Code Structure for Exercise 2.3.9
Here is how the XML hierarchy works conceptually:
export default function App() return ( <View style=styles.container> /* Inner Views will go here */ </View> );
