View Binding - How do I get a binding for included layouts?

Question

While working with view binding, I came across a couple of undocumented cases.

First: How do I get binding for included view layout parts? The main binding only sees items defined in the main layout.

Second: How do I get binding for merged layout parts. Again, the main binding only sees items in the main layout?

Answer 1

In case of:

1. Include with generic layout (not merge node), we need to assign ID to included part, this way in binding we will have access to included sub part

<include
    android:id="@+id/your_id"
    layout="@layout/some_layout" />

This way in your activity code:

private lateinit var exampleBinding: ActivityExampleBinding  //activity_example.xml layout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    exampleBinding = ActivityExampleBinding.inflate(layoutInflater)
    setContentView(exampleBinding.root)
    //we will be able to access included layouts view like this
    val includedView: View = exampleBinding.yourId.idOfIncludedView
//[...]
}

2. Include with merge block in external layout. We can't add ID to it because merge block is not a view. Let's say we have such eternal merge layout (merge_layout.xm):

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="@layout/activity_example">

    <TextView
        android:id="@+id/some_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />
</merge>

To properly bind such merge layout we need to:

In your activity code:

private lateinit var exampleBinding: ActivityExampleBinding  //activity_example.xml layout
private lateinit var mergeBinding: MergeLayoutBinding  //merge_layout.xml layout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    exampleBinding = ActivityExampleBinding.inflate(layoutInflater)
    //we need to bind the root layout with our binder for external layout
    mergeBinding = MergeLayoutBinding.bind(exampleBinding.root)
    setContentView(exampleBinding.root)
    //we will be able to access included in merge layout views like this
    val mergedView: View = mergeBinding.someView
//[...]
}

Answer 2

Regarding your first question, you can get a view binding for the included layout.

Here is a sample main_fragment.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

</LinearLayout>

And MainFragment.java can be like this:

public class MainFragment extends Fragment {

    private MainFragmentBinding binding;
    private ToolbarBinding toolbarBinding;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

        binding = MainFragmentBinding.inflate(inflater, container, false);
        toolbarBinding = binding.toolbar;

        return binding.getRoot();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();

        toolbarBinding = null;
        binding = null;
    }
}

Now you have two bindings: One corresponds to the main layout and the other corresponds to the included layout.

Answer 3

If you want to bind included layout then,

For Activity

YourMainLayoutBinding mainLayoutBinding = MainLayoutBinding.inflate(getLayoutInflater);

View view = mainLayoutBinding.getRoot();

YourIncludedLayoutBinding includedLayoutBinding = YourIncludedLayoutBinding.bind(View);

For Fragment

YourMainLayoutBinding mainLayoutBinding = MainLayoutBinding.inflate(inflater,container,false);

View view = mainLayoutBinding.getRoot();

YourIncludedLayoutBinding includedLayoutBinding = YourIncludedLayoutBinding.bind(View);

Make Sure if your main layout binding parent root is LinearLayout then, includedLayoutBinding parent layout also be a linear layout

Answer 4

Suppose I included a layout in my activity_main.xml file as follows:

<include
    android:id="@+id/ll_layout1"
    layout="@layout/layout1"
    android:visibility="gone" />

And suppose I wanted to change its visibility. I can do so as follows:

activityMainBinding.llLayout1.root.visibility = View.VISIBLE

Answer 5

In my case, I forgot to assign id to the include tag

Now, when you've assigned the id, you'll be able to get the binding object as,

YourMainLayoutBinding.YourIncludeTagIDLayoutBinding

Answer 6

Follow steps:-

1. private val binding : FragmentBinding by viewBinding(FragmentBinding::bind)

2. make sure to do the following in "onViewCreated(view: View, savedInstanceState: Bundle?)"

    val binding2 = binding.root.include_layout_id
   

e.g. val binding2 = binding.root.tool_bar_layout

Now access your include layout, views here. e.g.

binding2.textView.text = "your text"

Answer 7

Answering your first question in reference to a fragment, suppose you've included an "error_layout" in your MainFragment's xml file.

<include
    layout="@layout/error_layout"
    android:id="@+id/layout_error"
    android:visibility="gone"/>

Now in "error_layout" you have a button with the id : "btn_try_again". You want to set an on click listener to this button.

This is how you can get reference to "btn_try_again" using binding object for your fragment_main.xml file,

binding.layoutError.btnTryAgain

Answer 8

Using the data binding library. Then wrap your XML layout with <layout> tag

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ... 

    <include 
      android:id="@+id/toolbar"
      layout="@layout/toolbar" />
    
    ...

</LinearLayout>
</layout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView 
        android:id="@+id/ivImage"
        ... />

    <TextView 
        android:id="@+id/tvTitle"
        ... />


</LinearLayout>

MainActivity.kt

private lateinit var binding: ActivityMainBinding  

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

    // Access include layout views
    binding.toolbar.rootView.ivImage.setImageResource(R.drawable.ic_back_arrow)
    binding.toolbar.rootView.tvTitle.text = getString(R.string.home)
   
    ...
}

Answer 9

In the include layout you must create a Container layout and put here the id.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>