Custom UI Components and Reusable Design

# CHAPTER 17

Custom UI Components and Reusable Design #

1. Introduction #

2. Learning Objectives #

• Understand the DRY (Don't Repeat Yourself) principle in UI design.

• Use the <include> tag to reuse XML layouts.

• Build a Custom Compound View using Kotlin and XML.

• Define custom XML attributes (declare-styleable).

• Understand the basics of a Design System.

3. Reusing Layouts with <include> #

Step 1: Create layout/mycustomcard.xml:

<com.google.android.material.card.MaterialCardView ...>
    <TextView android:text="Shared Content" />
</com.google.android.material.card.MaterialCardView>

Step 2: Use it anywhere:

<LinearLayout ...>
    <include layout="@layout/my_custom_card" />
</LinearLayout>

*Tip: You can override android:id, layoutwidth, and layoutheight directly in the <include> tag.*

4. Custom Compound Views #

Let's build a ProfileInfoRow (an icon on the left, title text, and subtitle text).

Step 1: The XML (viewprofilerow.xml)

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/rowIcon" ... />
    <TextView android:id="@+id/rowTitle" ... />
    <TextView android:id="@+id/rowSubtitle" ... />
</merge>

*Note: We use <merge> instead of a Layout to prevent unnecessary nesting when we inflate it.*

Step 2: The Kotlin Class

class ProfileInfoRow @JvmOverloads constructor(
    context: Context, 
    attrs: AttributeSet? = null, 
    defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    private val icon: ImageView
    private val title: TextView
    private val subtitle: TextView

    init {
        // Inflate the XML
        LayoutInflater.from(context).inflate(R.layout.view_profile_row, this, true)
        orientation = HORIZONTAL
        
        icon = findViewById(R.id.rowIcon)
        title = findViewById(R.id.rowTitle)
        subtitle = findViewById(R.id.rowSubtitle)
        
        // Custom logic can go here!
    }
    
    // Methods to change data dynamically
    fun setRowData(titleText: String, subtitleText: String, iconRes: Int) {
        title.text = titleText
        subtitle.text = subtitleText
        icon.setImageResource(iconRes)
    }
}

Step 3: Using it in XML

<com.yourpackage.ProfileInfoRow
    android:id="@+id/phoneRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

5. Design Systems #

6. Defining Custom XML Attributes #

<resources>
    <declare-styleable name="ProfileInfoRow">
        <attr name="rowTitle" format="string" />
        <attr name="rowIcon" format="reference" />
    </declare-styleable>
</resources>

Then, in your Kotlin init block, you read these attributes using context.obtainStyledAttributes and apply them immediately!

7. Common Mistakes #

• Not using <merge>: If your custom Kotlin class extends LinearLayout, and you inflate an XML file that has a LinearLayout root, you end up with a LinearLayout inside a LinearLayout. Using <merge> as the root of the inflated XML prevents this.

• Memory Leaks: If your custom view registers listeners to singletons or static variables, remember to unregister them in onDetachedFromWindow.

8. Best Practices #

• Start small. Don't build a massive custom view framework from day one. When you notice you are copying and pasting the same XML for a 3rd time, extract it into a custom component.

• Use Android's styles.xml to globally style standard widgets before resorting to custom Kotlin classes.

9. Exercises #

1. 1. Extract a complex button layout you made in a previous chapter into its own XML file and use the <include> tag to place it on a different screen.

1. 2. In the ProfileInfoRow example, add a function hideSubtitle() that sets the subtitle's visibility to GONE.

10. UI Design Challenges #

11. MCQ Quiz with Answers #

12. Interview Questions #

• Q: Explain how you would pass a custom XML attribute (like app:customColor) into a custom Kotlin View.

• Q: What is the difference between styling a standard Button via styles.xml and creating a custom Compound View button?

13. FAQs #

14. Summary #

15. Next Chapter Recommendation #