-1

How to make such like horizontal recycle view with nice UI animation. Note: I can make horizontal recyclerview. but how can it start from middle and when scroll it comes in start? and secondly background image will be visible or invisible animatedly according scrolling.

enter image description here

I want to make such like I already try ItemDecoration but when it load fast time start from left after if start from center any help.

enter image description here

Maddy
  • 4,525
  • 4
  • 33
  • 53
t.gakk
  • 77
  • 2
  • 10
  • can u tried for this ? – Ali Feb 12 '18 at 12:00
  • u can scroll to middle position of recyclerview on start of the activity `recyclerView.scrollToPosition(middle)` .. and do some animation at the background.. at onScroll of recyclerView – Santanu Sur Feb 12 '18 at 12:02
  • 1
    take a viewpager with Carousel layout. http://www.devexchanges.info/2016/06/carousel-layout-with-viewpager-in.html change the ratio of the pages as you need – Vidhi Dave Feb 12 '18 at 12:04
  • H, did you check Iflex apps inside home there is a view as like my view and i want exactly that . https://play.google.com/store/apps/details?id=iflix.play&hl=en – t.gakk Feb 13 '18 at 09:10

5 Answers5

1

Set padding left on Recyclerview as below code to start your recyclerView row as per padding left :

enter image description here enter image description here

your Xml code should be like this :

<LinearLayout
           android:layout_marginTop="8dp"
           android:background="@drawable/banner2"
           android:layout_width="match_parent"
           android:layout_height="240dp">



           <android.support.v7.widget.RecyclerView
               android:paddingLeft="180dp"
               android:layout_marginTop="17dp"
               android:id="@+id/recycler_kids"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:clipToPadding="false"
               app:layout_behavior="@string/appbar_scrolling_view_behavior" />


       </LinearLayout>

Look into this for detect hiding row on recyclerview to show background image Hiding views in RecyclerView

Abhishek kumar
  • 4,347
  • 8
  • 29
  • 44
  • Thanks For your replay. If i use paddingLeft how to remove padding left when recycleview swipe left. I want to make such like. https://i.stack.imgur.com/HsATz.gif – t.gakk Feb 14 '18 at 04:10
  • I updated my code please check @t.gakk and reply, its workable code – Abhishek kumar Feb 14 '18 at 07:12
1

Linearlayout manager with horizontal orientation and PagerSnapHelper() will be helpful to achieve this. Following code from pagersnap will provide better illustration.

RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(context, 
LinearLayoutManager.HORIZONTAL, false);
SnapHelper snapHelper = new PagerSnapHelper();
recyclerView.setLayoutManager(layoutManager);
snapHelper.attachToRecyclerView(mRecyclerView);
Irfan Ul Haq
  • 1,065
  • 1
  • 11
  • 19
0

To Start horizontal RecyclerView with a starting empty space Use:

recyclerView.addItemDecoration(new HorizontalSpaceItemDecoration(700));

and define Class: HorizontalSpaceItemDecoration(); as 

public class HorizontalSpaceItemDecoration extends RecyclerView.ItemDecoration {

    private final int mHorizontalSpaceWidth;

    public HorizontalSpaceItemDecoration(int mHorizontalSpaceWidth) {
        this.mHorizontalSpaceWidth = mHorizontalSpaceWidth;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                               RecyclerView.State state) {
        if (parent.getChildAdapterPosition(view) == 0) {
            outRect.left = mHorizontalSpaceWidth;
        }
    }
Alien
  • 15,141
  • 6
  • 37
  • 57
Ashish Aggarwal
  • 1
  • 1
  • 1
0

my solution is to add blank item at first.

    @Override
    public int getItemViewType(int position) {
        if (position==0){
            return 1;
        }else {
            return super.getItemViewType(position);
        }
    }

you need to create blank item in xml for that

Mohammad Zahid Khan
  • 23
  • 7
0

You can use this in your adapter :

if (position == 0) {
    holder.card_zero.setVisibility(View.VISIBLE);
    holder.card_info.setVisibility(View.GONE);
    holder.card_pic.setVisibility(View.GONE);
} else {
    holder.card_zero.setVisibility(View.GONE);
    holder.card_info.setVisibility(View.VISIBLE);
    holder.card_pic.setVisibility(View.VISIBLE);
Zheng Qu
  • 781
  • 6
  • 22
mahmoud
  • 1