Creating User Interfaces with XML

# CHAPTER 10

Creating User Interfaces with XML #

1. Introduction #

2. Learning Objectives #

• Understand the syntax and structure of XML markup tags.

• Differentiate between a View and a ViewGroup.

• Construct a hierarchical layout architecture.

• Utilize standard XML attributes (layoutwidth, layoutheight).

• Navigate the Android Studio Split-Screen Layout Editor.

3. What is XML? #

Syntax Rules:

1. 1. Every element must have an opening tag <TextView> and a closing tag </TextView>.

1. 2. If an element has no "children" inside it, it can be self-closed: <TextView />.

1. 3. Elements are modified using Attributes placed inside the opening tag.

4. Views and ViewGroups #

• View: A single UI component (e.g., TextView, Button, ImageView).

• ViewGroup: An invisible container that holds multiple Views and arranges them (e.g., placing them in a vertical column or a horizontal row). LinearLayout is a standard ViewGroup.

*The Hierarchy Rule:* A ViewGroup is the Parent. The Views inside it are the Children.

5. Writing Your First XML Layout #

<?xml version="1.0" encoding="utf-8"?>
<!-- THE PARENT: A vertical column layout -->
<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">

    <!-- CHILD 1: Text -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to the App!"
        android:textSize="24sp"
        android:textColor="#000000" />

    <!-- CHILD 2: A Button -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Click Me" />

</LinearLayout>

6. Critical Attributes (width and height) #

1. 1. wrapcontent: The view shrinks to exactly fit the text/image inside it.

1. 2. matchparent: The view stretches to fill all available space given by its parent container.

1. 3. Hardcoded values: (e.g., 200dp). *Avoid this unless absolutely necessary, as it ruins responsiveness on different screen sizes!*

7. Understanding DP and SP #

• dp (Density-independent Pixels): Used for sizing boxes, margins, and images. It scales automatically based on the phone's screen density!

• sp (Scale-independent Pixels): Used ONLY for Text. It scales based on the screen density AND the user's accessibility font settings in their OS.

8. The Android Studio Layout Editor #

1. 1. Open any file in res/layout/.

1. 2. In the top right corner of the editing window, look for three icons: Code, Split, and Design.

1. 3. Click "Split".

1. 4. You will now see your XML code on the left, and a live rendering of the phone screen on the right! As you type XML, the phone screen updates instantly.

9. Mini Project: Simple Profile Screen #

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="32dp"
    android:background="#F0F0F0">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Alex Developer"
        android:textSize="28sp"
        android:textStyle="bold"
        android:textAlignment="center"
        android:layout_marginTop="16dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Android Engineer | Kotlin Enthusiast"
        android:textSize="16sp"
        android:textAlignment="center"
        android:textColor="#555555" />

</LinearLayout>

10. Common Mistakes #

• Forgetting to close tags: If you write <TextView layoutwidth="wrapcontent"> but forget to add </TextView> (or the self-closing />), the entire XML file will turn red with syntax errors.

• Putting dp on Text: Applying textSize="24dp" is technically allowed, but it is a massive accessibility violation. If an elderly user increases their phone's font size in the settings, dp text will refuse to grow, rendering your app unusable for them. Always use sp for text.

11. Best Practices #

• Use the strings.xml file: In the examples above, we wrote android:text="Welcome!" to make the code easy to read. In a professional app, Android Studio will highlight this in yellow, warning you against "hardcoding strings." You should always define text in the res/values/strings.xml file, and reference it via android:text="@string/welcomemessage".

1. 1. Open Android Studio, navigate to res/layout/activitymain.xml, and switch to the "Split" view.

1. 2. Add a <Button> element below the default TextView. Give it a width of matchparent and a height of wrapcontent.

13. Coding Challenges #

14. MCQ Quiz with Answers #

15. Interview Questions #

• Q: Explain the necessity of the layoutwidth and layoutheight attributes. Contrast the behavior of matchparent versus wrapcontent when applied to a Button.

• Q: Describe the architectural and accessibility benefits of extracting hardcoded string literals from UI XML into the centralized res/values/strings.xml file.

• Q: Why is the utilization of absolute hardware pixels (px) strictly forbidden in modern Android layout engineering?

16. FAQs #

17. Summary #

18. Next Chapter Recommendation #