Skip to main content
Android Development with Kotlin
CHAPTER 12 Beginner

Layouts in Android

Updated: May 16, 2026
25 min read

# CHAPTER 12

Layouts in Android

1. Introduction

Throwing buttons and text boxes onto a screen without an organizational structure results in absolute chaos. The UI components will overlap, collapse into the top-left corner, and break entirely when the user rotates their phone. To organize Views, Android utilizes specialized parent containers called ViewGroups (Layouts). In this chapter, we will master Layouts in Android. We will explore the rigid stacking of LinearLayout, the freeform overlapping of FrameLayout, the legacy positioning of RelativeLayout, and the undisputed king of modern Android UI: The ConstraintLayout. Finally, we will implement ScrollView to handle screens that exceed the device's physical height.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Stack Views vertically and horizontally using LinearLayout and layoutweight.
  • Overlap complex graphics using FrameLayout.
  • Position Views relative to one another using RelativeLayout.
  • Architect flat, highly optimized, dynamic screens utilizing ConstraintLayout.
  • Enable vertical scrolling on massive screens utilizing ScrollView.

3. LinearLayout (The Stacker)

A LinearLayout organizes its children in a single direction: either a vertical column or a horizontal row. It is the easiest layout to understand.

Key Attributes:

  • android:orientation="vertical" (Stacks top-to-bottom)
  • android:orientation="horizontal" (Stacks side-by-side)
  • android:layoutweight: A magical attribute that allows a View to dynamically "flex" and take up a percentage of the remaining empty space.

xml
123456789101112131415161718 
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Left 50%" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Right 50%" />

</LinearLayout>

*(By setting both buttons to weight="1", they perfectly split the screen 50/50, regardless of the phone's size!)*

4. FrameLayout (The Overlapper)

A FrameLayout is designed to block out an area on the screen to display a single item. If you put multiple items inside it, they will stack *on top of each other* like layers of a cake. It is commonly used for fragments, or placing a "Loading Spinner" directly on top of an ImageView.
xml
123456789101112131415161718 
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_photo" />

    <!-- This text sits directly ON TOP of the image, centered! -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Loading..."
        android:textColor="#FFFFFF"/>

</FrameLayout>

5. RelativeLayout (The Legacy Standard)

Before 2017, RelativeLayout was the standard. It allows you to position children relative to each other. (e.g., "Put the Login Button directly *below* the Password Field"). It is mostly deprecated now in favor of ConstraintLayout, but you will see it in older codebases.

6. ConstraintLayout (The Modern King)

ConstraintLayout is the most powerful and heavily utilized layout in modern Android development. Instead of nesting layouts inside of layouts (which slows down the phone), ConstraintLayout keeps the architecture "flat." You position Views by attaching "Springs" (Constraints) from the edges of a View to the edges of the screen, or to other Views.

Every View MUST have at least one Horizontal and one Vertical constraint!

xml
12345678910111213141516171819202122232425 
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- This button is anchored perfectly to the exact center of the screen! -->
    <Button
        android:id="@+id/centerBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dead Center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- This text is anchored to the bottom of the button! -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am below the button"
        app:layout_constraintTop_toBottomOf="@id/centerBtn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

7. ScrollView (Handling Long Content)

A LinearLayout does NOT scroll automatically. If you add 50 buttons to a vertical LinearLayout, 40 of them will bleed off the bottom of the screen, completely inaccessible to the user. To fix this, you must wrap the layout in a ScrollView. *(Note: A ScrollView can only have ONE direct child! You must put a LinearLayout inside the ScrollView).*
xml
1234567891011121314 
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <!-- Add 50 buttons here, and the screen will now scroll perfectly! -->
        
    </LinearLayout>

</ScrollView>

8. Mini Project: Login Screen Layout

Let's build a production-ready Login layout utilizing the power and flatness of ConstraintLayout.
xml
12345678910111213141516171819202122232425262728293031323334353637383940414243 
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/company_logo"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="60dp"/>

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email Address"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@id/logo"
        android:layout_marginTop="40dp"/>

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintTop_toBottomOf="@id/email"
        android:layout_marginTop="16dp"/>

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        app:layout_constraintTop_toBottomOf="@id/password"
        android:layout_marginTop="32dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

9. Common Mistakes

  • Nesting LinearLayouts: Beginners often put a LinearLayout inside a LinearLayout inside a LinearLayout to build complex grids. This destroys app performance because the Android OS has to mathematically calculate the layout 3 layers deep on every frame. Use a single ConstraintLayout instead.
  • Missing Constraints: If you drag a button onto a ConstraintLayout in the Design editor and forget to anchor it to the edges, it will look fine on your laptop, but when you run the app, the button will instantly collapse into the top-left corner (0,0).

10. Best Practices

  • Embrace the Layout Editor: While typing XML is great for understanding the code, ConstraintLayout is explicitly designed to be built using the Visual Design editor. Dragging the "spring" arrows from view to view in the GUI is the industry-standard way to rapidly build responsive constraints.

11. Exercises

  1. 1. Create a LinearLayout with horizontal orientation. Add 3 buttons inside it, and use layoutweight="1" on all of them to create three perfectly equal columns.
  1. 2. Wrap a massive LinearLayout (containing 20 text views) inside a ScrollView.

12. Coding Challenges

Challenge: Replicate the Mini Project Login Screen layout. However, add a "Forgot Password?" TextView. Anchor its Top to the Bottom of the loginBtn. Anchor its Start and End to the parent to perfectly center it underneath the button!

13. MCQ Quiz with Answers

Question 1

Which Android ViewGroup is architecturally optimized to create "flat" View hierarchies by utilizing mathematical anchors and springs to relate Views to one another, drastically improving rendering performance?

Question 2

When utilizing a ScrollView to enable vertical scrolling, what strict architectural limitation must the developer adhere to?

14. Interview Questions

  • Q: Explain the performance penalty associated with "Deep View Hierarchies" (e.g., nesting 5 LinearLayouts). How does ConstraintLayout fundamentally resolve this issue?
  • Q: Describe the mechanical function of the android:layoutweight attribute within a horizontal LinearLayout. How does it facilitate responsive design across differing hardware screen widths?
  • Q: Contrast the visual behavior of a FrameLayout with a LinearLayout. Provide a specific UI scenario where FrameLayout is the objectively correct architectural choice.

15. FAQs

Q: My ConstraintLayout code has lines like app:layoutconstraintToptoTopOf. Why app: instead of android:? A: Attributes starting with android: are built directly into the core Android operating system. Attributes starting with app: belong to external, continually updated Jetpack libraries (like ConstraintLayout). It tells the compiler to look in the imported library for the rule, not the legacy OS!

16. Summary

In Chapter 12, we mastered the architectural scaffolding required to construct complex, responsive interfaces. We utilized LinearLayouts to stack components and mathematically divide screen real estate via layout_weight. We overlapped visual layers utilizing FrameLayout, and prevented UI cutoff on small devices by wrapping extensive hierarchies within a ScrollView. Finally, we established modern industry supremacy by architecting flat, highly performant UI grids utilizing the mathematical anchors of the ConstraintLayout.

17. Next Chapter Recommendation

Our layouts are solid, but a ScrollView is terrible for displaying a list of 10,000 items (it will load all 10,000 instantly and crash the phone's memory). To display massive datasets like an Instagram feed, we need a specialized engine. Proceed to Chapter 13: RecyclerView and ListView.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter TextView, Buttons, Images, and Input Fields
Next Chapter RecyclerView and ListView

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5