How to add swipe functionality on Android CardView?
You'll have to put it inside RecyclerView
(and your CardView
as the only item there)
Then, use ItemTouchHelper.SimpleCallback
to itemTouchHelper.attachToRecyclerView(recyclerView);
It will give you animations and in
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) {
}
you can specify particular action based on the swipe direction.
See full instruction here: Swipe to Dismiss for RecyclerView
Also, you'll have to disable vertical scroll 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 - once you'll try to scroll up or down - you'd see RecyclerView
's end-of-list animations.
Upd:
Here's RecyclerView.Adapter
I used for 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 just a custom 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(...);
}
}
ctzdev
Updated on July 28, 2022Comments
-
ctzdev almost 2 years
I have a single CardView that contains two TextViews and two ImageViews. I want to be able to swipe left and right to "dismiss". I actually want swipe right to send an Intent but that can be done later. For now, I want to be able to dismiss the CardView by swiping left or right. I also want the animation of swiping.
I tried using
romannurik's SwipeDismissTouchListener
but the CardView does not respond to swiping.If anyone has a better solution than
romannurik's
custom listener, please share.Here's 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 I setup the 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 am able to see the log from
canDismiss(...)
but not fromonDismiss(...)
.