Building Tinder Like Swipe Cards in Android

Do you use TINDER? Don’t Lie I know you do ๐Ÿ˜œ. Jokes apart but the Swipe-able Cards of Tinder are really good in terms of User Experience. (Looking at Beautiful Girls, and Swiping Them ๐Ÿ˜‰). So this post is basically about building Tinder Like Swipe Cards in Android.

In this post we will just learn how to make a Tinder Like Swipe-able cards. But if you want to learn how to build a full Tinder Like App, SHARE this post with the hashtag #SimplifiedCoding. ย And if I get good responses, I will create a complete course about building Tinder Like Application.

In the below video you can see what are we going to build.

Tinder Like Swipe Cards in Android
Tinder Like Swipe Cards in Android

If you are interested to know how, then keep reading, we won’t waste anymore time in talking.

Building Tinder Like Swipe Cards in Android

As always the first thing we need is to create a new Android Studio Project. For this tutorial I have created a project named “Tinder” using an empty activity (As we always do).

We will start by adding the required dependencies.

Adding Dependencies

  • Open the app level build.gradle file and first add the following dependencies.

  • We have added the following
    • Material Design: The material design dependency that is needed for designing the app.
    • Card-Stack-View: We are going to use this 3rd party library for building the Tinder Like Swipe Cards in Android. I am really thankful to the author that I find this nice library to implement the required feature.ย 
    • Fresco:ย It is an Image Loading Library, as we need to display profile image from URL.
    • Retrofit and GSON: Then we need the Retrofit and GSON library for network request and gson parsing (we already used it in many previous tutorials).

Enabling Data Binding

Now I use this Android Jetpack thing, in all of my projects. It is very good and you must use it. So let’s enable the data binding for the project as well.

  • To enable data binding just add the following block inside android block of your app level build.gradle file. (If you are confused what to do you can get my source code, the link is at the end of this post).

  • Also add this plugin at the top of the same app level build.gradle file.

  • Now just sync your project and we are done with the initial configuration of the project.

Profiles API

  • We will use this API to display the Profiles in our App. It is a dummy API just for this tutorial. You can also use this API.

  • The above URL will give the following response.
tinder like swipe cards android
API Response

Data Class for Storing Profile

In the API Response we are getting list of profiles, and to store the profile we will create a data class as you can see below.

So create a kotlin file named Profile and write the above given code.

Designing UI

Now we will do the XML Designing of the project.

  • First come inside activity_main.xml and write the following code.

  • For the main activity, we just have CradStackView, that is the part of the library we added in our project.

This CardStackView will hold a number of profiles, or a list of profiles. And each profile contains a number for attributes e.g., profile picture, name, age etc.

To display the profile we need to create one more layout file.

  • Create a layout resource file named card_view_profile.xml and write the following code in it.

  • Above, we have a data binding layout, that has a variable named profile. It is the same data class that holds the profile information, and we are binding the profile information in XML layout as you can see in the code. (In case you have any confusion you can leave your comments below).
  • We are also binding Image from URL in the ImageView that displays the profile picture. But loading image from URL is not this simple, we also need to create a BindingAdapter function. So create a file named BindingUtils.kt and write the following code.

  • Write the above function directly in the file and don’t create any class or companion object.

Creating an Adapter

  • Now we need to create an Adapter for our CardStackView. It uses RecyclerView so we will be building a RecyclerView Adapter, as we already did in the RecyclerView Tutorial.

  • The code is very straight forward, but if you have any question, let me know in the comment section below.

Fetching Profiles from API using Retrofit

Now, we need to fetch the Profiles from the API, and then we can display them to our CardStackView. We already added retrofit and fetching the data from API is very easy, we already done it many times in previous tutorials.

In case you are unaware of these things, check Retrofit Android Tutorial that covers this topic in detail.ย 

  • Create a kotlin file named TinderAPI and write the following code in it.

  • Now we can use the function getProfiles() defined here to get all the profiles from the API.

Displaying Tinder Like Swipe Cards

  • Now we just need to get the profiles, and set it in the adapter. Come inside MainActivity and modify it as below.

  • Now you can run your project but before doing that make sure you have added internet permission to your AndroidManifest.xml file.

  • We can try running the application now.
Tinder Like Swipe Cards in Android
Tinder Like Swipe Cards in Android

Bingo! It is working absolutely fine. In case you are having any problem, feel free to comment it below.

Building Tinder Like Swipe Cards – Source Code

In case you want my source code then you can get it from the below link.


git hub repository
Get the Source Code

So that is all for this tinder like swipe cards in android tutorial friends. I hope you found it helpful. Please SHARE this post with your friends if you think you’ve learned something new from this post. Thank You ๐Ÿ™‚

 

6 thoughts on “Building Tinder Like Swipe Cards in Android”

  1. Hi, how to set up API on my server, I coping the code to my server but it did not work… Sorry, I’m just a beginner

    Reply
  2. Hi,i have used this library,i have made adapter with recyclerView .My doubt is how to get data of each SwipeCard,the callback method is inside my fragment and i want to perform some operation when top card is getting swipe,but unable to get the data reside inside top card using callback method onCardSwiped(Direction direction).

    Reply
  3. Shouldn’t it be mentioned in the beginning that it is in Kotlin, not Java. This would save many from going up to the middle of tutorial only to find it’s not in JAVA… Same as in VMMV…

    Reply

Leave a Comment