Home » Android » android – Horizontal RecyclerView with starting padding

android – Horizontal RecyclerView with starting padding

Posted by: admin May 14, 2020 Leave a comment

Questions:

So I have an ImageView as a background and on top of it an Horizontal RecyclerView, the thing here is that I want the RecyclerView to start showing its items from half padding of the screen to the left so you can see the background perfectly at the beginning and when you scroll the items you’d be hiding the image/background.

Note: check Play Store to see what I’m trying to accomplish.

enter image description here

So I had this working:

<RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#000052"
 android:orientation="vertical" >

       <ImageView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/trybg5"
        android:layout_gravity="left" />

              <HorizontalScrollView
               android:id="@+id/frag_home_gallery_recent_container"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="horizontal"
               android:layout_gravity="right"
               android:scrollbars="none"
               android:layout_weight="1"
               android:paddingBottom="@dimen/horizontalGallery_content_padding"
               android:paddingTop="@dimen/horizontalGallery_content_padding">


                 <LinearLayout
                  android:id="@+id/frag_home_gallery_recientes"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="horizontal"
                  android:paddingLeft="150dp" />
             </HorizontalScrollView>
    </RelativeLayout>

My point there was to programmatically inflate the layout inside the HorizontalScrollView, and it worked nicely. But with the time, I decided to migrate to RecyclerView and now isn’t working as expected.

The background appears, the Recycler starts half screen to the right, but when scrolling it won’t scroll until the left of the screen, it will just hide wherever the padding was set..

<RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#000052"
 android:orientation="vertical" >

   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@drawable/trybg5"
    android:layout_gravity="left" />

          <FrameLayout
                    android:id="@+id/frag_home_gallery_recent_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="right"
                    android:scrollbars="none"
                    android:layout_weight="1"
                    android:paddingBottom="@dimen/horizontalGallery_content_padding"
                    android:paddingTop="@dimen/horizontalGallery_content_padding">

                    <android.support.v7.widget.RecyclerView
                        android:background="@drawable/gallery_bg"
                        android:id="@+id/frag_home_gallery_recientes"
                        android:scrollbars="none"
                        android:paddingLeft="150dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                </FrameLayout>
          </RelativeLayout>

Any idea of how can I make this effect work in the RecyclerView?

Here’s the detail of the recycler:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:id="@+id/discoContainer"
    android:background="@drawable/gallery_bg"
    android:layout_margin="5dp"
    android:padding="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/containerDisco"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/logoDisco"
                android:transitionName="DiscoId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:contentDescription="LogoDisco"
                android:windowSharedElementsUseOverlay="false" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="a 600m tuyos"
                android:padding="3dp"
                android:layout_gravity="center_horizontal"
                android:maxLines="1"
                android:gravity="center_horizontal"
                android:alpha="500"
                android:background="#46000000"
                android:textColor="@android:color/white"/>
        </RelativeLayout>

        <TextView
            android:id="@+id/logoTexto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Probando"
            android:padding="3dp"
            android:layout_gravity="center_horizontal"
            android:maxLines="1"
            android:gravity="center_horizontal"
            android:layout_alignBottom="@+id/containerDisco" />

    </LinearLayout>


</LinearLayout>
How to&Answers:

Instead of using padding, I usually achieve this sort of effect with an ItemDecoration.

public class PaddingItemDecoration extends RecyclerView.ItemDecoration {
    private final int size;

    public PaddingItemDecoration(int size) {
        this.size = size;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);

        // Apply offset only to first item
        if (parent.getChildAdapterPosition(view) == 0) {
            outRect.left += size;
        }
    }
}

Then when you set up your RecyclerView:

int size = ... // Get the offset that you want
RecyclerView recyclerView = ...

recyclerView.addItemDecoration(new PaddingItemDecoration(size));

Answer:

It’s much simpler than that, RecyclerView already has that feature: just set android:clipToPadding="false" to the RecyclerView XML, so that the padding doesn’t clip off your items.

So for your example:

<android.support.v7.widget.RecyclerView
  android:background="@drawable/gallery_bg"
  android:id="@+id/frag_home_gallery_recientes"
  android:scrollbars="none"
  android:paddingLeft="150dp"
  android:clipToPadding="false"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />