Horizontal list fixed at the top and veritical list at below

Question

I am trying to build a ui where the UX is such that the items having images are going to be shown on top with scrolling horizontally and items that doesn't have images go below it scrolling vertically.

For an idea you can refer this : click here kind of behaviour.

The source api for the data is giving me the json data in which some items have image url and some don't. I am trying to implement it with pagination 3 lib for easy loading.

My way of implementation :

I am having 2 recycler view, one for the top horizontal list view and one for the bottom list view. I am trying to fetch the data from the api through Pager which returns the PagingData

 val secotrs =  Pager(
        config = PagingConfig(
            pageSize = NETWORK_PAGE_SIZE,
            enablePlaceholders = false,
        ),
        pagingSourceFactory = {
            SectorPagingSource(useCase,sectorId)
        },
    ).flow
}

data class SectorList(
    val Name :String = "",
    val date: String ="",
    val title: String ="",
    val source: String ="",
    val description: String ="",
    val imageUrl: String ="",
)

Now when my fragment collects this flow i get the pagingData of SectorDataList

lifecycleScope.launchWhenResumed {
        viewModel.sectors.collect { paging ->
            
            sectorImagesAdaptor.submitData(paging) // for the horizontal recyler view
            sectorNoImageAdaptor.submitData(paging) // for the vertical recylerview

        }
    }

Now you can imagine that this will not work as the sectorImagesAdaptor needs Pagindata of sectorList with image URLs in it and sectorNoImageAdaptor without imagesurl or empty.

How can I filter the data from PagingData with imageUrl having some url and some without and still be able to use paging features of calling apis for next pages.

What i have tried so far :

created two paging data one which has image urls and one without and make them to observe in the ui. As soon as pager gives flow and i collect it i am trying to filter the pagingdata from this and the filter like below but this filters the underline pagigdata receives from pager having only data with no images.
```
         val image = paging.filter {
             it.imageUrl.isNotEmpty()
         }

         val noImage = paging.filter {
             it.imageUrl.isEmpty()
         }
```
Tried to load the data from the database and use RemoteMediator but believe me that does not work too. i can not detail the whole problem here.

Please help me and guide the right direction.

Horizontal list fixed at the top and veritical list at below

0 Answers0