Creating Tinder Like Swipe Slider For Android

Swipe Slider For Android_2

In this example we will develop Card views and architecture to simulate the Tinder Swipe Cards without using Any third party library.

Objectives of this Tutorial

1

We would be creating the swipe Card view as used in the Tinder. i.e. Swipe right is considered liked and swipe left is considered unlike.

2

As we can see in the below video that there are a lot of stuffs happening in the scene. All these are implemented using Card View’s and Image View.

Card View

1

Card View is another major element introduced in Material Design.

2

Card View extends the FrameLayout and it is supported way back to Android 2.x.

3

A FrameLayout with a rounded corner background and shadow.

4

Using Card View you can represent the information in a card manner with a drop shadow (elevation) and corner radius which looks consistent across the platform.

Important XML attributes of Card View

  1. android.support.v7.cardview:cardBackgroundColor :-> Background color for CardView.
  2. android.support.v7.cardview:cardCornerRadius :-> Corner radius for CardView.
  3. android.support.v7.cardview:cardElevation :-> Elevation for CardView.
  4. android.support.v7.cardview:cardMaxElevation :-> Maximum Elevation for CardView.
  5. android.support.v7.cardview:cardUseCompatPadding :-> Add padding in API v21+ as well to have the same measurements with previous versions.
  6. android.support.v7.cardview:contentPadding :-> Inner padding between the edges of the Card and children of the CardView.
  7. android.support.v7.cardview:cardPreventCornerOverlap :-> Add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corner.

How to add Card View?

To use the Card View in your app, add the Card View dependency in build.gradle and Sync the project.

Add Card View

build.gradle
dependencies {
compile 'com.android.support:appcompat-v7:26.+'
// Card View dependencies
compile 'com.android.support:cardview-v7:26.+'
}
Tinder Like Swipe Slider

Now add Card View in to your layout like this:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tinderCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
// add here all your controls
</LinearLayout>
</android.support.v7.widget.CardView>
Tinder Like Swipe Slider

Now let’s see this in action by creating a new project:

1. Create a new project in Android Studio from File? New Project. When it prompts you to select the Empty activity, and proceed.

Create a new project tinder

2. Open build.gradle and add Card View, which is used to display the Cards.

Add Card View

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.+'
testCompile 'junit:junit:4.12'
//CardView,
compile 'com.android.support:cardview-v7:26.+'
}
Tinder Like Swipe Slider

3. Create a model class denoting the UserDataModel properties like name, number of Likes and image. So create a class named UserDataModel.java and add the below code.

Click app -> New -> Java Class

Create a model class

public class UserDataModel {
String name, totalLikes;
int photo;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTotalLikes() {
return totalLikes;
}
public void setTotalLikes(String totalLikes) {
this.totalLikes = totalLikes;
}
public int getPhoto() {
return photo;
}
public void setPhoto(int photo) {
this.photo = photo;
}
}
Tinder Like Swipe Slider

4. We also need an XML layout to display the card. Create an xml layout named custom_tinder_layout.xml under res ? layout. Here you can notice that I have added <android.support.v7.widget.CardView> and added all the UserDataModel properties like name, number of likes and image inside it.

Right click on res/Layout/Layout Resource File

Layout Resource File

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tinderCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">

<RelativeLayout
android:id="@+id/relative_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/userIMG"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@drawable/disha"
android:scaleType="centerCrop" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name : "
android:textColor="#000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Likes : "
android:textColor="#000" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:id="@+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Disha Patani"
android:textColor="#000" />

<TextView
android:id="@+id/tvTotalLikes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="10K"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Tinder Like Swipe Slider

5. Open the layout files main activity activity_main.xml add Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_layoutview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.user26.tindersliderdemo.MainActivity">
</RelativeLayout>
Tinder Like Swipe Slider

6. Open the res/drawable and create new drawable file btnlikeback

Res/ drawable/ btnlikeback

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke android:width="2dp"
android:color="@color/colorRed" />
<corners android:radius="20dp" />
</shape>
</item>
</selector>
Tinder Like Swipe Slider

7. Add image in res/drawable folder(copy paste image in to res/ drawable folder)

Add image in res:drawable folder

8. Finally open MainActivity.java and add OnTouchListener() method to relativeLayoutContainer and perform swiping operation based on user swiping using x,y quardinates like this:

relativeLayoutContainer.OnTouchListener()

View.OnTouchListener() :-> Interface definition for a callback to be invoked when a touch event is dispatched to this view. The callback will be invoked before the touch event is given to the view.

Public Methods

onTouch(View v, MotionEvent event)

This method called when a touch event is dispatched to a view. This allows listeners to get a chance to respond before the target view.

Parameters

v :-> View: The view the touch event has been dispatched to.

