Creating Tinder Like Swipe Slider For Android

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 Tinder. i.e. Swipe right is considered liked and swipe left is considered unlike.

2. As we can see in the video below, there is a lot of stuff happening in the scene. All these are implemented using Card View 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. Important XML attributes of Card View

• android.support.v7.cardview:cardBackgroundColor :-> Background color for CardView.

• android.support.v7.cardview:cardCornerRadius :-> Corner radius for CardView.

• android.support.v7.cardview:cardElevation :-> Elevation for CardView.

• android.support.v7.cardview:cardMaxElevation :-> Maximum Elevation for CardView.

• android.support.v7.cardview:cardUseCompatPadding :-> Add padding in API v21+ as well to have the same measurements with previous versions.

• android.support.v7.cardview:contentPadding :-> Inner padding between the edges of the Card and children of the CardView.

• 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.

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.

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

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

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

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

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

Res/ drawable/ btnlikeback

7. Add image in res/drawable folder(copy paste image in to 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 is 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: Code for adding programmatically like and dislike button:

Add dynamically like TextView on image

Add dynamically dislike TextView on image

Full code of mainActivity.java

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 a simple setOnTouchListener (). Get x, y coordinates from the touch listener we are performing swiping.

Note:

Please update your project Gradle Dependencies To Latest version.

Full Source Code

Download APK