ViewBinding reports "missing view with id "error when trying to bind a custom view

Question

I have a custom view. In onFinishInflate() I bind the view.

class CreatePlaylistButton(context: Context, attributeSet: AttributeSet) :
ViewGroup(context, attributeSet) {

private lateinit var binding: ButtonCreatePlaylistBinding
.....
......
override fun onFinishInflate() {
    super.onFinishInflate()
    binding = ButtonCreatePlaylistBinding.bind(this)
}

The layout is simple. See snippet below

<com.tendai.musicx.ui.discover.customviews.CreatePlaylistButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackground"
android:clickable="true"
android:focusable="true">

<TextView
    android:id="@+id/textview_create_playlist"
    style="@style/TextAppearance.AppCompat.Caption"
    .....
    ...
    android:clickable="false"
    />

<ImageView
    android:id="@+id/imageViewCreatePlaylist"
    ......
    .....
    android:src="@drawable/ic_add" />
</com.tendai.musicx.ui.discover.customviews.CreatePlaylistButton>

I use the custom view in a fragment's layout like so:

<androidx.constraintlayout.widget.ConstraintLayout />
.....
....
   <com.tendai.musicx.ui.discover.customviews.CreatePlaylistButton
    android:id="@+id/button_create_playlist"
   ........
/>

When I try to run the app I get the error Missing required view with ID: packageName/imageViewCreatePlaylist but the ImageView is there? What I am missing?

Answer 1

Your layout in first file has ImageView with the id nested in CreatePlaylistButton.

In fragment layout you're just using plain CreatePlaylistButton which is essentially a ViewGroup without any children, so the view is not there - hence the error.

To get what you're trying to do, you need to replace CreatePlaylistButton in first layout with e.g. LinearLayout and then inflate it inside the CreatePlaylistButton class.