How to connect a custom view and a custom layout?

To connect a custom view (inherited from View or its subclasses) with a custom layout (XML layout), the following mechanisms are used:

1. Overriding view constructors: The custom view should have constructors that allow the Android system to create it from XML. The most important ones:

   • public MyCustomView(Context context)
   • public MyCustomView(Context context, AttributeSet attrs)
   • public MyCustomView(Context context, AttributeSet attrs, int defStyleAttr)
   • public MyCustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)

   In constructors that accept AttributeSet, you can obtain attributes defined in XML.

2. Using <merge> or <include> when necessary (for complex views):

   • <include>: Allows including the content of another layout. Useful for reusable UI parts.
   • <merge>: Used as the root element of a layout to avoid unnecessary nesting in the view hierarchy, especially when using <include> with <FrameLayout> or <LinearLayout>.

3. Instantiate the View and Inflate the Layout: In the constructor of the custom view (usually in the one that takes AttributeSet), you create instances of internal views and inflate the layout.

Example:

// custom_my_view.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textViewTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"/>

    <EditText
        android:id="@+id/editTextValue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter value"/>

</LinearLayout>

// MyCustomView.kt (Custom View class)
class MyCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    private val textViewTitle: TextView
    private val editTextValue: EditText

    init {
        // Inflate the custom layout
        LayoutInflater.from(context).inflate(R.layout.custom_my_view, this, true)

        // Get references to the views defined in the layout
        textViewTitle = findViewById(R.id.textViewTitle)
        editTextValue = findViewById(R.id.editTextValue)

        // Process custom attributes if any
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyCustomView, defStyleAttr, 0)
        val titleText = typedArray.getString(R.styleable.MyCustomView_titleText)
        typedArray.recycle()

        // Set initial values based on attributes or default
        textViewTitle.text = titleText ?: "Default Title"
    }

    // Public methods to interact with the internal views
    fun setTitle(title: String) {
        textViewTitle.text = title
    }

    fun getValue(): String {
        return editTextValue.text.toString()
    }
}

<!-- styles.xml (Optional: define custom attributes) -->
<resources>
    <declare-styleable name="MyCustomView">
        <attr name="titleText" format="string"/>
    </declare-styleable>
</resources>

<!-- activity_main.xml (Using the custom view) -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.yourpackage.MyCustomView
        android:id="@+id/myCustomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleText="My Custom Title"/>

</LinearLayout>

The essence is that the custom view class (for example, MyCustomView) acts as a container that manages views defined in its custom layout (custom_my_view.xml). It "inflates" this layout in its constructor and obtains references to its internal elements (findViewById).