android swipe cards like tinder app {Latest}

Please follow and like us:

android swipe cards like tinder app

Tinder is a very famous location based dating app with attractive user interface in application. Everyone like their swippable card animation. if you are looking for making swippable cards like tinder app for your android app then you are at the right place. With the help of Tinder like swipe cards effect, you can swipe left or swipe right to like or dislike the card’s data. I used Swipecards library and do some modification for making tinder like swipe cards.

Android Swipe Cards Animation Like Tinder App

Most Android Developers looks for “how to make an app like tinder ?”, with this tutorial you can make same swipe card animation like tinder app.
Let’s explore to making tinder like swipe cards animation effect in your android apps step by step.

Create new package “tindercard” and put swipecard library classes into it.

  • BaseFlingAdapterView.java
  • FlingCardListener.java
  • LinearRegression.java
  • SwipeFlingAdapterView.java

Add following attributes for swipecard library in attrs.xml file of values folder.

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

    <declare-styleable name="SwipeFlingAdapterView">
        <attr name="SwipeFlingStyle" format="reference"/>
        <attr name="rotation_degrees" format="float"/>
        <attr name="min_adapter_stack" format="integer"/>
        <attr name="max_visible" format="integer"/>
    </declare-styleable>

</resources>

Add following style for swipecard library in style.xml file of values folder.

<style name="SwipeFling">
        <item name="rotation_degrees">15</item>
        <item name="min_adapter_stack">6</item>
        <item name="max_visible">4</item>
    </style>

complete style.xml will looks like following for android swipe cards like tinder app example.

<resources>


<style name="AppTheme" parent="AppTheme.Base">

    </style>


<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textColorPrimary">@color/colorTextPrimary</item>
        <item name="android:textColorSecondary">@color/colorTextSecondary</item>

    </style>



<style name="SwipeFling">
        <item name="rotation_degrees">15</item>
        <item name="min_adapter_stack">6</item>
        <item name="max_visible">4</item>
    </style>


</resources>

color.xml will looks like following for android swipe cards like tinder app example.

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

    <color name="primaryColor">#00000000</color>
    <color name="primaryColorDark">#4b5c93</color>
    <color name="colorAccent">#00000000</color>
    <color name="colorTextPrimary">#fff</color>
    <color name="colorTextSecondary">#fff</color>
    
</resources>

AndroidMainifest.xml will looks like following for android swipe cards like tinder app example.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.nkdroid.tinderswipe" >
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
        <activity android:name=".SplashActivity" android:label="@string/title_activity_splash" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" android:label="@string/title_activity_main" >
        </activity>
    </application>

</manifest>

build.gradle for app will looks like foloowing

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "com.nkdroid.tinderswipe"
        minSdkVersion 14
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.github.bumptech.glide:glide:3.5.1'
}

activity_main.xml contains android swipe cards view.

<LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity">

    <!-- activity view -->
    <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background">


        <com.nkdroid.tinderswipe.tindercard.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>

item.xml contains single car’s view

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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" 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="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." />
            </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>

Create POJO class for storing data in android swipe cards

package com.nkdroid.tinderswipe;

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;
    }
    
}

MainActivity.java contains main logic of android swipe cards animations

package com.nkdroid.tinderswipe;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
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.nkdroid.tinderswipe.tindercard.FlingCardListener;
import com.nkdroid.tinderswipe.tindercard.SwipeFlingAdapterView;

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


public class MainActivity extends AppCompatActivity implements FlingCardListener.ActionDownInterface {

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

    public static void removeBackground() {


        viewHolder.background.setVisibility(View.GONE);
        myAppAdapter.notifyDataSetChanged();

    }

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

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

        al = new ArrayList<>();
        al.add(new Data("http://i.ytimg.com/vi/PnxsTxV8y3g/maxresdefault.jpg", "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness."));
        al.add(new Data("http://switchboard.nrdc.org/blogs/dlashof/mission_impossible_4-1.jpg", "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness."));
        al.add(new Data("http://i.ytimg.com/vi/PnxsTxV8y3g/maxresdefault.jpg", "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness."));
        al.add(new Data("http://switchboard.nrdc.org/blogs/dlashof/mission_impossible_4-1.jpg", "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness."));
        al.add(new Data("http://i.ytimg.com/vi/PnxsTxV8y3g/maxresdefault.jpg", "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness."));

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

            }

            @Override
            public void onLeftCardExit(Object dataObject) {
                al.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) {

                al.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();
            }
        });

    }

    @Override
    public void onActionDownPerform() {
        Log.e("action", "bingo");
    }

    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;
        }
    }
}

Hope you like out android swipe cards like tinder turorial, if you have any problem regarding implementing android swipe card animation in your app then let me know via comments.


android swipe cards like tinder app

 

Stay connected for latest android development tutorials for beginners.

Happy Coding 🙂

nirav kalola