DOCSEARCHbyAlgolia
Submit Docs

Shuffle Android Library

repository·master·Indexed 21 days ago

https://github.com/meetic/shuffle

An Android swiping-view library for creating card-stack interfaces. It features customizable movements, orientations, and animations, supporting both horizontal and vertical layouts, infinite looping, and programmatic control via Shuffle.Adapter and Shuffle.Listener.

Tokens
1.6K
Snippets
6
Records
6
Agent score
25%

What's inside Shuffle

  1. Implement the Shuffle view and Adapter

    master

    To use Shuffle, declare the com.meetic.shuffle.Shuffle view in your XML layout and then provide a Shuffle.Adapter in your Java code to manage the cards.

    XML Layout:

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

    Java Implementation:

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

    @Override
    public void onBindViewHolder(final Shuffle.ViewHolder viewHolder, int position) {
        // Bind data to the ViewHolder
    }

    @Override
    public int getItemCount() {
        // Return total number of items
    }
});
    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() {
        return 0;
    }
});

  2. Install Shuffle in your Android project

    master

    Add the following dependencies to your build.gradle file to include Shuffle and its required dependency, Dragueur.

    Note: Replace (last version) with the latest available version of Shuffle.

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

  3. Configure Rotation and CardDraggableView overlays

    master

    Shuffle supports card rotation and visual overlays during scrolling.

    Rotation:

    • Enable/disable rotation with app:shuffle_rotationEnabled.
    • Set the rotation angle with app:shuffle_rotation.

    Overlays (CardDraggableView): When a user drags a card, you can display specific colors or layouts on the sides:

    • app:shuffle_colorRight / app:shuffle_colorLeft: Color overlay displayed while scrolling.
    • app:shuffle_layoutRight / app:shuffle_layoutLeft: Custom layout (e.g., containing a logo) displayed while scrolling.
    <com.meetic.shuffle.Shuffle
    ...
    app:shuffle_rotationEnabled="true"
    app:shuffle_rotation="10"
    app:shuffle_colorRight="@color/blue"
    app:shuffle_colorLeft="@color/blue"
    app:shuffle_layoutLeft="@layout/bal_shuffle_cell_left"
    app:shuffle_layoutRight="@layout/bal_shuffle_cell_right"
    />

  4. Configure Shuffle movement and orientation via XML

    master

    You can customize how cards move and their orientation using XML attributes:

    • Movement Type: Use app:shuffle_inlineMove to toggle between free movements (false) and inline movements (true).
    • Orientation: Set app:shuffle_orientation to either horizontal (default) or vertical.
    • Infinite Loop: Set app:shuffle_infinite="true" to enable infinite shuffling.
    • Card Spacing: Use app:shuffle_numberOfDisplayedCards to set the max cards visible and app:shuffle_differenceTranslationX / app:shuffle_differenceTranslationY to adjust spacing between cards.
    <com.meetic.shuffle.Shuffle
     android:id="@+id/shuffle"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:shuffle_inlineMove="true"
     app:shuffle_orientation="vertical"
     app:shuffle_infinite="true"
     app:shuffle_numberOfDisplayedCards="4"
     app:shuffle_differenceTranslationY="5dp"
     app:shuffle_differenceTranslationX="1dp"
     />

  5. Control Shuffle programmatically

    master

    Use these methods to control the Shuffle instance at runtime:

    • shuffle.restartShuffling(): Restarts the shuffling process.
    • shuffle.revert(duration): Undoes a card exit animation using the specified duration.
    • shuffle.enable(boolean): Enables or disables the Shuffle view.

    Listeners: Register a Shuffle.Listener to respond to view changes, scrolling, and exits:

    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) {}
});
    shuffle.restartShuffling();
shuffle.revert(300);
shuffle.enable(true);

  6. Customize animations with ShuffleViewAnimator

    master

    You can override default animations by providing a ShuffleViewAnimator. You can specifically control whether the view stack scales up when pushing cards in different directions (Left, Right, Top, Bottom).

    Try ShuffleViewAnimator or ShuffleViewAnimatorOnSecondCard for different behaviors.

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