Tinder Swipe View with Example in Android
Tinder Swipe View is one of the most used UI components in many Android apps. This feature provides us to easily represent the data in a huge list form. In this article, we will take a look at implementing this Swipe View feature in our Android App.
What we are going to build in this article?
We will be building a simple application in which we will be displaying a stack of cards in which we will be displaying the different courses which are available on Geeks for Geeks. On that cards, we will be adding a swipe-like feature similar to that of Tinder. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add below dependency in build.gradle
Navigate to the app > Gradle Scripts > build.gradle and add the below dependency in the dependencies section.
After adding the above dependency now sync your project and we will move towards our activity_main.xml.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
Step 4: Creating a modal class for storing our data
Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as CourseModal and add the below code to it. Comments are added in the code to get to know in more detail.
Step 5: Creating a new layout file for each swipeable item
Now for displaying the cards in the stack to swipe we have to create a layout file. Navigate to the app > res > layout > new > layout resource file and name it as course_rv_item and add the below code to it. Comments are added in the code to get to know in more detail.
Step 6: Creating an adapter class
Now for setting data to each card present in the stack, we have to create our adapter class. Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as DeckAdapter and add the below code to it. Comments are added in the code to get to know in more detail.
Step 7: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Now run your app and see the output of the app.