event :-> MotionEvent: The MotionEvent object containing full information about the event.

Returns

boolean True if the listener has consumed the event, false otherwise.

Touch listener on the image layout to swipe image right or left:

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

containerView.setX(0);
containerView.setY(0);

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:

x = (int) event.getX();
y = (int) event.getY();

Log.v("On touch", x + " " + y);
break;
case MotionEvent.ACTION_MOVE:

x_cord = (int) event.getRawX();
// smoother animation.
y_cord = (int) event.getRawY();

containerView.setX(x_cord - x);
containerView.setY(y_cord - y);

if (x_cord >= screenCenter) {
containerView.setRotation((float) ((x_cord - screenCenter) * (Math.PI / 32)));
if (x_cord > (screenCenter + (screenCenter / 2))) {
tvLike.setAlpha(1);
if (x_cord > (windowwidth - (screenCenter / 4))) {
Likes = 2;
} else {
Likes = 0;
}
} else {
Likes = 0;
tvLike.setAlpha(0);
}
tvUnLike.setAlpha(0);
} else {
// rotate image while moving
containerView.setRotation((float) ((x_cord - screenCenter) * (Math.PI / 32)));
if (x_cord < (screenCenter / 2)) {
tvUnLike.setAlpha(1);
if (x_cord < screenCenter / 4) {
 Likes = 1;
 } else { Likes = 0;
 } } else {
 Likes = 0;
 tvUnLike.setAlpha(0); } tvLike.setAlpha(0);
 } break; case MotionEvent.ACTION_UP: x_cord = (int) event.getRawX(); y_cord = (int) event.getRawY(); Log.e("X Point", "" + x_cord + " , Y " + y_cord); tvUnLike.setAlpha(0);
 tvLike.setAlpha(0); if (Likes == 0) { Toast.makeText(context, "NOTHING", Toast.LENGTH_SHORT).show();
 Log.e("Event_Status :-> ", "Nothing");
containerView.setX(0);
containerView.setY(0);
containerView.setRotation(0);
} else if (Likes == 1) {
Toast.makeText(context, "UNLIKE", Toast.LENGTH_SHORT).show();
Log.e("Event_Status :-> ", "UNLIKE");
parentView.removeView(containerView);
} else if (Likes == 2) {
Toast.makeText(context, "LIKED", Toast.LENGTH_SHORT).show();
Log.e("Event_Status :-> ", "Liked");
parentView.removeView(containerView);
}
break;
default:
break;
}
return true;
}
});
Tinder Like Swipe Slider

Code for adding programmatically like and dislike button:

Add dynamically like TextView on image

final TextView tvLike = new TextView(context);
tvLike.setLayoutParams(layoutTvParams);
tvLike.setPadding(10, 10, 10, 10);
tvLike.setBackgroundDrawable(getResources().getDrawable(R.drawable.btnlikeback));
tvLike.setText("LIKE");

tvLike.setGravity(Gravity.CENTER);

tvLike.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
tvLike.setTextSize(25);

tvLike.setTextColor(ContextCompat.getColor(context, R.color.colorRed));

tvLike.setX(20);
tvLike.setY(100);

tvLike.setRotation(-50);

tvLike.setAlpha(alphaValue);

relativeLayoutContainer.addView(tvLike);
Tinder Like Swipe Slider

Add dynamically dislike TextView on image

final TextView tvUnLike = new TextView(context);
tvUnLike.setLayoutParams(layoutTvParams);
tvUnLike.setPadding(10, 10, 10, 10);
tvUnLike.setBackgroundDrawable(getResources().getDrawable(R.drawable.btnlikeback));
tvUnLike.setText("UNLIKE");
tvUnLike.setGravity(Gravity.CENTER);
tvUnLike.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
tvUnLike.setTextSize(25);
tvUnLike.setTextColor(ContextCompat.getColor(context, R.color.colorRed));
tvUnLike.setX(500);
tvUnLike.setY(150);
tvUnLike.setRotation(50);
tvUnLike.setAlpha(alphaValue);
relativeLayoutContainer.addView(tvUnLike);
Tinder Like Swipe Slider

Full code of mainActivity.java

package com.nimblechapps.tinder_swiping_cards;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Typeface;

import android.os.Bundle;

import android.support.v4.content.ContextCompat;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.view.Window;

import android.widget.ImageView;

import android.widget.LinearLayout.LayoutParams;

import android.widget.RelativeLayout;

import android.widget.TextView;

import android.widget.Toast;

import java.util.ArrayList;
import java.util.Collections;

public class MainActivity extends AppCompatActivity {
    int windowwidth;

    int screenCenter;

    int x_cord, y_cord, x, y;

    int Likes = 0;

    public RelativeLayout parentView;

    float alphaValue = 0;

