How to add swipe functionality to Android CardView?

Question

I have one CardView that contains two TextViews and two ImageViews. I want to be able to scroll left and right to "fire". In fact, I want you to skip directly to send the intention, but this can be done later. At the moment, I want to remove CardView by scrolling left or right. I also need scroll animation.

I tried using romannurik SwipeDismissTouchListener , but CardView does not respond to scrolling.

If anyone has a better solution than romannurik's custom listener, share it.

Here is my CardView layout:

 <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/generate" map:cardCornerRadius="@dimen/_3sdp" map:cardElevation="@dimen/_8sdp" android:id="@+id/restaurantContainer"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/thumbnail" android:layout_width="@dimen/_75sdp" android:layout_height="@dimen/_75sdp" android:layout_margin="@dimen/_5sdp" /> <ImageView android:id="@+id/rating" android:layout_width="@dimen/_75sdp" android:layout_height="@dimen/_15sdp" android:layout_margin="@dimen/_5sdp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TextView android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/_5sdp" android:gravity="top" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/categories" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_margin="@dimen/_5sdp" android:textAppearance="?android:attr/textAppearanceMedium" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.google.android.gms.maps.MapView android:id="@+id/mapView" android:layout_width="fill_parent" android:layout_height="fill_parent" map:cameraZoom="14" map:liteMode="true" map:mapType="normal" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> 

How to configure SwipeDismissTouchListener:

 RelativeLayout rootLayout; CardView restaurantCardView; ... public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { rootLayout = (RelativeLayout) inflater.inflate(R.layout.fragment_main, container, false); restaurantCardView = (CardView) rootLayout.findViewById(R.id.restaurantContainer); restaurantCardView.setOnTouchListener(new SwipeDismissTouchListener(restaurantCardView, null, new SwipeDismissTouchListener.DismissCallbacks() { @Override public boolean canDismiss(Object token) { Log.d("Chris", "canDismiss() called with: " + "token = [" + token + "]"); return true; } @Override public void onDismiss(View view, Object token) { Log.d("Chris", "onDismiss() called with: " + "view = [" + view + "], token = [" + token + "]"); } })); .... return rootLayout; 

I can see the magazine from canDismiss(...) , but not from onDismiss(...) .

Answer 1

You will have to put it inside the RecyclerView (and your CardView as the only element there)

Then use ItemTouchHelper.SimpleCallback to itemTouchHelper.attachToRecyclerView(recyclerView);

This will give you animation in

 @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) { } 

You can specify a specific action depending on the direction of movement.

See full instructions here: Swipe the screen for the RecyclerView

In addition, you need to disable vertical scrolling in RecyclerView :

 public class UnscrollableLinearLayoutManager extends LinearLayoutManager { public UnscrollableLinearLayoutManager(Context context) { super(context); } @Override public boolean canScrollVertically() { return false; } } ..... RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new UnscrollableLinearLayoutManager(this)); recyclerView.setAdapter(new RestaurantCardAdapter()); 

Otherwise, as soon as you try to scroll up or down, you will see an animation of the end t2> end-of-list.

Upd:

Here's the RecyclerView.Adapter I used for the test:

 private class RestaurantCardAdapter extends RecyclerView.Adapter { @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new RestaurantViewHolder(new RestaurantCard(parent.getContext())); } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {} @Override public int getItemCount() { return 1; } private class RestaurantViewHolder extends RecyclerView.ViewHolder { public RestaurantViewHolder(View itemView) { super(itemView); } } } 

RestaurantCard is a regular View (extends CardView in our case):

 public class RestaurantCard extends CardView { public RestaurantCard(Context context) { super(context); initialize(context); } public RestaurantCard(Context context, AttributeSet attrs) { super(context, attrs); initialize(context); } private void initialize(Context context){ LayoutInflater.from(context).inflate(R.layout.card, this); // ImageView imageView = (ImageView)getView.findViewById(...); } }