Swipe to Add view in android

Question

I want to achieve something like the below gif:

What I have done so far:

I am using a swipelayout using I am able to implement the part where if you swipe the row item, it shows you the "Add to Cart" icon but I am not able to implement the animation where it zooms in the cart icon and add it to cart (I am not able to create a hook where I can call the addToCart function).

Below is my code:

• Row XML File:

  <RelativeLayout
      android:id="@+id/swipe_view"
      android:layout_width="120dp"
      android:layout_height="match_parent"
      android:background="@color/colorPrimary"
      android:minWidth="96dp">
  
      <ImageView
          android:id="@+id/add_to_cart"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_centerVertical="true"
          android:layout_marginLeft="@dimen/activity_margin"
          android:layout_marginStart="@dimen/activity_margin"
          android:background="?attr/selectableItemBackgroundBorderless"
          android:clickable="true"
          android:padding="@dimen/activity_margin"
          android:scaleType="center"
          android:src="@drawable/ic_menu_cart"/>
  
  </RelativeLayout>
  
  <RelativeLayout
      android:id="@+id/restaurant_menu_details_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingBottom="@dimen/half_activity_margin"
      android:paddingLeft="@dimen/activity_margin"
      android:paddingRight="@dimen/activity_margin"
      android:paddingTop="@dimen/half_activity_margin">
  
      <ImageView
          android:id="@+id/item_image"
          android:layout_width="56dp"
          android:layout_height="56dp"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_centerVertical="true"
          android:scaleType="centerCrop"
          tools:src="@drawable/placeholder_restaurant"/>
  
      <TextView
          android:id="@+id/item_price"
          style="@style/secondary_tv"
          fontPath="@string/ubuntu_light"
          android:layout_width="48dp"
          android:layout_alignParentEnd="true"
          android:layout_alignParentRight="true"
          android:layout_centerVertical="true"
          android:layout_marginBottom="@dimen/half_activity_margin"
          android:layout_marginLeft="@dimen/half_activity_margin"
          android:gravity="center_horizontal"
          android:maxLines="2"
          tools:text="5KD"/>
  
  
      <LinearLayout
          android:id="@+id/restaurant_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_centerVertical="true"
          android:layout_toEndOf="@+id/item_image"
          android:layout_toLeftOf="@+id/item_price"
          android:layout_toRightOf="@+id/item_image"
          android:layout_toStartOf="@+id/item_price"
          android:orientation="vertical">
  
          <TextView
              android:id="@+id/item_name"
              fontPath="@string/ubuntu_mono_regular"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginLeft="@dimen/half_activity_margin"
              android:layout_marginTop="@dimen/half_activity_margin"
              android:gravity="start"
              android:textAllCaps="true"
              android:textColor="@color/black_primary_text_color"
              android:textSize="@dimen/medium_text"
              tools:text="Restaurant Name"/>
  
          <TextView
              android:id="@+id/item_desc"
              style="@style/secondary_tv"
              fontPath="@string/ubuntu_light"
              android:layout_marginBottom="@dimen/half_activity_margin"
              android:layout_marginLeft="@dimen/half_activity_margin"
              android:layout_marginTop="4dp"
              android:ellipsize="end"
              android:maxLines="2"
              tools:text="Restaurant Description, max 1 line"/>
      </LinearLayout>
  
  </RelativeLayout>
  

• Java Code

from RecyclerView Adapter:

SwipeLayout swipeLayout = (SwipeLayout) itemView.findViewById(R.id.swipe);
    swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
                            @Override
                            public void onStartOpen(SwipeLayout layout) {

                            }

                            @Override
                            public void onOpen(SwipeLayout layout) {

                            }

                            @Override
                            public void onStartClose(SwipeLayout layout) {

                            }

                            @Override
                            public void onClose(SwipeLayout layout) {

                            }

                            @Override
                            public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
        // i tried leveraging the leftOffset which tells me the position of the //layout on the screen but because it is called multiple times, It was //adding many entries to the cart in just one swipe :(
                            }

                            @Override
                            public void onHandRelease(SwipeLayout layout, float xvel, float yvel) {

                            }
                        });

I would really appreciate if anyone can suggest a better way to fix this or any open-source library which does such a thing.

Many thanks!

PS: Please add a comment if you need more information from me in order to help me. :)

Answer 1

what I'll write is a best guess based on the information you gave, but it seems that it's all right there:

@Override
public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
    float percent = ((float)leftOffset/((float)totalWidth));
    // use `percent` to animate the icon, something like:
    icon.setAlpha(percent);
}

@Override
public void onOpen(SwipeLayout layout) {
    // here is the swipe fully open
    addToCart(item); // create the method
    layout.close(); // close the layout again
}