Skip to main content
Android UI Design with Kotlin
CHAPTER 04 Beginner

Building UI with XML Layouts

Updated: May 31, 2026
5 min read

# CHAPTER 4

Building UI with XML Layouts

1. Introduction

Welcome to Chapter 4! By now, you understand the hierarchy of Android layouts. But how do we actually tell Android *what* to draw and *where* to draw it? The answer is XML (eXtensible Markup Language). In Android, XML is used to define the visual structure of your application. Think of it as the blueprint of your app's user interface. In this chapter, we will dive deep into XML basics and the core attributes that control the appearance and positioning of your UI elements.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the syntax and structure of Android XML layouts.
  • Use core layout attributes like layoutwidth and layoutheight.
  • Differentiate between Margins and Padding.
  • Utilize gravity and layoutgravity to align elements.
  • Build a real-world Profile Layout Screen using XML.

3. XML Basics in Android

XML uses a tree-like structure made up of tags and attributes.
  • Tags define the UI component (e.g., <TextView>, <LinearLayout>).
  • Attributes define the properties of that component (e.g., android:text="Hello", android:textColor="#000000").

Every XML layout file must have exactly one root element (usually a ViewGroup like LinearLayout or ConstraintLayout), which can contain multiple child elements.

4. Core Layout Attributes

#### Width and Height Every UI component in Android must define its width and height using:
  • android:layoutwidth
  • android:layoutheight

The three most common values are:

  1. 1. wrapcontent: The view will be just big enough to enclose its content (plus padding).
  1. 2. matchparent: The view will expand to take up all the available space provided by its parent.
  1. 3. Fixed sizes (e.g., 100dp): A specific, fixed size. (It is highly recommended to use dp—density-independent pixels—rather than exact pixels).

#### Margins vs Padding These two concepts dictate the spacing around and inside your views:

  • Padding (android:padding): Space inside the border of the view, pushing the content inward.
  • Margin (android:layoutmargin): Space outside the border of the view, pushing other views away.

xml
12345678 
<!-- Example of Margin and Padding -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Spaced Text"
    android:padding="16dp" 
    android:layout_margin="8dp"
    android:background="#DDDDDD" />

#### Gravity vs Layout Gravity Alignment is crucial for good design.

  • android:gravity: Aligns the *content inside* the view (e.g., centering the text inside a TextView).
  • android:layout_gravity: Requests the *parent* to align the view itself (e.g., centering the entire TextView within a LinearLayout).

5. Mini Project: Profile Layout Screen

Let's build a simple, clean Profile screen. We will use a vertical LinearLayout to stack an image placeholder, a name, and a bio.
xml
12345678910111213141516171819202122232425262728293031323334353637383940414243444546 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="24dp"
    android:background="#F5F5F5">

    <!-- Profile Image Placeholder -->
    <View
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#BDBDBD"
        android:layout_marginTop="32dp" />

    <!-- User Name -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jane Doe"
        android:textSize="28sp"
        android:textStyle="bold"
        android:textColor="#212121"
        android:layout_marginTop="16dp" />

    <!-- User Bio -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Passionate Android Developer and UI/UX enthusiast crafting beautiful mobile experiences."
        android:textSize="16sp"
        android:textColor="#757575"
        android:gravity="center"
        android:layout_marginTop="8dp"
        android:lineSpacingExtra="4dp"/>

    <!-- Action Button -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Edit Profile"
        android:layout_marginTop="32dp"
        android:padding="12dp" />

</LinearLayout>

6. Design Principles

  • Consistency: Use consistent margins and paddings (typically multiples of 8dp, like 8dp, 16dp, 24dp) to create a rhythm in your design.
  • Readability: Ensure enough contrast between text and background colors.
  • Breathing Room: Use padding and margins generously to avoid a cluttered UI.

7. Common Mistakes

  • Using px instead of dp or sp: Hardcoding pixel sizes will cause your UI to look huge on low-res devices and tiny on high-res devices. Always use dp for sizes and margins, and sp for text.
  • Confusing gravity with layoutgravity: Remember, gravity is for the inside, layoutgravity is for the outside.

8. Best Practices

  • Keep your XML files organized and properly indented.
  • Extract string literals into res/values/strings.xml for localization and maintainability.
  • Use hex color codes or define them in res/values/colors.xml instead of hardcoding them directly on multiple views.

9. Exercises

  1. 1. Modify the Profile Layout to change the background color to a dark theme.
  1. 2. Change the padding of the entire layout from 24dp to 48dp and observe how it squeezes the content.
  1. 3. Add a second button below "Edit Profile" that says "Log Out".

10. UI Design Challenges

Challenge: Create a "Contact Us" XML layout containing three horizontal strips. Each strip should have an icon placeholder (a View) on the left, and text on the right (e.g., Phone, Email, Location). Use LinearLayout and appropriate margins/padding.

11. MCQ Quiz with Answers

Question 1

Which attribute pushes content inside a view away from its borders?

Question 2

Which value makes a View take up all the available space provided by its parent?

12. Interview Questions

  • Q: What is the difference between dp and sp in Android XML?
  • Q: Explain the difference between gravity and layoutgravity.
  • Q: Why shouldn't you use exact pixel sizes (px) for layout dimensions?

13. FAQs

Q: Can I design UI without writing XML? A: Yes! Android Studio has a visual Design Editor where you can drag and drop components. However, understanding the underlying XML is crucial for fixing layout bugs and creating complex, precise designs. Also, modern Android development is moving towards Jetpack Compose (using Kotlin instead of XML), but XML remains widely used.

14. Summary

In this chapter, we covered the foundational building blocks of Android XML. We learned how to define the width and height of our views, space them out using margins and padding, and align them using gravity. We then applied these concepts to build a clean, real-world profile screen.

15. Next Chapter Recommendation

Now that you know how to structure your layouts and space your elements, it's time to make them interactive and stylize them further. In Chapter 5: TextView, Buttons, and Input Fields, we will explore text styling, Material buttons, and interactive user inputs.

Finish this Chapter

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

Previous Chapter Setting Up Android Studio for UI Design
Next Chapter TextView, Buttons, and Input Fields

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5