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.
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>
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" />
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));
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