6

How would you implement a list like the example below, where the boundary line between items in a RecyclerView are at an angle.

My plan right now is to take the top-most triangular portion of each item and render that into the item above, so visually the items look like the boundaries are slanted, but in reality they remain horizontal. The item can then handle item selection based on where the click is within the item. But is there a better way?

EDIT: On consideration I realise I have no idea how to crop an image to a triangle, so any pointers for that would be super helpful too.

List with slanted item boundaries

Ollie C
  • 28,313
  • 34
  • 134
  • 217
  • Can you use an approach with 3 different ViewHolders? Top, Content, Bottom? – apelsoczi Jul 06 '16 at 13:37
  • You could try using a negative `marginTop` for each item except the first, and then each item would need an `onTouchListener` (or built in touch event ahndling code) to check if the touch is inside the slanted space belonging to the item and not another one. – Karakuri Jul 06 '16 at 13:53
  • My reaction would be to set a negative margin on each list item so they overlap: http://stackoverflow.com/questions/35207559/overlap-positions-views-in-recyclerview and then cropping the background images at an angle (couldn't find a link on how to do this unfortunately). However, I don't know if clicks on the overlapped sections would work elegantly or not. – Dr. Nitpick Jul 06 '16 at 13:55
  • @apelsoczi I'm not sure how that helps? Even within one holder I can handle clicks depending on the view within the item. – Ollie C Jul 06 '16 at 15:09
  • This applied before your edit. The negative margin would be more performant. – apelsoczi Jul 06 '16 at 16:21
  • Where are you getting the images from? Some initial finds that could be helpful are -> Using a bitmap mask: http://stackoverflow.com/questions/22892754/crop-an-image-drawable-to-a-triangle, Rotating bitmap: http://stackoverflow.com/questions/6571509/how-to-crop-and-rotate-image-programmatically-in-android Cropping Bitmap: http://stackoverflow.com/a/18232189/6526330. – Dr. Nitpick Jul 07 '16 at 04:12
  • Applying a negative margin to the layout used in each item fails to work as the item is just cropped to the RecyclerView item bounds. Adding an ItemDecorator to have list items overlap works in some respects, but overall fails to do the job as the lower list item is rendered on top of the upper one, when the reverse behaviour is required. This library was however helpful to do the cropping https://github.com/siyamed/android-shape-imageview I'm stumped. – Ollie C Jul 11 '16 at 12:44

0 Answers0