How to increase the size of a current focused item on a RecyclerView?

Question

I'm trying to make an horizontal list with a RecyclerView, that when I put the focus on an item, increase the size of this. I want to make this effect:

Do you have any ideas to accomplish this?

I do exactly the same. but has no effect on my `RecyclerList`. I have an image view on my view holder and I want to be bigger when focus. Help me! — Sadeq Shajary, Jul 27 '16 at 04:49
Hi @SadeqShajary, maybe you should apply the focusChangeListener to the root view instead of the imageView itself. This was developed and tested on Android TV, using a remote control. — Skycorsarius, Jul 28 '16 at 19:51
Please don't edit the solution into the question - you should post it as an answer to be consistent with Stack Overflow's Q&A format. — EJoshuaS - Stand with Ukraine, Jan 12 '18 at 14:16

Sebastiano · Answer 1 · 2017-02-13T10:46:34.420

25

I'm imagining something like this:

Create the horizontal RV
When binding the ViewHolder, attach a FocusChangeListener to the root view of the item
When the item gains focus, scale it to make it slightly bigger; when the focus is lost, revert the animation.

static class ViewHolder extends RecyclerView.ViewHolder {

  public ViewHolder(View root) {
    // bind views
    // ...

    // bind focus listener
    root.setOnFocusChangeListener(new View.OnFocusChangeListener() {
      @Override
        public void onFocusChange(View v, boolean hasFocus) {
          if (hasFocus) {
            // run scale animation and make it bigger
          } else {
            // run scale animation and make it smaller
          }
        }
     });
  }
}

edited Feb 13 '17 at 10:46

answered Oct 22 '15 at 16:49

Sebastiano

12,289
6
47
80

2

This Solution only works for Android TV, but not for the Mobile Devices... :-( – Pawan Mar 24 '17 at 16:50
1

@Pawan : have you tried by giving android:focusable="true" android:focusableInTouchMode="true" to your root view in xml – Rankush Kumar Oct 03 '17 at 15:59
2

I had to include `android:clickable="true"` AND `android:focusableInTouchMode="true"` in order for it to work – Yousef Gamal Apr 29 '19 at 03:47

score 19 · Accepted Answer · edited Jan 12 '18 at 23:52

Thanks to dextor answer, I could figure out this answer.

I've used the FocusChangeListener and added animation states to change the size of the view:

static class ViewHolder extends RecyclerView.ViewHolder {

public ViewHolder(final View root) {
    // bind views
    // ...

    // bind focus listener
    root.setOnFocusChangeListener(new View.OnFocusChangeListener() {
         @Override
         public void onFocusChange(View v, boolean hasFocus) {
             if (hasFocus) {
                 // run scale animation and make it bigger
                 Animation anim = AnimationUtils.loadAnimation(context, R.anim.scale_in_tv);
                 root.startAnimation(anim);
                 anim.setFillAfter(true);
             } else {
                 // run scale animation and make it smaller
                 Animation anim = AnimationUtils.loadAnimation(context, R.anim.scale_out_tv);
                 root.startAnimation(anim);
                 anim.setFillAfter(true);
             }
         }
    });
}

And the code for the anims:

scale_in_tv:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXScale="100%"
    android:fromYScale="100%"
    android:toXScale="110%"
    android:toYScale="110%"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>

scale_out_tv:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fromXScale="110%"
    android:fromYScale="110%"
    android:toXScale="100%"
    android:toYScale="100%"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>

How does this differ from my solution, and why was the accepted answer (mine) removed after almost one year? — Sebastiano, Feb 13 '18 at 16:25

How to increase the size of a current focused item on a RecyclerView?

2 Answers2

Linked