TextView, Buttons, and Input Fields

# TextView, Buttons, and Input Fields

1. Introduction #

2. Learning Objectives #

• Style text typography using TextView attributes.

• Implement and customize modern MaterialButton styles (Filled, Outlined, Text).

• Create robust user input forms using TextInputLayout and TextInputEditText.

• Handle hints, input types, and basic UI validation states.

• Connect Kotlin code to listen to button clicks.

3. Text Styling (TextView) #

Key attributes for styling:

• android:textSize: Always use sp (Scale-independent Pixels) (e.g., 16sp).

• android:textColor: Can reference colors in colors.xml or use hex codes.

• android:textStyle: normal, bold, or italic.

• android:fontFamily: Apply custom fonts (e.g., sans-serif-medium).

• android:lineSpacingExtra: Adds space between lines of text for readability.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Welcome Back!"
    android:textSize="28sp"
    android:textStyle="bold"
    android:textColor="@color/black"
    android:fontFamily="sans-serif-black" />

4. Material Buttons #

Material Design defines three main button hierarchies:

1. 1. Filled/Contained Button: High emphasis (Primary action like "Save" or "Buy").

1. 2. Outlined Button: Medium emphasis (Secondary action like "Cancel").

1. 3. Text Button: Low emphasis (Tertiary action like "Learn More").

You achieve these using styles:

<!-- 1. Filled Button (Default) -->
<com.google.android.material.button.MaterialButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Primary Action"
    app:cornerRadius="8dp" />

<!-- 2. Outlined Button -->
<com.google.android.material.button.MaterialButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Secondary Action"
    style="@style/Widget.Material3.Button.OutlinedButton" />

<!-- 3. Text Button -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Read More"
    style="@style/Widget.Material3.Button.TextButton" />

5. Input Fields (EditText & TextInputLayout) #

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email Address"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Crucial Attributes:

• android:hint: The placeholder text that floats to the top when the user starts typing.

• android:inputType: Changes the keyboard layout (e.g., textPassword hides characters, number shows a number pad).

6. Real-world Design Use Cases #

• Checkout Screen: The "Place Order" button must be a thick, brightly colored Filled Button, while the "Continue Shopping" button underneath is an Outlined Button to avoid competing for the user's attention.

• Login Form: Uses TextInputLayout with the textPassword input type, often enabling the app:passwordToggleEnabled="true" attribute to let users show/hide their password with an eye icon.

7. Interactive Kotlin Code Example #

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

        // Find the button from XML using its ID
        val loginBtn = findViewById<MaterialButton>(R.id.loginButton)
        val emailInput = findViewById<TextInputEditText>(R.id.emailEditText)

        // Listen for clicks
        loginBtn.setOnClickListener {
            val email = emailInput.text.toString()
            // Basic UI Feedback
            if (email.isEmpty()) {
                emailInput.error = "Email cannot be empty"
            } else {
                Toast.makeText(this, "Logging in...", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

8. Design Principles #

• Visual Hierarchy: Your screen should only have ONE primary (filled) button. Multiple primary buttons confuse the user on what action to take next.

• Clear Labels: Input fields should always have a visible label or hint, even after the user starts typing.

9. Common Mistakes #

• Using dp for text size: Text must always use sp so it respects the user's device accessibility settings for font size.

• Raw EditText: Using a plain <EditText> instead of <TextInputLayout>. A plain EditText lacks modern UI context, state styling, and floating hints.

10. Best Practices #

• Use inputType diligently. Showing a full QWERTY keyboard when the user is supposed to enter a phone number is terrible UX.

• Ensure buttons have a minimum height of 48dp to serve as an easily tappable touch target.

11. Exercises #

1. 1. Create an OutlinedButton and change its stroke color and border width using app:strokeColor and app:strokeWidth.

1. 2. Create a password input field using TextInputLayout and add the toggle icon so the user can see their password.

12. UI Design Challenges #

1. 1. A bold title (TextView).

1. 2. A Name input (Outlined).

1. 3. A Phone Number input (Outlined, showing number keyboard).

1. 4. A multi-line Message input (Outlined, taking up more vertical space).

1. 5. A primary "Send Message" button spanning the full width of the screen.

13. MCQ Quiz with Answers #

Q1: What unit of measurement MUST be used for the android:textSize attribute? A) dp B) px C) pt D) sp *Answer: D*

Q2: In Material Design, what type of button is used for the most important action on the screen? A) Outlined Button B) Filled / Contained Button C) Text Button D) Image Button *Answer: B*

Q3: To get a floating label effect for user input, what component should wrap your EditText? A) FloatingLayout B) LinearLayout C) TextInputLayout D) FormLayout *Answer: C*

14. Interview Questions #

• Why is TextInputLayout preferred over a standard EditText in modern Android UI?

• *Answer:* TextInputLayout is part of Material Components. It provides built-in support for floating hints, error message rendering below the line, character counting, password toggles, and box/outline styling without needing custom background drawables.

• Explain the importance of the android:inputType attribute in UX design.

• *Answer:* inputType informs the OS which virtual keyboard to display. Showing a number pad for a ZIP code or an email keyboard (with the '@' symbol easily accessible) drastically reduces friction and improves the User Experience.

15. FAQs #

How do I make a button corners perfectly round (pill shape)? Set app:cornerRadius to a very high value (e.g., 50dp), or use app:shapeAppearanceOverlay for more complex shape manipulation.

16. Summary #

17. Next Chapter Recommendation #