Android Data Binding using include tag

android

data-binding

layout-modularity

view-model

byAlex Kataev·Nov 26, 2024

To achieve data binding in an included layout in Android, create a bindable variable within the included layout and transmit the data model from the main layout using the include tag’s app:variable attribute:

Main layout (main_layout.xml):

<layout xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewModel"
            type="com.example.YourViewModel" />
    </data>
    ...
    <include
        layout="@layout/included_layout"
        // It's like putting viewModel on a holiday to included_layout land
        app:variable="@{viewModel}" /> 
    ...
</layout>

Included layout (included_layout.xml):

<layout>
    <data>
        <variable
            name="variable"
            type="com.example.YourViewModel" />
    </data>
    <TextView
        // variable enjoying vacation on cozy TextView beach
        android:text="@{variable.someProperty}" />
</layout>

By assigning a variable in the included XML, and channeling your viewModel directly to this variable using the app:variable syntax, you maintain modularity and facilitate seamless data binding globally.

The "how" and "why" of include

The merits of include tag in data binding

Data Binding with the include tag enhances layout modularity while allowing the direct injection of data objects into our included layouts:

Optimized Access: Access views in an included layout via binding.includedLayoutId.viewName, making findViewById as extinct as dinosaurs.
Unified Interface: Inflate included layouts using DataBindingUtil.inflate, ensuring data context consistency.
<layout> Wrapping: Both main and included layouts should be wrapped with a <layout> tag for a data binding bonanza.
ID Bonding: Add an android:id within <include> tag to create a named line of communication with your included layout from your Java/Kotlin activity or fragment.

Potentially treacherous terrains

Passing simple data: Make the most of the app:variable attribute to pass primitive types or little Objectville citizens to an included layout.
Complex Data Models: Your ViewModel should possess enough granularity to sufficiently communicate with included layouts as if they talk in the same programming dialect.
Common Trapdoors: Steer clear of the findViewById pitfall. Stick to binding objects to maintain code readability and reuse.

Initiating the data binding process

Binding Initiation: A data binding session begins with DataBindingUtil.setContentView at the centre of your activity.
Effective inflation: Use DataBindingUtil.inflate to hook up your included layouts properly, akin to skillfully connecting Lego blocks for glorious infrastructural beauty.

Pro-level data binding techniques

Expression Binding: Express yourself, or rather, make your data binding expression express itself to fine-tune views in the included layout.
Custom Binding Adapters: Want more? Binding adapters have got your back to further augment functionality and handle complex logic.
Live Data Fusion: Blend data binding with LiveData miracles to keep UI reacting to data changes like an alert ninja.

Refining UI responsiveness

Data Binding Listeners: Connect UI events like clicks directly to layout via method references to save up on Java/Kotlin coding effort.
Two-way Binding: Upgrade the UI with two-way data binding to produce interactive and responsive form elements.
Animations & Visibility: Dictate view properties like visibility and animations via data binding to present a dynamic and user-engaging interface.