Search code examples
androidlistviewdivider

Curved ListView divider

I am trying to create a listview of photos. Problem is that I want my listview row to have curved divider.

I've tried getting custom imageview shape, but that wasn't working well because the divider was a straight line, and there was lots of white space.

Secondly i've tried to get divider as a .png but that also gave me nothing but lots of white space. So how could I achieve something like this (Yellow line is divider):

enter image description here

Solution

  • I have a simple idea:
    Made a couple of "semy wavy" PNGs with transparent areas.
    The 2 will be the upper and lower half (the curvature has to be small enough and the stroke wide enough to cut the wave in 2 halves longitudinally).

    You'll end up with two rectangles (say a "header" and a footer).
    When two rows are displayed, the top part of the second completes the curve of the first one.

    Something like so:

    enter image description here (upper part)

    Your ImageView

    enter image description here (lower part)

    This is when 2 rows meet:

    enter image description here

    The black part represents the second row ImageView.

    Well, maybe it's not as curvy as you would desire, but no even such a bad result, in my opinion.
    It gives you the idea.

    You can do a better artist work, if you make it more "metallic" using gradients.

    [EDIT]

    You might argue that the very first row and the last one would have a "cut" top and bottom, respectively.
    Right observation.

    But I just had an idea on how to "round" them too.

    You can add a headerView with the bottom part and a footerView with the top part, and this closes the loop(s).

    While these headers scroll with the rows... les jeux sont fait!