Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create leaning list items

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:

sample

like image 833
osrl Avatar asked Oct 17 '22 19:10

osrl


1 Answers

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. enter image description here

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.

like image 183
Burak Cakir Avatar answered Oct 21 '22 01:10

Burak Cakir