How to create leaning list items

Question

I have a horizontal RecyclerView which looks like this (obviously)

-------------------------------
|     |     |     |     |     |
|  1  |  2  |  3  |  4  |  5  |
|     |     |     |     |     |
-------------------------------

I want to do this:

------------------------------
|      /     /     /     /    |
|  1  /  2  /  3  /  4  /  5  |
|    /     /     /     /      |
-------------------------------

What is the best way to create a RecyclerView like this?

Note: I'm not trying to create a leaning divider. I am trying to create a leaning layout. By leaning I mean masked not rotated. Items should have a match_parent ImageView and a TextView. Both should look straight, not rotated. Also pay attention to the first and last item please.

Here is a sample:

It's unclear what you're asking. Please clarify more or provide an image of what you're trying to do. — C0D3LIC1OU5, Jan 11 '17 at 19:04

score 3 · Accepted Answer · answered Jan 12 '17 at 21:00

I suggest you to use Squint

Create an layout xml with the below code. This layout file renders a single row in recycler view by displaying image and text.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:squint="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical" 
                android:layout_marginLeft="-25dp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">

    <com.intrusoft.squint.DiagonalView
        android:id="@+id/diagonalView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="centerCrop"
        squint:angle="10"
        squint:diagonalDirection="bottom_to_top"
        squint:gravity="right"/>

    <TextView
        android:background="#80000000"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:gravity="center"
        android:textColor="#FFF"
        android:id="@+id/txtName"
        android:layout_alignBottom="@+id/diagonalView"
        android:layout_alignLeft="@+id/diagonalView"
        android:layout_alignStart="@+id/diagonalView"/>

</RelativeLayout>

After writing custom adapter, you should prepare the RecyclerView as follows.

 LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); // make it horizontal

 recyclerView.setLayoutManager(layoutManager);

After applying these operations successfully, I got an image like this.

This solution may not be the perfect solution. There are some defective spots such as android:layout_marginLeft="-25dp". At least it can give you an idea.

Yes that's not the perfect solution but you gave me the idea. You deserved the bounty. eyvallah ;) — osrl, Jan 13 '17 at 06:45
I had some problems with negative margins. So I used an `ItemDecoration` to overlap items. Maybe you should edit your answer. http://stackoverflow.com/a/29067942/1120126 I also used (and edited) this library https://github.com/florent37/DiagonalLayout/ because I was already using a custom ImageView. — osrl, Jan 13 '17 at 13:26
Negative margin is not a healthy solution. I'm glad you found the right answer. — Burak Cakir, Jan 13 '17 at 15:30

score 0 · Answer 2 · answered Jan 09 '17 at 15:27

0

I don't know the exact answer for your problem but i would recommend to create your own DividerItemDecoration.

For more info check this: https://developer.android.com/reference/android/support/v7/widget/DividerItemDecoration.html

answered Jan 09 '17 at 15:27

beeb

1,615
1
12
24

1

`DividerItemDecoration` is specifically for dividers only. I think you meant `ItemDecoration` https://developer.android.com/reference/android/support/v7/widget/RecyclerView.ItemDecoration.html – Pztar Jan 09 '17 at 15:32
I'm not trying to create a leaning divider. I am trying to create a leaning layout. By leaning I mean masked. – osrl Jan 10 '17 at 07:28
@osrl so do not use `DividerItemDecoration` but `ItemDecoration` as Pztar said – pskink Jan 10 '17 at 09:32
How this is gonna mask the items? – osrl Jan 10 '17 at 10:23
it will not mask, it will re-position them so they overlap each other, the masking has to be done in a custom item view – pskink Jan 10 '17 at 10:25

C0D3LIC1OU5 · Answer 3 · 2017-01-11T23:26:40.117

0

Looks like you can't really do a RecyclerView, since those views can't overlap. At this point, you may want to consider extending a horizontal ScrollView, and stitch your images and other elements into one long view that you scroll by overriding the onDraw method. You can handle click events in the onTouch method override. This looks like a pretty big project thought, especially if you have a lot of images and have to manage memory.

edited Jan 11 '17 at 23:26

answered Jan 11 '17 at 16:53

C0D3LIC1OU5

8,600
2
37
47

Dividing line should include items' imageViews. Also this way line cannot be clicked. – osrl Jan 11 '17 at 17:37

How to create leaning list items

3 Answers3

Linked