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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With