Swipe To Choose Android

Question

I want to make view like below image... swipe to choose in ANDROID.

i found one library on github:

https://github.com/kikoso/Swipeable-Cards

http://grishma102.blogspot.in/2014/04/tinder-app-like-control-with-animation.html

but in this lib there no option to show image LIKED or NOPE over CARD, just like showing in above image

can any one help me how to add these future in this library.

---

EDITED 10-10-2014

---

I have create view group class inside that i have made onTouchListener

i am trying to get on onClickListener inside onTouchListener

my issue is when i am touch on to left and right corner before click event some time its rotate view then click is work, so how i stop it when click is work another issue is when animation stop its also fire click event

any one help me to improve below code?

this.imageContainerLayout.setOnTouchListener(new OnTouchListener() {

            private long startClickTime;
            private float x1;
            private float y1;
            private float x2;
            private float y2;
            private float _dx;
            private float _dy;

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                x_cord = (int) event.getRawX();
                y_cord = (int) event.getRawY();

                Log.e("start x_cord-->" + x_cord, "y_cord--->" + y_cord);

                boolean defaultResult = v.onTouchEvent(event);

                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    x = (int) event.getRawX();
                    y = (int) event.getRawY();

                    this.startClickTime = Calendar.getInstance()
                            .getTimeInMillis();

                    x1 = event.getRawX();
                    y1 = event.getRawY();

                    return true;
                case MotionEvent.ACTION_MOVE:
                    x_cord = (int) event.getRawX(); // Updated for more
                                                    // smoother animation.
                    y_cord = (int) event.getRawY();

                    Log.e("move x_cord-->" + x_cord, "y_cord--->" + y_cord);

                    CardView_new.this.setX(event.getRawX() - x);
                    CardView_new.this.setY(event.getRawY() - y);

                    if (x_cord >= screenCenter) {

                        /**
                         * rotate image 
                         * */


                            CardView_new.this
                                    .setRotation((float) (0.02454369260617026D * (x_cord - screenCenter)));

                        if (x_cord > (screenCenter + (screenCenter / 2))) {
                            buttonLike.setAlpha(1);
                            buttonDislike.setAlpha(0);
                            if (x_cord > (windowwidth - (screenCenter / 4))) {
                                Likes = 2;
                                moveIs = true;
                            } else {
                                Likes = 0;
                                moveIs = true;
                            }

                        } else {
                            Likes = 0;
                            buttonLike.setAlpha(0);
                            moveIs = false;
                        }
                        buttonDislike.setAlpha(0);
                    } else {
                        // rotate
                        /**
                         * rotate image 
                         * */


                            CardView_new.this
                                    .setRotation((float) (0.02454369260617026D * (x_cord - screenCenter)));


                        if (x_cord < (screenCenter / 2)) {
                            buttonDislike.setAlpha(1);
                            buttonLike.setAlpha(0);
                            if (x_cord < (screenCenter / 4)) {
                                Likes = 1;
                                moveIs = true;
                            } else {
                                Likes = 0;
                                moveIs = true;
                            }

                        } else {
                            Likes = 0;
                            buttonDislike.setAlpha(0);
                            moveIs = false;
                        }
                        buttonLike.setAlpha(0);
                    }

                    return true;
                case MotionEvent.ACTION_UP:
                    x_cord = (int) event.getRawX();
                    y_cord = (int) event.getRawY();

                    buttonDislike.setAlpha(0);
                    buttonLike.setAlpha(0);

                    x2 = event.getRawX();
                    y2 = event.getRawY();

                    _dx = x2 - x1;
                    _dy = y2 - y1;

                    long l = Calendar.getInstance().getTimeInMillis()
                            - this.startClickTime;
                    if ((l < 400L)
                            && distance(x1, y1, x2, y2) < MAX_CLICK_DISTANCE) {

                        Log.e("start Activity", "start activity");

                        CardView_new.this.setX(0);
                        CardView_new.this.setY(0);
                        CardView_new.this.setRotation(0);

                        if (moveIs == false) {
                            Intent i = new Intent((Activity) getContext(),
                                    DetailsActivity.class);

                            ((Activity) getContext()).startActivity(i);
                        }

                        return true;
                    } else if (Likes == 0) {
                        CardView_new.this.setX(0);
                        CardView_new.this.setY(0);
                        CardView_new.this.setRotation(0);
                        if (moveIs) {
                            moveIs = true;
                            return true;
                        } else {
                            moveIs = false;
                            return false;
                        }
                    } else if (Likes == 1) {
                        parentView.removeView(CardView_new.this);
                        CardView_new.this.mOnCardDimissedDelegate
                                .onLike(CardView_new.this);
                        Log.e("Likes==1", "Likes==1");
                        moveIs = true;
                        return true;
                    } else if (Likes == 2) {
                        parentView.removeView(CardView_new.this);

                        CardView_new.this.mOnCardDimissedDelegate
                                .onDislike(CardView_new.this);
                        Log.e("Likes==2", "Likes==2");
                        moveIs = true;
                        return true;
                    }

                default:
                    return false;
                }
            }
        }); 

