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

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

Table of Contents

1 Building Tinder Like Swipe Cards in Android
2 Building Tinder Like Swipe Cards – Source Code

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.

dependencies {

//add these dependencies

implementation 'com.google.android.material:material:1.2.0-alpha05'

implementation "com.yuyakaido.android:card-stack-view:2.3.4"

implementation 'com.facebook.fresco:fresco:2.1.0'

implementation 'com.squareup.retrofit2:retrofit:2.6.1'

implementation 'com.squareup.retrofit2:converter-gson:2.6.1'

}

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

dataBinding {

enabled = true

}

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

apply plugin: 'kotlin-kapt'

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.

https://api.simplifiedcoding.in/course-apis/tinder/profiles

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.

data class Profile(

val age: Int,

val distance: Int,

val id: Int,

val name: String,

val profile_pic: String

)

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.

<?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:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<com.yuyakaido.android.cardstackview.CardStackView

android:id="@+id/stack_view"

android:layout_width="380dp"

android:layout_height="404dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="12dp" />

</RelativeLayout>

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.

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools">

<data>

<variable

name="profile"

type="net.simplifiedcoding.tinder.Profile" />

</data>

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="380dp"

android:layout_height="380dp"

android:layout_margin="12dp"

android:elevation="12dp"

android:orientation="vertical">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.facebook.drawee.view.SimpleDraweeView

android:id="@+id/image_view_profile_pic"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentStart="true"

android:layout_alignParentTop="true"

app:image="@{profile.profile_pic}"

tools:background="@drawable/emma_watson" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="@android:color/white"

android:orientation="vertical"

android:padding="12dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:fontFamily="casual"

android:text="@{profile.name + `, ` + profile.age}"

android:textColor="@android:color/black"

android:textSize="24sp"

android:textStyle="bold"

tools:text="Emma Watson, 26" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:fontFamily="sans-serif-light"

android:text="@{profile.distance + ` Miles Away`}"

android:textColor="@android:color/black"

android:textSize="16sp"

tools:text="5 Miles Away" />

</LinearLayout>

</RelativeLayout>

</androidx.cardview.widget.CardView>

</layout>

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.

@BindingAdapter("image")

fun loadImage(view: SimpleDraweeView, url: String) {

view.setImageURI(url)

}

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.

class ProfilesAdapter : RecyclerView.Adapter<ProfilesAdapter.ProfileViewHolder>() {

private var profiles: List<Profile>? = null

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ProfileViewHolder(

DataBindingUtil.inflate(

LayoutInflater.from(parent.context),

R.layout.card_view_profile,

parent,

false

)

override fun getItemCount() = profiles?.size ?: 0

override fun onBindViewHolder(holder: ProfileViewHolder, position: Int) {

profiles?.let {

holder.binding.profile = it[position]

holder.binding.executePendingBindings()

}

fun setProfiles(profiles: List<Profile>) {

this.profiles = profiles

notifyDataSetChanged()

}

inner class ProfileViewHolder(val binding: CardViewProfileBinding) :

RecyclerView.ViewHolder(binding.root)

}

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.

interface TinderAPI {

@GET("profiles")

fun getProfiles(): Call<List<Profile>>

companion object {

operator fun invoke(): TinderAPI {

return Retrofit.Builder()

.baseUrl("https://api.simplifiedcoding.in/course-apis/tinder/")

.addConverterFactory(GsonConverterFactory.create())

.build()

.create(TinderAPI::class.java)

}

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.

class MainActivity : AppCompatActivity(), CardStackListener {

private val adapter = ProfilesAdapter()

private lateinit var layoutManager: CardStackLayoutManager

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

Fresco.initialize(this)

setContentView(R.layout.activity_main)

layoutManager = CardStackLayoutManager(this, this).apply {

setSwipeableMethod(SwipeableMethod.AutomaticAndManual)

setOverlayInterpolator(LinearInterpolator())

}

stack_view.layoutManager = layoutManager

stack_view.adapter = adapter

stack_view.itemAnimator.apply {

if (this is DefaultItemAnimator) {

supportsChangeAnimations = false

}

TinderAPI().getProfiles().enqueue(object : Callback<List<Profile>> {

override fun onFailure(call: Call<List<Profile>>, t: Throwable) {

}

override fun onResponse(call: Call<List<Profile>>, response: Response<List<Profile>>) {

response.body()?.let {

adapter.setProfiles(it)

}

})

}

override fun onCardDisappeared(view: View?, position: Int) {

}

override fun onCardDragging(direction: Direction?, ratio: Float) {

}

override fun onCardSwiped(direction: Direction?) {

}

override fun onCardCanceled() {

}

override fun onCardAppeared(view: View?, position: Int) {

}

override fun onCardRewound() {

}

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

<uses-permission android:name="android.permission.INTERNET" />

We can try running the application now.

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.

Source Code Download

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 🙂