Android Build swipe ListView item from right to left show delete button (overlay on listview item)

Question

I want to create swipe listview, when user swipe right to left on an listview item, user will be show some button options.

It look like below image :

I have been seen some swipe listview library, but it isn't what I need.

Can anyone help me suggest to me the library that can do build my listview?

Thanks.

Answer 1

I used to have the same problem as your, I couldn't find a library to swipe to show other buttons so I ended up writing a new library for myself. Check out my library: SwipeRevealLayout

For your specific layout, the usage is the following:

Add dependencies:

compile 'com.chauthai.swipereveallayout:swipe-reveal-layout:1.0.0'

In your row.xml file:

<com.chauthai.swipereveallayout.SwipeRevealLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:mode="normal"
        app:dragEdge="right">

        <!-- Your delete and edit buttons layout here -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <!-- put your buttons here -->

        </LinearLayout>

        <!-- Your main layout here -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</com.chauthai.swipereveallayout.SwipeRevealLayout>

And finally in your adapter (RecyclerView or ListView) class, when you bind your view, use ViewBinderHelper:

public class Adapter extends RecyclerView.Adapter {
  // This object helps you save/restore the open/close state of each view
  private final ViewBinderHelper viewBinderHelper = new ViewBinderHelper();

  @Override
  public void onBindViewHolder(ViewHolder holder, int position) {
    // get your data object first.
    YourDataObject dataObject = mDataSet.get(position); 

    // Save/restore the open/close state.
    // You need to provide a String id which uniquely defines the data object.
    viewBinderHelper.bind(holder.swipeRevealLayout, dataObject.getId()); 

    // do your regular binding stuff here
  }
}

Answer 2

You need to add GestureListener to the main layout of your listview cells. For this take a look at this: https://developer.android.com/training/gestures/detector.html

Also you need to set the layout of your cells as RelativeLayout. Doing this and you can overlay items on top of eachother. Next what you need to do is to set the visibility of these overlay items as GONE at first and listen to user fling gesture. If you detected one, make the overlay items VISIBLE so user can choose it.

A.

Answer 3

implementation group: 'com.apachat', name: 'swipereveallayout-android', version: '1.1.2'

This dependency will also include swipe reveal layout as the latest version of gradle is not supporting - 'com.chauthai.swipereveallayout:swipe-reveal-layout:1.0.0'

Example Below

<com.apachat.swipereveallayout.core.SwipeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/swipelayout"
    app:dragEdge="right"
    app:mode="same_level">

   <!--Swipe Layout-->
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="15dp"
    android:weightSum="2">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/like"
        android:layout_margin="10dp"
        android:text="Like"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/delete"
        android:layout_margin="10dp"
        android:text="Delete"/>
</LinearLayout>


<!--Main Layout-->

<RelativeLayout
    android:padding="15dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/swipeimg"
    android:layout_marginEnd="20dp"
    />
    <LinearLayout
        android:layout_toEndOf="@id/swipeimg"
        android:layout_alignBottom="@id/swipeimg"
        android:id="@+id/linearswipe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:weightSum="2">
        <TextView
            android:layout_width="match_parent"
            android:padding="10dp"
            android:gravity="bottom"
            android:layout_height="0dp"
            android:fontFamily="sans-serif-condensed-medium"
            android:layout_weight="1"
            android:id="@+id/nameswipe"
            android:textSize="22sp"
            android:text="Name"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:padding="10dp"
            android:textSize="16sp"
            android:fontFamily="sans-serif-condensed-medium"
            android:gravity="top"
            android:layout_weight="1"
            android:id="@+id/byswipe"
            android:text="by person"/>
    </LinearLayout>
</RelativeLayout>

</com.apachat.swipereveallayout.core.SwipeLayout>