Answer 1

I have used this library: https://github.com/kikoso/Swipeable-Cards

You need to modify it. After modification's, you will achieve it (See Screenshots below). Let me Explain.

1.) std_card_inner.xml

This xml is used to inflate the card row in the adapter class of the library. I have modified it to add two imageviews containing the like and dislike button and a textview to show the text "like" or "dislike" when user clicks any imageview.

<RelativeLayout
    android:id="@+id/inner_relative"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/title"
        style="@android:style/TextAppearance.Large.Inverse"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/card_bg"
        android:padding="10dp"
        android:textColor="@android:color/primary_text_light"
        android:textSize="24sp"
        android:textStyle="bold"
        tools:text="Title" />

    <View
        android:id="@+id/divider_title"
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:layout_below="@id/title"
        android:background="@color/card_outline" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignWithParentIfMissing="true"
        android:layout_below="@id/divider_title"
        android:scaleType="centerCrop"
        tools:src="@drawable/picture1" />

    <View
        android:id="@+id/divider_bottom"
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:layout_below="@id/image"
        android:background="@color/card_outline" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="10dp"
        android:layout_alignBottom="@+id/image_1"
        android:layout_below="@+id/divider_bottom"
        android:background="@color/card_bg" />

    <TextView
        android:id="@+id/description"
        style="@android:style/TextAppearance.Inverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/image_2"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/image"
        android:layout_toLeftOf="@+id/btn_sep_1"
        android:ellipsize="end"
        android:fontFamily="sans-serif-condensed"
        android:gravity="center_vertical"
        android:lines="1"
        android:padding="10dp"
        android:textColor="@android:color/secondary_text_light"
        tools:text="This is the description, it is a long description, as you can see" />

    <View
        android:id="@+id/btn_sep_1"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@+id/image_1"
        android:layout_below="@id/image"
        android:layout_marginTop="7dp"
        android:layout_toLeftOf="@+id/image_1"
        android:background="#ccc" />

    <ImageButton
        android:id="@+id/image_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_toLeftOf="@+id/btn_sep_2"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dp"
        android:src="@drawable/camera" />

    <View
        android:id="@+id/btn_sep_2"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@id/image_1"
        android:layout_below="@id/image"
        android:layout_marginTop="7dp"
        android:layout_toLeftOf="@+id/image_2"
        android:background="#ccc" />

    <ImageButton
        android:id="@+id/image_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/image"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dp"
        android:src="@drawable/people" />
</RelativeLayout>

<LinearLayout
    android:id="@+id/like_dislike"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/inner_relative"
    android:background="@android:color/white"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/like"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_like" />

    <ImageView
        android:id="@+id/dislike"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:src="@drawable/ic_dislike" />
</LinearLayout>

<TextView
    android:id="@+id/like_dislike_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/like_dislike"
    android:background="#fff"
    android:gravity="center"
    android:textColor="#000000" />

