Swipe Cards with SwipeView

SwipeView is a a Tinder style StackSwipeview gesture library. It supports android API 15 and above.

Here is how to use it.

Step 1 – Installation

To Install the library first add jitpack in your project level’s build.gradle:

maven { url 'https://jitpack.io' }

Then the dependency statement in your app level’s build.gradle:

dependencies {
  implementation 'com.github.umutsoysl:SwipeView:1.0'
}

Step 2 – Layout

Add the SwipeView in your layout:

<com.umut.soysal.swipelayoutview.ui.StackImageView
               android:id="@+id/iv_avatar"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:scaleType="centerCrop"
               app:radius="10dp"
               android:src="@drawable/img_avatar_01" />

Step 3 – Code

In your activity or fragment start by initializing your recyclerview as usual:

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setAdapter(...);

then set CardLayoutManager for RecyclerView and CardItemTouchHelperCallback for ItemTouchHelper . In addition , don’t forget set OnSwipeListener for CardItemTouchHelperCallback :

// dataList means dataSource for adapter
CardItemTouchHelperCallback cardCallback = new CardItemTouchHelperCallback(recyclerView.getAdapter(), dataList);
ItemTouchHelper touchHelper = new ItemTouchHelper(cardCallback); CardLayoutManager cardLayoutManager = new CardLayoutManager(recyclerView, touchHelper);
recyclerView.setLayoutManager(cardLayoutManager);
touchHelper.attachToRecyclerView(recyclerView);
cardCallback.setOnSwipedListener(new OnSwipeListener<T>() {

    @Override
    public void onSwiping(RecyclerView.ViewHolder viewHolder, float ratio, int direction) {
        /**
         * will callback when the card are swiping by user
         * viewHolder : thee viewHolder of swiping card
         * ratio : the ratio of swiping , you can add some animation by the ratio
         * direction : CardConfig.SWIPING_LEFT means swiping from left；CardConfig.SWIPING_RIGHT means swiping from right
         *             CardConfig.SWIPING_NONE means not left nor right
         */
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, T t, int direction) {
        /**
         *  will callback when the card swiped from screen by user
         *  you can also clean animation from the itemview of viewHolder in this method
         *  viewHolder : the viewHolder of swiped cards
         *  t : the data of swiped cards from dataList
         *  direction : CardConfig.SWIPED_LEFT means swiped from left；CardConfig.SWIPED_RIGHT means swiped from right
         */
    }

    @Override
    public void onSwipedClear() {
        /**
         *  will callback when all cards swiped clear
         *  you can load more data 
         */
    }

});


### step 3
 java
/*
*Create stack photoview list
*/
 private void initData() {
        list.add(R.drawable.img_avatar_01);
        list.add(R.drawable.img_avatar_02);
        list.add(R.drawable.img_avatar_03);
        list.add(R.drawable.img_avatar_04);
        list.add(R.drawable.img_avatar_05);
        list.add(R.drawable.img_avatar_06);
        list.add(R.drawable.img_avatar_07);

    }

Full Example

Here is a full example of how to use swipe view.

(a). MainActivity

Here is the code for our only class, the main activity.

public class MainActivity extends AppCompatActivity {

    private List<Integer> list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initView() {
        final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(new StackViewAdapter());
        StackItemTouchHelperCallback cardCallback = new StackItemTouchHelperCallback(recyclerView.getAdapter(), list);
        cardCallback.setOnSwipedListener(new OnSwipeListener<Integer>() {

            @Override
            public void onSwiping(RecyclerView.ViewHolder viewHolder, float ratio, int direction) {
                StackViewAdapter.MyViewHolder myHolder = (StackViewAdapter.MyViewHolder) viewHolder;
                viewHolder.itemView.setAlpha(1 - Math.abs(ratio) * 0.2f);
                if (direction == Utility.SWIPING_LEFT) {
                    myHolder.dislikeImageView.setAlpha(Math.abs(ratio));
                } else if (direction == Utility.SWIPING_RIGHT) {
                    myHolder.likeImageView.setAlpha(Math.abs(ratio));
                } else {
                    myHolder.dislikeImageView.setAlpha(0f);
                    myHolder.likeImageView.setAlpha(0f);
                }
            }

            @Override
            public void onSwiped(RecyclerView.ViewHolder viewHolder, Integer o, int direction) {
                StackViewAdapter.MyViewHolder myHolder = (StackViewAdapter.MyViewHolder) viewHolder;
                viewHolder.itemView.setAlpha(1f);
                myHolder.dislikeImageView.setAlpha(0f);
                myHolder.likeImageView.setAlpha(0f);
                Toast.makeText(MainActivity.this, direction == Utility.SWIPED_LEFT ? "dislike" : "like", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onSwipedClear() {
                Toast.makeText(MainActivity.this, "finish data", Toast.LENGTH_SHORT).show();
                recyclerView.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        initData();
                        recyclerView.getAdapter().notifyDataSetChanged();
                    }
                }, 3000L);
            }

        });
        final ItemTouchHelper touchHelper = new ItemTouchHelper(cardCallback);
        final StackLayoutViewManager cardLayoutManager = new StackLayoutViewManager(recyclerView, touchHelper);
        recyclerView.setLayoutManager(cardLayoutManager);
        touchHelper.attachToRecyclerView(recyclerView);
    }

    private void initData() {
        list.add(R.drawable.img_avatar_01);
        list.add(R.drawable.img_avatar_02);
        list.add(R.drawable.img_avatar_03);
        list.add(R.drawable.img_avatar_04);
        list.add(R.drawable.img_avatar_05);
        list.add(R.drawable.img_avatar_06);
        list.add(R.drawable.img_avatar_07);

    }

    private class StackViewAdapter extends RecyclerView.Adapter {
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
            return new MyViewHolder(view);
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            ImageView avatarImageView = ((MyViewHolder) holder).avatarImageView;
            avatarImageView.setImageResource(list.get(position));
        }

        @Override
        public int getItemCount() {
            return list.size();
        }

        class MyViewHolder extends RecyclerView.ViewHolder {

            StackImageView avatarImageView;
            ImageView likeImageView;
            ImageView dislikeImageView;

            MyViewHolder(View itemView) {
                super(itemView);
                avatarImageView = (StackImageView) itemView.findViewById(R.id.iv_avatar);
                likeImageView = (ImageView) itemView.findViewById(R.id.iv_like);
                dislikeImageView = (ImageView) itemView.findViewById(R.id.iv_dislike);
            }

        }
    }

}

Run

If you run the project you get the following: