Android - Motion Layout or animation item to cart

Question

I'm planning to create an animation like all those apps that have a RecyclerView and when click Add to cart does like a screenshot of the item and with animations goes through the screen and ends in the cart icon. And I'm wondering if the Motion Layout is something I need to use no matter what, I know you can control the scenes and everything but perhaps there's another way to do this.

The scenario is :

I have a horizontal scroll view and in one item I have a button that says Add to cart, when I press to it then it animates to another view adding alpha until alpha is 0.

The naming of this animation is seen as Fly to cart animation.

Any hint?

This is my custom view and what I want is when I press the button of an item of my RecyclerView this exact item make it smaller and "fly" with a parabola or something or even a straight line to the number 2 making the item smaller and reducing alpha until it arrives to number 2 and it dissapear, and then animate this 2. When the item arrives to the item 2 it should move the second to the first item like the item was removed.

The idea is something like this : https://www.youtube.com/watch?v=YOsz8_vkfiM&ab_channel=AravindrajPalani but instead of doing a "screenshoot" moving the item it self or perhaps I have to hide the item and then create a copy of it... I don't know

user_18460115 · Answer

Do you mean somthing like this?

Here is How I do it

view_card.xml

Just a typical layout there is no important code here

activity_main.xml

Just a typical layout there is no important code here

CustomAdapter.java

Focus here on the remove(..) function, here when you notify by the function notifyItemRemoved(position) the animation after the card removes going to be applied, you don't need to do anything else.

    List list;
    CustomViewListener listener;

    public CustomAdapter() {
        list = new ArrayList<>();
    }

    public void setListener(CustomViewListener listener) {
        this.listener = listener;
    }

    public void add(Drawable drawable) {
        list.add(drawable);
        notifyDataSetChanged();
    }

    @NonNull
    @Override
    public CustomViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_card, parent, false);
        return new CustomViewHolder(inflate, listener);
    }

    @Override
    public void onBindViewHolder(@NonNull CustomViewHolder holder, int position) {
        holder.bind(list.get(position));
    }


    @Override
    public int getItemCount() {
        return list.size();
    }

    public void remove(Drawable drawable) {
        int position = list.indexOf(drawable);
        list.remove(drawable);
        notifyItemRemoved(position);
    }

    public interface CustomViewListener {
        void onFly(View view, Drawable drawable, int x, int y, int width, int hight);
    }
}

CustomViewHolder.java

Foucse here at the following

initSize() to get the CardView size witch we need later to pass it for the temporary ImageView in the MainActivity
at the binding.button.setOnClickListener we going to get the CardView location and after that we call the function onFly to pass the information we need to the MainActivity

class CustomViewHolder extends RecyclerView.ViewHolder {
    int width = 0, height = 0;
    Drawable drawable;
    CustomAdapter.CustomViewListener listener;
    ViewCardBinding binding;

    public CustomViewHolder(@NonNull View itemView, CustomAdapter.CustomViewListener listener) {
        super(itemView);
        binding = ViewCardBinding.bind(itemView);
        this.listener = listener;
        initSize();
        initEvent();
    }

    private void initSize() {
        ViewTreeObserver treeObserver = binding.card.getViewTreeObserver();
        treeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                binding.card.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                width = binding.card.getMeasuredWidth();
                height = binding.card.getMeasuredHeight();
            }
        });
    }

    public void bind(Drawable drawable) {
        this.drawable = drawable;
        binding.imageView.setImageDrawable(drawable);
        binding.card.setVisibility(View.VISIBLE);
    }

    private void initEvent() {
        binding.button.setOnClickListener(view -> {
            int[] location = new int[2];
            binding.card.getLocationInWindow(location);
            int x = location[0];
            int y = location[1];
            listener.onFly(binding.card, drawable, x, y, width, height);
            binding.card.setVisibility(View.INVISIBLE);
        });
    }
}

MainActivity.java