</RelativeLayout>

2.) SimpleCardStackAdapter.java

This is the adapter for the cards. I have modified it to add the click listeners for both like and dislike imageview and a textview to show the text. When user clicks like button, i have added a boolean variable in the card model which stores the like/dislike value. True for like and false for dislike.

package com.andtinder.view;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.andtinder.R;
import com.andtinder.model.CardModel;

public final class SimpleCardStackAdapter extends CardStackAdapter {

    public SimpleCardStackAdapter(Context mContext) {
        super(mContext);
    }

    @Override
    public View getCardView(int position, final CardModel model, View convertView, ViewGroup parent) {
        if(convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(getContext());
            convertView = inflater.inflate(R.layout.std_card_inner, parent, false);
            assert convertView != null;
        }

        ((ImageView) convertView.findViewById(R.id.image)).setImageDrawable(model.getCardImageDrawable());
        ((TextView) convertView.findViewById(R.id.title)).setText(model.getTitle());
        ((TextView) convertView.findViewById(R.id.description)).setText(model.getDescription());


        final TextView like_dislike_text = ((TextView) convertView.findViewById(R.id.like_dislike_text));
        if(model.isLike())
            like_dislike_text.setText("Liked");
        else
            like_dislike_text.setText("DisLiked");

        ((ImageView) convertView.findViewById(R.id.like)).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                model.setLike(true);
                like_dislike_text.setText("Liked");
            }
        });

        ((ImageView) convertView.findViewById(R.id.dislike)).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                model.setLike(false);
                like_dislike_text.setText("DisLiked");
            }
        });


        return convertView;
    }
}

3.) CardModel.java

Finally, here I have added that boolean variable which stores the value for like/dislike.

private boolean isLike = false;
public boolean isLike() {
    return isLike;
}

public void setLike(boolean isLike) {
    this.isLike = isLike;
}

This is the final result:

Screenshot 1

Screenshot 2

Answer 2

With the help of Swipecard library, i made UI like tinder swipe card animation.

You can download example here, where i explained step by step there.

Answer 3

I got a result for like and unlike button to flip images to left and right.

Use this Swipe Cards like tinder swipe Sample.

MainActivity.java:

Inside the MyAppAdapter getView() method,add these below codes:

 viewHolder.likeImg.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_SHORT).show();

            flipMethodRight(80.00f);

        }
    });

    viewHolder.unlikeImg.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_SHORT).show();

            flipMethodLeft(-80.00f);

        }
    });

Add these below codes outside of MyAppAdapter class:

 void flipMethodRight(float scrollProgressPercent) {


        flingContainer.getTopCardListener().selectRight();

        View view = flingContainer.getSelectedView();
        view.findViewById(R.id.background).setAlpha(0);

        view.findViewById(R.id.item_swipe_left_indicator).setAlpha(scrollProgressPercent > 0 ? scrollProgressPercent : 0);

    }

    void flipMethodLeft(float scrollProgressPercent) {


        flingContainer.getTopCardListener().selectLeft();

        View view = flingContainer.getSelectedView();
        view.findViewById(R.id.background).setAlpha(0);
        view.findViewById(R.id.item_swipe_right_indicator).setAlpha(scrollProgressPercent < 0 ? -scrollProgressPercent : 0);


    }

Thanks to @nirav kalola for this Sample.

Answer 4

Use a viewpager, and change the OnPageChangeListener.

http://developer.android.com/reference/android/support/v4/view/ViewPager.OnPageChangeListener.html

Just overload the onPageScrolled(int position, float positionOffset, int positionOffsetPixels) method. The int is related to the item's index on the adapter, so you can use that to identify the image.

Example:

_viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i2) {
            System.out.println("SWIPING!!!!");
        }

        @Override
        public void onPageSelected(int i) {
            System.out.println("SELECTED!!!!");
        }

        @Override
        public void onPageScrollStateChanged(int i) {
            System.out.println("CHANGED!!!!");
        }
    });