[Question] Avoid redrawing entire carousel but update specific views?

Overall context: I have a PagedListEpoxyController which displays a carousel of filters at the top, and shows the paged list below it.

I attach a listener to my filter models, so that when one is clicked, I set a selectedFilterId on the controller and request a model build. This does work, but the UX isn’t great. It appears when it redraws each item in the carousel, it changes the padding on the ones that are selected/deselected. Gif below.

I’ve been fighting this for a little bit and tinkered with a few ideas, but I’m not sure the best approach. Do you have any suggestions?

Here is some code if that helps:

override fun addModels(models: List<EpoxyModel<*>>) {
    buildFilterCarousel()
    super.addModels(models)
}

// Passed in through databinding, called when a filter is "clicked"
private val filterConsumer: Consumer<Filter?> = Consumer {
    // Setting this field triggers a callback which pulls for the paged list, and when that happens we request a model build.
    selectedFilterId = it?.filterId
}

private fun buildFilterCarousel() {
    val filterModels: List<FilterEpoxyModel> = filters?.map { filter ->
        // ... Get filter ID and selected status

        return@map FilterEpoxyModel()
                // I had to include "selected" as part of the model ID in order for it to actually update when I call `requestModelBuild`.
                .id("Filter: $filterId, selected: $selected")
                .viewModel(viewModel)
                .filterConsumer(filterConsumer)
    }.orEmpty()

    CarouselModel_()
            .numViewsToShowOnScreen(3.0f)
            .hasFixedSize(true)
            .paddingDp(16)
            .id("Filter Carousel")
            .models(filterModels)
            .addTo(this)
}

[elihart]

I’ve updated the wiki pages a bit for clarity 😃

[elihart]

the generated databinding class is much smarter about only rebinding the data that changed, your new manual version always rebinds everything

i would guess that your viewModel(viewModel) attribute you are passing does not properly implement equals and hashcode to represent that the selected state changed, so epoxy doesn’t think it needs to rebind it

the general advice is this - id should not change, any data that can change on the model must be represented by attributes that correctly implement equals and hashcode. Epoxy will rebind only the data that changed when models are rebuilt