Today many social networking apps are coming and one of that name Tinder i checked out and found SwipeView. And today i going to show you how you can also add Tinder like SwipeView in Android application.

This is a Android library named Shuffle which is an easy to use swiping-view for Android.

Lets come to implementation of this library:

Usage

Add library to Gradle

Add into your build.gradle

compile 'com.meetic.shuffle:shuffle:(last version)'
compile 'com.meetic.dragueur:dragueur:1.0.3'

Just declare a Shuffle into your layout

<com.meetic.shuffle.Shuffle
      android:id="@+id/shuffle"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      />

Then fill it with an Adapter

Shuffle shuffle = (Shuffle)findViewById(R.id.shuffle);
shuffle.setShuffleAdapter(new Shuffle.Adapter(){
    @Override
    public Shuffle.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {

    }

    @Override
    public void onBindViewHolder(final Shuffle.ViewHolder viewHolder, int position) {

    }

    @Override
    public int getItemCount() {

    }
});

Customization

Free movements

<com.meetic.shuffle.Shuffle
      android:id="@+id/shuffle"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:shuffle_inlineMove="false"
      />

[tmh_article_ads]

Inline movements

<com.meetic.shuffle.Shuffle
      android:id="@+id/shuffle"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:shuffle_inlineMove="true"
      />

Orientation

If you want to set it vertical (by default Suffle is horizontal oriented)

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_orientation="horizontal / vertical"
     />

Rotation

Without rotation

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_rotationEnabled="false"
     />

With rotation

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_rotationEnabled="false"
     app:shuffle_rotation="10"
     />

Restart

To restart the shuffling

shuffle.restartShuffling();

Revert

To undo a card exit

shuffle.revert(duration);

Infinite

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_infinite="true"
     />

Options

You can set the max number of cards displayed and adjust the space between cards

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_numberOfDisplayedCards="4"
     app:shuffle_differenceTranslationY="5dp"
     app:shuffle_differenceTranslationX="1dp"
     />

<com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_numberOfDisplayedCards="4"
     app:shuffle_differenceTranslationY="5dp"
     app:shuffle_differenceTranslationX="1dp"
     />

Listeners

shuffle.addListener(new Shuffle.Listener() {
            @Override
            public void onViewChanged(int position) {

            }

            @Override
            public void onScrollStarted() {

            }

            @Override
            public void onScrollFinished() {

            }

            @Override
            public void onViewExited(DraggableView draggableView, Direction direction) {

            }

            @Override
            public void onViewScrolled(DraggableView draggableView, float percentX, float percent) {

            }
        });

CardDraggableView

<Shuffle
    ...
    //overlay color displayed while scrolling
    app:shuffle_colorRight="@color/blue"
    app:shuffle_colorLeft="@color/blue"

    //overlay content displayed while scrolling (ex: containing logo)
    app:shuffle_layoutLeft="@layout/bal_shuffle_cell_left"
    app:shuffle_layoutRight="@layout/bal_shuffle_cell_right"
    ...
    />

Animations

All Shuffle animations can be overridden

shuffle.setViewAnimator(new ShuffleViewAnimator(){
            //override methods
});

Try ShuffleViewAnimator and `ShuffleViewAnimatorOnSecondCard

ShuffleViewAnimator

You can easily set dismiss animations for ShuffleViewAnimator ( scaleUp / goBackBehind )

shuffle.setViewAnimator(new ShuffleViewAnimator()
            .setPushLeftAnimateViewStackScaleUp(false)
            .setPushRightAnimateViewStackScaleUp(true)
            .setPushTopAnimateViewStackScaleUp(false)
            .setPushBottomAnimateViewStackScaleUp(false)
        );

Enable

shuffle.enable(true / false);

Download

That’s it !! I hope you like this article.