Horizontal RecyclerView with starter add-on

Question

So, I have an ImageView as the background, and on top of it is the Horizontal RecyclerView, this is what I want the RecyclerView to start showing its elements from half the screen to the left so that you can see the background perfectly at the beginning and while scrolling the elements you hide image / background.

Note. Check out the Play Store to see what I'm trying to accomplish.

So I had this:

<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 was to programmatically inflate the layout inside the HorizontalScrollView, and it worked beautifully. But over time, I decided to switch to RecyclerView and now it does not work as expected.

A background appears, Recycler starts half the screen to the right, but when scrolling, it will not scroll to the left edge of the screen, it just hides the place where the add-on was added.

 <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 how I can make this effect work in RecyclerView?

Here is the recycler detail:

 <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> 

Answer 1

Instead of using add-ons, I usually achieve this effect with 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 RecyclerView :

 int size = ... // Get the offset that you want RecyclerView recyclerView = ... recyclerView.addItemDecoration(new PaddingItemDecoration(size)); 

Answer 2

This is much simpler than RecyclerView already has this feature: just set android:clipToPadding="false" in the XML RecyclerView so that the indents do not crop your elements.

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" />