CODEWITHSUNDEEP
androiduser-interfaceandroid-recyclerview
Shubham AgaRwal
Shubham AgaRwal

Reputation: 4823

Android RecyclerView add horizontal gape in beginning and in ending

I am trying to replicate a view from iOS so that user have same look and feel throughout the android application as well.

I am having a RecyclerView with LinearLayoutManager and horizontal orientation. So far so good. 

<android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layoutManager="android.support.v7.widget.LinearLayoutManager"
            tools:listitem="@layout/item_recycler_view" />

With the output design:

Android RecyclerView

However, in case of iOS design we have items starting from center however the horizontal view is completely scrollable (meaning the scrolling can be done to full width even if the item loading from center).

I know there is no use of adding padding/margin or using a different view like HorizontalScrollView. How can we obtain such behaviour so that i give nearly same experience to users.

iOS SCROLL VIEW

Let me know if there is anything that i can provide to clarify the problem statement.

Upvotes: 3

Views: 548

Answers (3)

Mauker
Mauker

Reputation: 11497

Quick solution

Add an empty item on the beginning and one on the end of your list, and make your index access account for those two extra items. That should help you get the desired effect.

Not so quick solution

Android allows us to write our own custom Layout Managers for RecyclerView. It comes with three types that will cover most of the user cases:

  • LinearLayoutManger (For lists in general);
  • GridLayoutManager (For grids);
  • StaggeredGridLayoutManager (For grids with items with custom sizes).

I believe you could write one to always start placing the first item on the center of the screen. That will require more work, but it won't mess with your data indexes.

Read this, and this, on how to create custom Layout Managers. Also, take a look at the docs. That should be a good place to start.

Upvotes: 3

Ben P.
Ben P.

Reputation: 54244

There are two ways you could do this. The simplest by far would be to add horizontal padding to your RecyclerView and set the view to not clip based on padding. Something like this:

android:paddingLeft="100dp"
android:paddingRight="100dp"
android:clipToPadding="false"

The other way would be to create an ItemDecoration and add it to your RecyclerView. You could then override the getItemOffsets() method to add a left-hand offset to your first item and a right-hand offset to your last item.

This second approach is better because it won't affect the RecyclerView's scrollbars, but it is a little more complex. Here's an example to get you started:

private static class MyItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int parentWidth = parent.getWidth();
        int childWidth = view.getWidth();
        int margin = (parentWidth - childWidth) / 2;

        int position = parent.getChildAdapterPosition(view);

        outRect.left = position == 0 ? margin : 0;
        outRect.right = position == (parent.getAdapter().getItemCount() - 1) ? margin : 0;
    }
}

Upvotes: 1

Sangeet Suresh
Sangeet Suresh

Reputation: 2545

I think the only way will be adding different layout for first and last position in adapter of recyclerview.

It can be done using viewType parameter in createViewHolder(ViewGroup parent, int viewType)

Upvotes: 0

Related Questions