TextView, Buttons, Images, and Input Fields

# CHAPTER 11

TextView, Buttons, Images, and Input Fields #

1. Introduction #

2. Learning Objectives #

• Render typography utilizing the TextView component.

• Configure image display algorithms utilizing the ImageView.

• Capture user keyboard data utilizing EditText and Input Types.

• Execute logic via interactive Button components.

• Connect XML Views to Kotlin logic utilizing findViewById and Click Listeners.

3. The TextView (Typography) #

XML Implementation:

<TextView
    android:id="@+id/titleText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Create Account"
    android:textSize="24sp"
    android:textStyle="bold"
    android:textColor="#333333"
    android:textAlignment="center" />

*Note the android:id attribute! This is incredibly important. Giving the view an ID (@+id/...) allows our Kotlin code to find it later!*

4. The ImageView (Graphics) #

XML Implementation:

<ImageView
    android:id="@+id/profileImage"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/my_logo"
    android:scaleType="centerCrop" />

*The scaleType is critical. centerCrop tells the image to fill the 150dp square perfectly, cropping off any excess edges so it doesn't stretch and look weird.*

5. The EditText (User Input) #

XML Implementation:

<EditText
    android:id="@+id/passwordInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your password"
    android:inputType="textPassword" />

*The android:hint displays faded placeholder text. The inputType="textPassword" is magical: it automatically hides the user's typing with black dots! Other types include number, textEmailAddress, and phone.*

6. The Button (Interactivity) #

XML Implementation:

<Button
    android:id="@+id/submitBtn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login" />

7. Connecting XML to Kotlin (The Click Listener) #

*(Note: While ViewBinding is the modern standard, findViewById is the architectural foundation every Android developer must understand first).*

Kotlin Logic (MainActivity.kt):

package com.example.uibasics

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. Find the Views in the XML using their IDs!
        val titleText: TextView = findViewById(R.id.titleText)
        val passwordInput: EditText = findViewById(R.id.passwordInput)
        val submitBtn: Button = findViewById(R.id.submitBtn)

        // 2. Attach a "Listener" that waits for the user to tap the button!
        submitBtn.setOnClickListener {
            // 3. Extract the typed text from the EditText
            val enteredPassword = passwordInput.text.toString()

            // 4. Update the TextView!
            titleText.text = "Password Saved: $enteredPassword"
        }
    }
}

8. Mini Project: Interactive Login Box #

The 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"
    android:padding="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/welcomeLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Who are you?"
        android:textSize="22sp" />

    <EditText
        android:id="@+id/nameField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type your name"
        android:layout_marginTop="20dp" />

    <Button
        android:id="@+id/greetButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Say Hello"
        android:layout_marginTop="20dp" />

</LinearLayout>

The Kotlin Logic:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val welcomeLabel = findViewById<TextView>(R.id.welcomeLabel)
    val nameField = findViewById<EditText>(R.id.nameField)
    val greetButton = findViewById<Button>(R.id.greetButton)

    greetButton.setOnClickListener {
        val userName = nameField.text.toString()
        // If the box isn't empty, update the label!
        if (userName.isNotEmpty()) {
            welcomeLabel.text = "Hello, $userName!"
        }
    }
}

9. Common Mistakes #

• Forgetting .toString(): When you extract text from an EditText (e.g., inputField.text), it does not return a simple String. It returns an Editable object. If you try to compare it (if (inputField.text == "Password")), it will fail. You MUST call .toString() first!

• NullPointerExceptions with IDs: If you type findViewById(R.id.submitBtn), but you accidentally forgot to add android:id="@+id/submitBtn" into the XML, your app will crash instantly upon opening. The Kotlin logic cannot find the XML button!

10. Best Practices #

• Leverage inputType: Always specify the inputType on an EditText. If you are asking for an age, set inputType="number". This magically forces the phone to open a numeric keypad instead of the full alphabet keyboard, providing a vastly superior User Experience (UX).

11. Exercises #

1. 1. Create an ImageView in XML. Apply an android:src tag pointing to an image you dragged into your drawable folder.

1. 2. In Kotlin, use findViewById to hook up a Button, and write a setOnClickListener block that prints a message to the Logcat console when tapped.

12. Coding Challenges #

13. MCQ Quiz with Answers #

14. Interview Questions #

• Q: Explain the mechanical flow of event-driven programming utilizing a setOnClickListener. How does the Android main thread know when to execute the closure?

• Q: Describe the UX impact of the android:inputType attribute on an EditText. Provide three examples of distinct input types and how they mutate the OS soft-keyboard.

• Q: Contrast the android:src and android:background attributes when applied to an ImageView. Why does applying an image to the background often cause destructive stretching?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #