Close

Creating Tinder Like Swipe Slider For Android

tinder-like-swipe

Source

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

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

  1. Open the layout files main activity activity_main.xml add Relative Layout
  2. Open the res/drawable and create new drawable file btnlikeback

Res/ drawable/ btnlikeback

  1. Add image in res/drawable folder(copy paste image in to res/ drawable folder)
  2. 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

Top-5 Best Mobile Application Development Platform in 2022

It is not an exaggeration to say that Android is the most popular mobile OS with 85% market share and Read more

Android & iOS Mobile App Developer latest required Skills in 2022

With respect to current industry standards, it has become vital for developers to have knowledge of multiple platforms. There are Read more

What are Android Emulators and How to Setup an Android Emulator?

There are a variety of reasons why you would want to run an Android emulator on your PC. Mobile app Read more

Nisarg is the Business Development Manager at Nimblechapps, a top mobile game development company and has been with the organisation since its inception in 2014. He likes to update his knowledge on changing trends in technology and marketing and pens his thoughts regarding the same on various blogs and LinkedIn.