Android Dev | Tinder Swipe Card

hey guys, in this article we will learn how to add a swiped card like the Tinder app (like-dislike-details).

tinder matching swipe cards

so at the first step, we add the next library from Diolor-GitHub

implementation 'com.lorentzos.swipecards:library:1.0.9'

In the XML code below we define how to display the cards and the buttons ‘like / dislike’ :

<?xml version="1.0" encoding="utf-8"?>
<
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<
LinearLayout
android:id="@+id/line1"
android:layout_width="match_parent"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:orientation="horizontal">

<
Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/dislike"
android:text="dislike"
android:layout_margin="5dp"/>
<
Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="like"
android:layout_margin="5dp"
android:id="@+id/like"/>

</
LinearLayout>

<
com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="@+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/line1"
app:rotation_degrees="15.0"/>

</
RelativeLayout>

and also, design our card with TextView that holds the data content. create a new Layout named “item” and add the code below:

<?xml version="1.0" encoding="utf-8"?>
<
FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="270dp"
android:layout_height="150dp"
android:layout_gravity="center"
xmlns:tools="http://schemas.android.com/tools">

<
TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:text="text in here"
android:id="@+id/data"
android:gravity="center"
android:textSize="40sp"
android:background="@color/black"
android:textColor="@color/white"/>

</
FrameLayout>

now, let’s do the magic in the MainActivity Java class and set our adapter that takes control of the swiped cards and the buttons. first, let’s add the adapter

public class MainActivity extends AppCompatActivity {

private ArrayAdapter<String> arrayAdapter;
List<String> data;
SwipeFlingAdapterView flingAdapterView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

flingAdapterView=findViewById(R.id.swipe);

data=new ArrayList<>();
data.add("java");
data.add("html");
data.add("css");
data.add("php");

arrayAdapter=new ArrayAdapter<>(MainActivity.this, R.layout.item, R.id.data, data);

flingAdapterView.setAdapter(arrayAdapter);

flingAdapterView.setFlingListener(new SwipeFlingAdapterView.onFlingListener() {
@Override
public void removeFirstObjectInAdapter() {
data.remove(0);
arrayAdapter.notifyDataSetChanged();
}

@Override
public void onLeftCardExit(Object o) {

Toast.makeText(MainActivity.this,"dislike",Toast.LENGTH_SHORT).show();
}

@Override
public void onRightCardExit(Object o) {

Toast.makeText(MainActivity.this,"like",Toast.LENGTH_SHORT).show();
}

@Override
public void onAdapterAboutToEmpty(int i) {

}

@Override
public void onScroll(float v) {

}
})
;

flingAdapterView.setOnItemClickListener(new SwipeFlingAdapterView.OnItemClickListener() {
@Override
public void onItemClicked(int i, Object o) {
Toast.makeText(MainActivity.this, "data is "+data.get(i),Toast.LENGTH_SHORT).show();
}
})
;

}
}

we are good to go, our code is now able to interact with user swipe to-Left and to-Right. we add in the code below the code that makes our buttons able to control the cards programmatically.

Button like,dislike;

like=findViewById(R.id.like);
dislike=findViewById(R.id.dislike);

like.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flingAdapterView.getTopCardListener().selectRight();
}
})
;

dislike.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flingAdapterView.getTopCardListener().selectLeft();
}
})
;

congratulations, we set app our Tinder App. now it’s up to you to customize the functionalities of the app and create your own dating app.