Today we are going to learn an awesome inbuilt functionality provided by design library using Coordinator Layout. CoordinatorLayout is a super-powered FrameLayout. Coordinator Layout is intended for two primary use cases:
So we are going to implement swipe dismiss the CardView with Coordinate Layout. For this we are going to need :
Learn more articles about Coordinator Layout here.
1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.
2. Open app ⇒ build.gradle and add below dependencies to it.
1 2 3 4 |
//dependency for CardView compile 'com.android.support:cardview-v7:25.3.1' //dependency for Coordinator Layout compile 'com.android.support:design:25.3.1' |
3. Now open up your activity_main.xml and place the below code to it. These layout contains CardView inside Coordinator Layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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="com.swipedismisscardview_demo.MainActivity"> <!-- CardView to be dismissed --> <android.support.v7.widget.CardView android:id="@+id/text_card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="4dp" app:cardElevation="4dp" app:contentPadding="10dp"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="@string/cardview_text" android:textColor="@android:color/black" android:textSize="15sp" /> </android.support.v7.widget.CardView> </android.support.design.widget.CoordinatorLayout> |
4. Now to implement SwipeDismissBeahvior we will be needing below code. Here you can set the swipe dismiss direction and after setting SwipeDismissBehavior you have to get the CardView Layout params and set the behavior to Coordinator Layout.
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * method to implement swipe dismiss feature over card view **/ private void implementSwipeDismiss() { SwipeDismissBehavior swipeDismissBehavior = new SwipeDismissBehavior(); swipeDismissBehavior.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_ANY);//Swipe direction i.e any direction, here you can put any direction LEFT or RIGHT CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) textCardView.getLayoutParams(); layoutParams.setBehavior(swipeDismissBehavior);//set swipe behaviour to Coordinator layout } |
5. Finally open your MainActivity.java and place the below code to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
package com.swipedismisscardview_demo; import android.os.Bundle; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.SwipeDismissBehavior; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.CardView; public class MainActivity extends AppCompatActivity { private CardView textCardView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textCardView = (CardView) findViewById(R.id.text_card_view); implementSwipeDismiss(); } /** * method to implement swipe dismiss feature over card view **/ private void implementSwipeDismiss() { SwipeDismissBehavior swipeDismissBehavior = new SwipeDismissBehavior(); swipeDismissBehavior.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_ANY);//Swipe direction i.e any direction, here you can put any direction LEFT or RIGHT CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) textCardView.getLayoutParams(); layoutParams.setBehavior(swipeDismissBehavior);//set swipe behaviour to Coordinator layout } } |
6. Finally, all done. Now you can also make application using Swipe Dismiss Behavior.
Thanks. 🙂
Subscribe to us and get the latest news.
2 Comments
Michelle
Friday, September 15th, 2017Hi there, just tried this out and it works fine. Just wondering if it was possible to add some form of animation to show the card being swiped away? Thanks 🙂
Karique
Tuesday, January 16th, 2018Hello there, did you achieve this? i’m trying to do the same thing.