User Interface in Android: XML-based UI & Programmatic UI

User Interface in Android: XML-based UI & Programmatic UI

In Android development, the User Interface (UI) is how users see and interact with an app — buttons, text, images, forms, etc.

There are two main ways to create UI:

1️⃣ XML-based UI (Design using XML layout files)
2️⃣ Programmatic UI (Create UI using Kotlin code)

Think of it like building a house:

• XML UI → blueprint/design plan

• Programmatic UI → building the house directly with tools

---

1. XML-based UI

Definition

XML-based UI is a method of designing Android app layouts using XML files.

Simple meaning:

XML UI = Designing the app screen using layout files.

These layout files are stored in:

res/layout/

Example file:

activity_main.xml

---

Purpose

XML UI is used to:

• Design app screens visually

• Separate design from logic

• Make layouts easier to maintain

• Support different screen sizes

---

Basic Syntax

Example XML layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to My App"/>

    <Button
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"/>

</LinearLayout>

Explanation:

• LinearLayout → layout container

• TextView → displays text

• Button → clickable button

---

Kotlin Code to Use XML UI

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val button = findViewById<Button>(R.id.buttonClick)

        button.setOnClickListener {
            println("Button clicked")
        }
    }
}

Explanation:

• setContentView() loads the XML layout

• findViewById() connects UI element to Kotlin code

---

Important Properties (XML)

Property	Purpose
layout_width	Width of view
layout_height	Height of view
id	Unique identifier
text	Display text
orientation	Layout direction

Example:

android:layout_width="match_parent"
android:text="Hello"

---

Real-Time Examples (XML UI)

App Screen	UI Components
Login screen	EditText + Button
Shopping app	Image + TextView
Settings page	Switches & Toggles
Social media feed	Images + Text

Most Android apps use XML UI for layout design.

---

2. Programmatic UI

Definition

Programmatic UI means creating Android interface elements directly in Kotlin code instead of XML.

Simple meaning:

Programmatic UI = Building UI using Kotlin code.

---

Purpose

Programmatic UI is useful when:

• UI must be generated dynamically

• Layout depends on runtime data

• Creating custom views

---

Basic Syntax (Kotlin)

Example creating UI using Kotlin:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val layout = LinearLayout(this)
        layout.orientation = LinearLayout.VERTICAL

        val text = TextView(this)
        text.text = "Hello User"

        val button = Button(this)
        button.text = "Click Me"

        layout.addView(text)
        layout.addView(button)

        setContentView(layout)
    }
}

Explanation:

• LinearLayout(this) → create layout

• TextView(this) → create text view

• Button(this) → create button

• addView() → add component to layout

---

Important Methods

Method	Purpose
setContentView()	Set screen layout
addView()	Add UI component
setOnClickListener()	Handle click events
setText()	Set text content

Example:

button.setOnClickListener {
    println("Clicked")
}

---

3. Comparison: XML UI vs Programmatic UI

Feature	XML UI	Programmatic UI
Design location	XML files	Kotlin code
Ease of design	Easier	More complex
Dynamic layouts	Limited	Very flexible
Maintenance	Easy	Harder
Common usage	Most apps	Special cases

---

4. Real-World Use Together

In most Android apps:

XML → layout design
Kotlin → app logic

Example:

XML: Button layout
Kotlin: Button click action

---

5. Advantages

XML UI

✔ Easy to design
✔ Clean separation of UI and logic
✔ Better readability

Programmatic UI

✔ Dynamic layouts
✔ More control over UI
✔ Useful for custom components

---

6. Disadvantages

XML UI

❌ Less flexible for dynamic changes

Programmatic UI

❌ Harder to read and maintain
❌ More coding required

---

7. One-Line Summary

XML-based UI designs Android layouts using XML files, while Programmatic UI creates interface elements directly using Kotlin code.

---