Android RecyclerView items expand on focus while scrolling

Question

I am trying to achieve an effect for my Android TV app so that views expand while they're focused.

I did that by animating the ViewHolder's main view's LayoutParams.

It works fine but the problem is that when i scroll towards the end of the view (Horizontal LinearLayout) the view expansion is not aligned with the end of the view, so it causes a really weird effect.

Theres my code:

holder.m_view.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if (b)
                {
                    ResizeAnimation anim = new ResizeAnimation(view, 600, view.getWidth());
                    anim.setDuration(200);
                    anim.setInterpolator(new AccelerateDecelerateInterpolator());
                    view.startAnimation(anim);
                }
                else
                {
                    ResizeAnimation anim = new ResizeAnimation(view, 400, view.getWidth());
                    anim.setDuration(200);
                    anim.setInterpolator(new AccelerateDecelerateInterpolator());
                    view.startAnimation(anim);
                }

            }
        });

While ResizeAnimation is my own class who changes the view's LayoutParams.

How do I solve the strange scrolling problem?

Thanks.

Sadly no. I had to switch to using Android Leanback’s libraries, which takes care that the viewed item is always in the middle of the view, so this does not happen there — gkpln3, Aug 29 '18 at 06:04

score 0 · Answer 1 · answered May 09 '20 at 01:10

Add this to the ViewHolder

itemView.setOnFocusChangeListener((v, hasFocus) -> {
            if (hasFocus) {
                ViewCompat.animate(v).scaleX(1.12f).scaleY(1.12f).setDuration(30).translationZ(1).start();
            } else {
                ViewCompat.animate(v).scaleX(1.0f).scaleY(1.0f).setDuration(10).translationZ(0).start();
            }
        });

Rajendra · Answer 2 · 2022-02-04T18:09:37.597

This worked for me, I just need to set the white outline on the focused item.

holder.itemView.setOnFocusChangeListener { focusedView, hasFocus ->
            if (hasFocus) {
                focusedView.findViewById<LinearLayout>(R.id.linearlyt_gallery_item)                
                    .setBackgroundResource(R.drawable.selector_imageview_focus)
            } else {
                focusedView.findViewById<LinearLayout>(R.id.linearlyt_gallery_item)
                    .setBackgroundResource(0)
            }
        }

//selector_imageview_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize="true">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="@dimen/imageview_outline" android:color="#FFFFFF"/>
            <padding android:left="@dimen/imageview_outline"
                android:top="@dimen/imageview_outline"
                android:right="@dimen/imageview_outline"
                android:bottom="@dimen/imageview_outline" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="@dimen/imageview_outline" android:color="#FFFFFF"/>
            <padding android:left="@dimen/imageview_outline"
                android:top="@dimen/imageview_outline"
                android:right="@dimen/imageview_outline"
                android:bottom="@dimen/imageview_outline" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="@dimen/imageview_outline" android:color="#FFFFFF"/>
            <padding android:left="@dimen/imageview_outline"
                android:top="@dimen/imageview_outline"
                android:right="@dimen/imageview_outline"
                android:bottom="@dimen/imageview_outline" />
        </shape>
    </item>
</selector>

// imageview_outline= 2dp

score 0 · Answer 3 · answered Feb 04 '22 at 18:51

Add a this view //activity view

androidx.constraintlayout.widget.Placeholder

to be center or desire position on of your screeen

Create Listener interface with FocusSwapTo(v) method

add the call back interface in RecycleListAdapter

itemView.setOnFocusChangeListener((v, hasFocus) -> {
            if (hasFocus) { 
           if(listerner!=null)
           listerner.FocusSwapTo(v)
            }
        });

//// main activity implement callback

@override
public void FocusSwapTo(View view){
placeholder.setContentId(view.getId());    
}

Android RecyclerView items expand on focus while scrolling

3 Answers3