    private Context context;


    
    ArrayList<UserDataModel> userDataModelArrayList;


    @SuppressWarnings("deprecation")

    @SuppressLint("NewApi")

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);


        
        context = MainActivity.this;


        
        parentView = (RelativeLayout) findViewById(R.id.main_layoutview);


        
        windowwidth = getWindowManager().getDefaultDisplay().getWidth();


        
        screenCenter = windowwidth / 2;


        
        userDataModelArrayList = new ArrayList<>();


        
        getArrayData();


        
        for (int i = 0; i < userDataModelArrayList.size(); i++) {


            
            LayoutInflater inflate =

            (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);


            
            final View containerView = inflate.inflate(R.layout.custom_tinder_layout, null);


            
            ImageView userIMG = (ImageView) containerView.findViewById(R.id.userIMG);

            RelativeLayout relativeLayoutContainer = (RelativeLayout) containerView.findViewById(R.id.relative_container);


            
            LayoutParams layoutParams = new LayoutParams(

                LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);


                containerView.setLayoutParams(layoutParams);


                
                containerView.setTag(i);

                userIMG.setBackgroundResource(userDataModelArrayList.get(i).getPhoto());


                
                //            m_view.setRotation(i);

                //containerView.setPadding(0, i, 0, 0);


                
            LayoutParams layoutTvParams = new LayoutParams(

                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);



                    
                    
            // ADD dynamically like TextView on image.

            final TextView tvLike = new TextView(context);

            tvLike.setLayoutParams(layoutTvParams);

            tvLike.setPadding(10, 10, 10, 10);

            tvLike.setBackgroundDrawable(getResources().getDrawable(R.drawable.btnlikeback));

            tvLike.setText("LIKE");

            tvLike.setGravity(Gravity.CENTER);

            tvLike.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

            tvLike.setTextSize(25);

            tvLike.setTextColor(ContextCompat.getColor(context, R.color.colorRed));

            tvLike.setX(20);

            tvLike.setY(100);

            tvLike.setRotation(-50);

            tvLike.setAlpha(alphaValue);

            relativeLayoutContainer.addView(tvLike);


                    
            // ADD dynamically dislike TextView on image.

            final TextView tvUnLike = new TextView(context);

            tvUnLike.setLayoutParams(layoutTvParams);

            tvUnLike.setPadding(10, 10, 10, 10);

            tvUnLike.setBackgroundDrawable(getResources().getDrawable(R.drawable.btnlikeback));

            tvUnLike.setText("UNLIKE");

            tvUnLike.setGravity(Gravity.CENTER);

            tvUnLike.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

            tvUnLike.setTextSize(25);

            tvUnLike.setTextColor(ContextCompat.getColor(context, R.color.colorRed));

            tvUnLike.setX(500);

            tvUnLike.setY(150);

            tvUnLike.setRotation(50);

            tvUnLike.setAlpha(alphaValue);

            relativeLayoutContainer.addView(tvUnLike);


                    
            TextView tvName = (TextView) containerView.findViewById(R.id.tvName);

            TextView tvTotLikes = (TextView) containerView.findViewById(R.id.tvTotalLikes);


                    
            tvName.setText(userDataModelArrayList.get(i).getName());

            tvTotLikes.setText(userDataModelArrayList.get(i).getTotalLikes());


                    
            // Touch listener on the image layout to swipe image right or left.

            relativeLayoutContainer.setOnTouchListener(new OnTouchListener() {


                        
                @Override

                public boolean onTouch(View v, MotionEvent event) {


                            
                    x_cord = (int) event.getRawX();

                    y_cord = (int) event.getRawY();


                            
                    containerView.setX(0);

                    containerView.setY(0);


                            
                    switch (event.getAction()) {

                        case MotionEvent.ACTION_DOWN:


                        
                        x = (int) event.getX();

                        y = (int) event.getY();


                                
                        Log.v("On touch", x + " " + y);

                        break;

                    case MotionEvent.ACTION_MOVE:


                                
                        x_cord = (int) event.getRawX();

                        // smoother animation.

                        y_cord = (int) event.getRawY();


                                
                        containerView.setX(x_cord - x);

                        containerView.setY(y_cord - y);


                                
                        if (x_cord >= screenCenter) {

                            containerView.setRotation((float) ((x_cord - screenCenter) * (Math.PI / 32)));

                            if (x_cord > (screenCenter + (screenCenter / 2))) {

                                tvLike.setAlpha(1);

                                if (x_cord > (windowwidth - (screenCenter / 4))) {

                                    Likes = 2;

                                } else {

                                    Likes = 0;

                                }

                            } else {

                                Likes = 0;

                                tvLike.setAlpha(0);

                            }

                            tvUnLike.setAlpha(0);

                        } else {

                            // rotate image while moving

                            containerView.setRotation((float) ((x_cord - screenCenter) * (Math.PI / 32)));

                                        if (x_cord < (screenCenter / 2)) {

                                            tvUnLike.setAlpha(1);

                                            if (x_cord < screenCenter / 4) {

                                                Likes = 1;

                                                } else {

                                                    Likes = 0;

                                                    }

                                            } else {

                                                Likes = 0;

                                                tvUnLike.setAlpha(0);

                                                }

                                                tvLike.setAlpha(0);

                                        }


                                        break;

                                    case MotionEvent.ACTION_UP:


                                        
                                        x_cord = (int) event.getRawX();

                                        y_cord = (int) event.getRawY();


                                        
                                        Log.e("X Point", "" + x_cord + " , Y " + y_cord);

                                        tvUnLike.setAlpha(0);

                                        tvLike.setAlpha(0);


                                        
                                        if (Likes == 0) {

                                            Toast.makeText(context, "NOTHING", Toast.LENGTH_SHORT).show();

                                            Log.e("Event_Status :-> ", "Nothing");

                                            containerView.setX(0);

                                            containerView.setY(0);

                                            containerView.setRotation(0);

                                            } else if (Likes == 1) {

                                                Toast.makeText(context, "UNLIKE", Toast.LENGTH_SHORT).show();

                                                Log.e("Event_Status :-> ", "UNLIKE");

                                                parentView.removeView(containerView);

                                                } else if (Likes == 2) {

                                                    Toast.makeText(context, "LIKED", Toast.LENGTH_SHORT).show();

                                                    Log.e("Event_Status :-> ", "Liked");

                                                    parentView.removeView(containerView);

                                                }

                                                break;

                                                default:

                                                break;

                                            }

                                            return true;

                                        }

                                });


                                            
                                parentView.addView(containerView);


                            }


                    }


                        
