Adding Headers (Create Sections)

[eshkoliGilad]

First of all, amazing work, seriously.

My question is how to add headers and divide the images to sections ?

I need to sort the images by date and then show them section after section.

If this is not a feature that should be written at all, do you have any idea on how to solve this ? I trully need this kind of thing. If I'll add a photo that will take the entire screen width, will it work ?

Edit: I must use the same RecyclerView for them all for Drag and Select for deletion (I Use DragSelectRecyclerView) so I can't have more RecyclerViews like I wanted.

[fennifith]

You can't really add an option for sections to this library as it is only a layout manager, not an adapter. You could make two separate ViewHolders (one for the header, the other for the items) and manage the difference in item positions yourself, or you could use this awesome library. ;)

[eshkoliGilad]

But then again, the LayoutManager should handle the different cases of laying out the different itemTypes, isn't it ?

I only need to know how to handle case where I want to put an item in a single row, like a header, and put the rest of images below them in a new row and so on. Where does it written in code so I could modify it myself.

BTW, this library uses spanCount so it is utilizing the LayoutManager (Which is GridLayoutManager or LinearLayoutManager), which has same size for items.

@TheAndroidMaster

[eshkoliGilad]

Anyone here care to help on this issue ?

I don't mind doing it myself of course, but I would love for some direction.

[fennifith]

But then again, the LayoutManager should handle the different cases of laying out the different itemTypes, isn't it ?

All that the LayoutManager does is configure the position of the items on the screen and (I think) call onBindViewHolder() when one is made visible.

You shouldn't need to write your own layout manager for what you want to do here, you can just use an adapter with an overriden getItemViewType(int) and change the span count by either changing the width to MATCH_PARENT in the onBindViewHolder(ViewHolder, int) with a StaggeredGridLayoutManager or using .setSpanSizeLookup(GridLayoutManager.SpanSizeLookup) on a GridLayoutManager, which is the same as what the library does. Everything you want to do should be achievable this way, and I don't think there is any alternative to a "header item" in a RecyclerView.

[fennifith]

On second thought, if you have a fixed amount of sections it might be better to put the headers inbetween RecyclerViews in a NestedScrollView, since the new version of the support library lets RecyclerViews wrap their content.

[eshkoliGilad]

But then again, this library isn't utilize GridLayoutManager or StaggeredGridLayoutManager, it has its own GreedoLayoutManager that is arranging items in RecyclerView so how can I use the getItemViewType() correctly without spanning like in GridLayoutManager or StaggeredGridLayoutManager ? Even if I try to put an image that is MATCH_PARENT it does not take any factor.

I need to distinguish between 'real' image and an item that takes the whole screen width in single row. I don't mind inserting a 'photo' header item but it is always not taking the entire row.

As for the nested RecyclerViews, it won't be a good solution because I need to use drag-select acroos all items, and in nested recyclerview it will be always per recyclerview and not all of them.

Any other idea on how to achieve a single item in a row with this library ? Thanks !

[fennifith]

Oh I see the problem now, sorry about that :P I haven't looked through the source of this library that much but you should just be able to modify the layout manager to set it's width to match_parent based on the view type, which shouldn't be that hard since you already need to pass the adapter to it so it can get the ratio of the view. I'll take a look at ways to do this when I get on my laptop and can type properly.

[eshkoliGilad]

Oh thank you very much !

If you will work this out for me, I would really appreciate it :+1:

[eshkoliGilad]

Hi, @TheAndroidMaster

Did you manage to get a solution for this ? It's a bit urgent for me.

Trying to set the view's width to match parent based on viewType didn't help much either, it still not a single item in a single row.

[alashow]

@eshkoliGilad How about returning big aspect ratio for needed positions?

Didn't test, but in my app i have recyclerView (with greedoLM) with images as items, and some wide images with smaller heights (1200x430, aspectRatio ≈ 2.79) have full width.

Example screenshot:

[eshkoliGilad]

I'll try that, thanks.

[JVillella]

Hey guys, nice discussion. Wanted to add a few words.

In #14 I've implemented header support which is something we needed internally. Adding section support is probably pushing it in terms of what this library was meant to be though. Feel free to fork and add the functionality. #14 is a start that can point you in the right direction. A LayoutManager can query the view type of the item to perform conditional layout. To do what you want may also require retrofitting the GreedoLayoutSizeCalculator to support having section header item sizing. Let's take a step back though.

WRAP_CONTENT for the layout height on the RecyclerView like @TheAndroidMaster initially suggested will not work as this is new functionality (added in support libs 23.2.0) that the layout managers must implement. Greedo doesn't as of now. LinearLayoutManager is one of the few that do.

I don't know the scope of your project, but what @alashow suggested, though a hack, may suffice. Just make sure to return the correct aspect ratio to get a fixed height across all the different device widths.

The idea would look something like this:

// There are in px
int sectionHeight = 200;
int sectionWidth = deviceWidth;

// ...

@Override
public double aspectRatioForIndex(int index) {

    // ...

    if (isSection) return sectionWidth / (double) sectionHeight;

    // ...
}

Hope that helps!

[eshkoliGilad]

Thanks @JVillella.

I've tried it and it does work only for the first item in the list if it is a header, meaning it will take the whole row with a single item, but it does not work if ,lets say, I've a header item in position 3 or 4 when there is already an item in a row before it in the current row, it will just take the rest of the line but also with the item before his position, meaning it will not break into a new line.

I need something like that, just for reference:

Currently I'm using multiple FlowLayout for assigning the photos one next to the other, but wanted RecyclerView support so this library should be great for my needs.

I also need to use this functionality: https://github.com/afollestad/drag-select-recyclerview in order to drag and select photos for deletion so I do need only one RecyclerView, o/w I'd just could have build many RecyclerViews needed.

Any idea how to 'force' the RecyclerView to break a new line before an item with the RecyclerView's width is laying out ?

[eshkoliGilad]

@JVillella

Sorry for the repeating nagging but it is quite urgent for me. Thanks a lot.