Scale animation when user touches a recyclerview item

Question

I am developing an app where there is a recyclerview with some cards and would like to create a zoom in effect when the user touches the card and zoom out when release the touch. The previous and next cards should respect the size of the card as it expands, not behind or forward

I would like to create something similar to this layout manager, but by touching the screen instead of scrolling.

   //RecyclerView
    recyclerView = view.findViewById(R.id.recyclerView)

    recyclerView.setHasFixedSize(false)

    recyclerView.layoutManager = CenterZoomLayoutManager(activity, LinearLayoutManager.VERTICAL, false)

How to create this effect? Thanks in advance.

What have you completed so far attempting to achieve this? Are you able to show us the code for us to look at and help? — Matthew, Sep 06 '19 at 22:26

score 10 · Answer 1 · answered Sep 12 '19 at 09:04

You can achieve something similar with stateListAnimator. In this example I attached stateListAnimator to recyclerView item. When item is pressed scale is 1, when not pressed scale is 0.8

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/item_animal_height"
    android:background="#f00"
    android:stateListAnimator="@animator/list_animator"/>

res/animator/list_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:valueTo="1"/>

            <objectAnimator android:propertyName="scaleY"
                android:valueTo="1"/>
        </set>
    </item>
    <item
        android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:valueTo="0.8"/>

            <objectAnimator android:propertyName="scaleY"
                android:valueTo="0.8"/>
        </set>
    </item>
</selector>

SHIVAKANTH R · Answer 2 · 2021-01-03T10:14:52.297

Please use below code in onBindViewHolder to achieve item scaling

    itemView.setOnTouchListener { view, motionEvent ->
    when (motionEvent.action) {
         MotionEvent.ACTION_DOWN -> {                  
           view.animate().scaleX(1.10f).scaleY(1.10f).setDuration(100).start()
           (itemView.parent as RecyclerView).addOnItemTouchListener(object : 
           RecyclerView.OnItemTouchListener {
             override fun onInterceptTouchEvent(rv: RecyclerView, 
             e: MotionEvent): Boolean {
                   if (rv.scrollState == RecyclerView.SCROLL_STATE_DRAGGING) {
             view.animate().scaleX(1.0f).scaleY(1.0f).setDuration(100).start() 
             }
             return false               }
             override fun onTouchEvent(rv: RecyclerView, e: MotionEvent) {}
             override fun 
             onRequestDisallowInterceptTouchEvent(disallowIntercept: 
                          Boolean) { }})
             }
         MotionEvent.ACTION_UP -> {                     
               view.animate().scaleX(1.0f).scaleY(1.0f).setDuration(100).start()
             }
         }
         true
      }

Scale animation when user touches a recyclerview item

2 Answers2