Main navigation

Build Tinder App using Android Swipe Cards

adsense

Download full code here:

Android Swipe Cards

What is Tinder App

Tinder is a location based online dating app where mutually interested people can chat and date with each other. They show interest in each other using swipeable interface. If a user swipe to left then that means Dislike and right as Like.

In this tutorial we will make a Tinder App interface using Android Swipe Cards.

What is Android Swipe Cards

This is a tinder like Android Library that created an interface where user can swipe right or left to like or dislike content. SwipeCards library creates a similar effect to Tinder’s swipeable cards with Fling animation.

So let’s learn how to make tinder app ;).

Creating a New Project – Android Swipe Cards

  1. Open Android Studio and create a new project Android Swipe Cards and company domain application.example.com (We have used our own company domain i.e androidtutorialpoint.com. Similarly you can use yours).
  2. Click Next and choose Min SDK, we have kept the default value. Again Click Next and Choose Blank Activity .
  3. Choose the Activity as MainActivity and click next.
  4. Leave all other things as default and Click Finish.

A new project will be created and gradle will resolve all the dependencies. Add following dependencies in build.gradle:

build.gradle

compile 'com.github.bumptech.glide:glide:3.5.1'
compile 'com.lorentzos.swipecards:library:1.0.9'

Above code will add SwipeCards Library in project. Also add Internet permissions from where image will be grabbed to show on Android Swipe Cards screen. Add following permissions in AndroidManifest.xml:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.androidtutorialpoint.androidswipecards"
          xmlns:android="https://schemas.android.com/apk/res/android">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

Layout of Android Swipe Cards

Make a new layout named item.xml at path …/AndroidSwipeCards/app/src/main/res/layout/item.xml. Here we will add a ImageView and TextView to be displayed on Swipe Card.

item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
             xmlns:tools="https://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_gravity="center"
             android:layout_marginBottom="48dp"
             android:layout_marginLeft="20dp"
             android:layout_marginRight="20dp"
             android:layout_marginTop="64dp">

    <FrameLayout
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="6dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="@drawable/shape2"
            android:gravity="center_horizontal"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="12dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:background="@drawable/shape1"
            android:gravity="center_horizontal"
            android:orientation="vertical" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="18dp"
        android:background="@drawable/shape"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <FrameLayout

            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


            <ImageView
                android:id="@+id/cardImage"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:padding="4dp"
                android:scaleType="centerCrop" />
        </FrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="top|center_horizontal"
            android:orientation="horizontal">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/bookText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:padding="4dp"
                    android:textColor="#787878"
                    android:textSize="16sp"
                    tools:text="" />
            </ScrollView>
        </LinearLayout>

    </LinearLayout>


    <View
        android:id="@+id/item_swipe_left_indicator"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:alpha="0"

        android:background="@drawable/like" />

    <View
        android:id="@+id/item_swipe_right_indicator"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="right"
        android:alpha="0"


        android:background="@drawable/nope" />

</FrameLayout>

Also make following changes in activity_main.xml:

activity_main.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
              xmlns:app="https://schemas.android.com/apk/res-auto"
              xmlns:tools="https://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".MainActivity">


    <!-- activity view -->
    <FrameLayout
        android:layout_width="match_parent"

        android:layout_height="match_parent"
        android:background="@drawable/background">


        <com.lorentzos.flingswipe.SwipeFlingAdapterView
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background"
            app:rotation_degrees="15.5" />

    </FrameLayout>

</LinearLayout>

Now we have to add some images and layout in drawable folder which will be displayed as background and Like or Dislike in Android Swipe Cards. Make three new xml files in drawable folder at path …/AndroidSwipeCards/app/src/main/res/drawable/.

shape.xml

<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid
        android:color="@android:color/white"
        />
    <corners
        android:radius="4dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

shape1.xml

<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid
        android:color="#ccc"
        />
    <corners
        android:radius="4dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

shape2.xml

<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid
        android:color="#aaa"
        />
    <corners
        android:radius="4dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

Download and add following images in drawable folder:

