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.

thank you for reading.