private void getArrayData() {


    
    UserDataModel model = new UserDataModel();

    model.setName("Nimblechapps 1 ");

    model.setTotalLikes("3 M");

    model.setPhoto(R.drawable.image1);

    userDataModelArrayList.add(model);


    
    UserDataModel model2 = new UserDataModel();

    model2.setName("Nimblechapps 2 ");

    model2.setTotalLikes("2 M");

    model2.setPhoto(R.drawable.image2);

    userDataModelArrayList.add(model2);


    
    UserDataModel model3 = new UserDataModel();

    model3.setName("Nimblechapps 3 ");

    model3.setTotalLikes("3 M");

    model3.setPhoto(R.drawable.image3);

    userDataModelArrayList.add(model3);

    
    UserDataModel model4 = new UserDataModel();

    model4.setName("Nimblechapps 4 ");

    model4.setTotalLikes("4 M");

    model4.setPhoto(R.drawable.image1);

    userDataModelArrayList.add(model4);


    
    UserDataModel model5 = new UserDataModel();

    model5.setName("Nimblechapps 5 ");

    model5.setTotalLikes("5 M");

    model5.setPhoto(R.drawable.image2);

    userDataModelArrayList.add(model5);


    
    UserDataModel model6 = new UserDataModel();

    model6.setName("Nimblechapps 6 ");

    model6.setTotalLikes("6 M");

    model6.setPhoto(R.drawable.image3);

    userDataModelArrayList.add(model6);


    
    UserDataModel model7 = new UserDataModel();

    model7.setName("Nimblechapps 7 ");

    model7.setTotalLikes("7 M");

    model7.setPhoto(R.drawable.image1);

    userDataModelArrayList.add(model7);


    
    UserDataModel model8 = new UserDataModel();

    model8.setName("Nimblechapps 8 ");

    model8.setTotalLikes("8 M");

    model8.setPhoto(R.drawable.image2);

    userDataModelArrayList.add(model8);


    
    UserDataModel model9 = new UserDataModel();

    model9.setName("Nimblechapps 9 ");

    model9.setTotalLikes("9 M");

    model9.setPhoto(R.drawable.image3);

    userDataModelArrayList.add(model9);


    
    Collections.reverse(userDataModelArrayList);


    
    }

}
Tinder Like Swipe Slider

Conclusion

Nowadays, many third party libraries are available for creating tinder like swiping cards but using this tutorial you can create tinder like swiping cards without using any library. To implement tinder like swiping cards we are using just simple setOnTouchListener (). Get x, y coordinates from touch listener we performing swiping.

Note: Please update your project Gradle Dependencies To Latest version.

Nilesh Rathod
Nilesh is a mobile application developer. Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers is always interesting part for him. He just loves to help, share and learn knowledge through leading platforms like StackOverflow.
  • Gift Ramolobeng

    nice code, works great but I have added a button on it and would like to know how I get the current position when the button is pressed?