Android Swipe Cardsbackground.png
Android Swipe Cardslike.png
Android Swipe Cardsnope.png

Finally folder strucuture will look like this:

Android Swipe Cards

Logic of Android Swipe Cards animations

First of all create a POJO class named Data.java where data will be stored (Image and Description):

Data.java

package com.androidtutorialpoint.androidswipecards;

/**
 * Created by navneet on 20/11/16.
 */

public class Data {

    private String description;

    private String imagePath;

    public Data(String imagePath, String description) {
        this.imagePath = imagePath;
        this.description = description;
    }

    public String getDescription() {
        return description;
    }

    public String getImagePath() {
        return imagePath;
    }

}

Finally we will create MainActivity.java where whole connection and logic is executed.

MainActivity.java

package com.androidtutorialpoint.androidswipecards;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.lorentzos.flingswipe.SwipeFlingAdapterView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    public static MyAppAdapter myAppAdapter;
    public static ViewHolder viewHolder;
    private ArrayList<Data> array;
    private SwipeFlingAdapterView flingContainer;

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

        flingContainer = (SwipeFlingAdapterView) findViewById(R.id.frame);

        array = new ArrayList<>();
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Katrina-Kaif.jpg", "Hi I am Katrina Kaif. Wanna chat with me ?. \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Emma-Watson.jpg", "Hi I am Emma Watson. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Scarlett-Johansson.jpg", "Hi I am Scarlett Johansson. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Priyanka-Chopra.jpg", "Hi I am Priyanka Chopra. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Deepika-Padukone.jpg", "Hi I am Deepika Padukone. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Anjelina-Jolie.jpg", "Hi I am Anjelina Jolie. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
        array.add(new Data("https://www.androidtutorialpoint.com/wp-content/uploads/2016/11/Aishwarya-Rai.jpg", "Hi I am Aishwarya Rai. Wanna chat with me ? \n" +
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));

        myAppAdapter = new MyAppAdapter(array, MainActivity.this);
        flingContainer.setAdapter(myAppAdapter);
        flingContainer.setFlingListener(new SwipeFlingAdapterView.onFlingListener() {
            @Override
            public void removeFirstObjectInAdapter() {

            }

            @Override
            public void onLeftCardExit(Object dataObject) {
                array.remove(0);
                myAppAdapter.notifyDataSetChanged();
                //Do something on the left!
                //You also have access to the original object.
                //If you want to use it just cast it (String) dataObject
            }

            @Override
            public void onRightCardExit(Object dataObject) {

                array.remove(0);
                myAppAdapter.notifyDataSetChanged();
            }

            @Override
            public void onAdapterAboutToEmpty(int itemsInAdapter) {

            }

            @Override
            public void onScroll(float scrollProgressPercent) {

                View view = flingContainer.getSelectedView();
                view.findViewById(R.id.background).setAlpha(0);
                view.findViewById(R.id.item_swipe_right_indicator).setAlpha(scrollProgressPercent < 0 ? -scrollProgressPercent : 0);
                view.findViewById(R.id.item_swipe_left_indicator).setAlpha(scrollProgressPercent > 0 ? scrollProgressPercent : 0);
            }
        });


        // Optionally add an OnItemClickListener
        flingContainer.setOnItemClickListener(new SwipeFlingAdapterView.OnItemClickListener() {
            @Override
            public void onItemClicked(int itemPosition, Object dataObject) {

                View view = flingContainer.getSelectedView();
                view.findViewById(R.id.background).setAlpha(0);

                myAppAdapter.notifyDataSetChanged();
            }
        });
    }

    public static class ViewHolder {
        public static FrameLayout background;
        public TextView DataText;
        public ImageView cardImage;


    }

    public class MyAppAdapter extends BaseAdapter {


        public List<Data> parkingList;
        public Context context;

        private MyAppAdapter(List<Data> apps, Context context) {
            this.parkingList = apps;
            this.context = context;
        }

        @Override
        public int getCount() {
            return parkingList.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {

            View rowView = convertView;


            if (rowView == null) {

                LayoutInflater inflater = getLayoutInflater();
                rowView = inflater.inflate(R.layout.item, parent, false);
                // configure view holder
                viewHolder = new ViewHolder();
                viewHolder.DataText = (TextView) rowView.findViewById(R.id.bookText);
                viewHolder.background = (FrameLayout) rowView.findViewById(R.id.background);
                viewHolder.cardImage = (ImageView) rowView.findViewById(R.id.cardImage);
                rowView.setTag(viewHolder);

            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            viewHolder.DataText.setText(parkingList.get(position).getDescription() + "");

            Glide.with(MainActivity.this).load(parkingList.get(position).getImagePath()).into(viewHolder.cardImage);

            return rowView;
        }
    }
}

In the above we are first creating an array and then adding required images and text using array.add. After this an adapted is created as myAppAdapter to connect and transfer data between User Interface and Backend. Then we are setting listener and adapter. onLeftCardExit and onRightCardExit will be called when a user swipes left or right and hence array.remove(0) will remove first entry in array. myAppAdapter.notifyDataSetChanged(); will update new data. onScroll will be called when a user scroll towards left or right for like or dislike. At this moment alpha of View is set using setAlpha. Also flingContainer.getSelectedView() will get View from getView() called inside Adapter. We hope everything is clear now.

So our code of Android Swipe Cards is complete. Run this code. Following screen will appear:

Android Swipe Cards

You can see demo of this tutorial in video given at start of tutorial to get better understanding of output.




What’s Next ??

You can see our other tutorials on material design like Android ScrollView, ViewPager and Expandable ListView Tutorials etc.

We hope you liked our Android Swipe Cards Tutorial, please leave comments in the comment section below in the case of any doubts. Let us know how do you liked this Android Swipe Cards Tutorial.

To download the full code of Android Swipe Cards, Click on the Download Now link below.

Android Swipe Cards


Reader Interactions

Comments

  1. Hello, i noticed that your site loads very slow, it took around
    8sec. to load this post. Do you know that site speed is major ranking factor for google now?
    If you speed up your site you will rank higher and
    get more targeted traffic. Something may interest
    you, search for: pandatsor’s tools

  2. Hello Sir, Your tutorials are very good because of your style of explanation…Please explain us how to build responsive layout using constraint layout

  3. Whenever i try this i get an error like

    java.lang.NullPointerException: Attempt to read from field ‘int android.view.ViewGroup$MarginLayoutParams.leftMargin’ on a null object reference
    at com.lorentzos.flingswipe.SwipeFlingAdapterView.makeAndAddView(SwipeFlingAdapterView.java:149)
    at com.lorentzos.flingswipe.SwipeFlingAdapterView.layoutChildren(SwipeFlingAdapterView.java:132)
    at com.lorentzos.flingswipe.SwipeFlingAdapterView.onLayout(SwipeFlingAdapterView.java:117)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.support.constraint.ConstraintLayout.onLayout(ConstraintLayout.java:1197)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:383)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:321)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.support.v7.widget.ActionBarOverlayLayout.onLayout(ActionBarOverlayLayout.java:443)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:383)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:321)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1982)
    at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1826)
    at android.widget.LinearLayout.onLayout(LinearLayout.java:1735)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:383)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:321)
    at com.android.internal.policy.DecorView.onLayout(DecorView.java:751)
    at android.view.View.layout(View.java:17866)
    at android.view.ViewGroup.layout(ViewGroup.java:5757)
    at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2724)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2397)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1475)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6992)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:907)
    at android.view.Choreographer.doCallbacks(Choreographer.java:709)
    at android.view.Choreographer.doFrame(Choreographer.java:644)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:893)
    at android.os.Handler.handleCallback(Handler.java:836)
    at android.os.Handler.dispatchMessage(Handler.java:103)
    at android.os.Looper.loop(Looper.java:203)
    at android.app.ActivityThread.main(ActivityThread.java:6276)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1063)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:924)

Leave a Reply

Advertisment ad adsense adlogger