Fade out/fade in TextView based on scroll

Question

I have a horizontal RecyclerView in a LinearLayout with a TextView above it, like this:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="7dp"
 android:layout_marginLeft="10dp"
 android:layout_marginBottom="7dp"
 android:textColor="#FFa7a7a7"
 android:textSize="15sp"
 android:text="Hello, Android" />

<android.support.v7.widget.RecyclerView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/recyclerview"
 android:layout_width="match_parent"
 android:layout_height="185dp" />

I want the TextView to fade out when there is a left scroll and the first item in the RecyclerView goes out of view. And want it to fade back in whenever the first item comes into view(through a right scroll). I know that I will have to use addOnScrollChangedListener() to determine when the first item of the recyclerView goes out of view, what I haven't been able to determine is a way to fade out(or fade in) the TextView with the scroll behaviour.

Here's my RecyclerView java snippet:

mRecyclerView = (RecyclerView)rootView.findViewById(R.id.recyclerview);
mRecyclerView.setLayoutManager(getLayoutManager());
mRecyclerView.setHasFixedSize(true);
mRecyclerView.setAdapter(mAdapter);

@pskink That's something that I've already tried but it didn't seem to work. Let me try Daniel's solution too and see if it works — kb_14, Apr 19 '15 at 08:26
his solution is wrong as he uses Animation, you need to setup alpha property based on current scroll value only, not based on initial values and current time — pskink, Apr 19 '15 at 08:28
@pskink Using an Animation won't work for this? I've used it in the past for text fade in/fade out, it seems like it would work in this case. — Daniel Nugent, Apr 19 '15 at 08:33
@pskink okay, so basically, in his solution, once I start the animation, I can't undo it. Am I right? Look at my first comment to his answer. If that's the case, setting alpha should be the fix I need. Sorry, I haven't worked with AlphaAnimation before, so I don't know — kb_14, Apr 19 '15 at 08:34
@DanielNugent as i understand OP problem he wants to fade in/out based only on current scroll value but i may be wrong — pskink, Apr 19 '15 at 08:38
@DanielNugent Using an animation works, in general. But in my case, I want the fading effect to take place along with/based on the scroll of the recyclerview. Sorry if I was not clear enough, but pskink is right — kb_14, Apr 19 '15 at 08:39
I would have to test it, but I think if you set the animation duration to one second, it would fade in or out in one second, and be finished. At that point, it would be ready to fade back in or out again on the next scroll event. I've used Animations to have text repeatedly fade in and fade out, but I've never tested it with a RecyclerView and scrolling events. I'll test it and see how it works with scrolling. — Daniel Nugent, Apr 19 '15 at 08:43
@DanielNugent I don't want it to be finished by itself, I want it to fade out completely only when the scroll reaches a certain point (in this case, first item goes out of view) & vice versa. The degree of how much the textview fades out/in depends on the scroll value of my recyclerview and hence I think `setAlpha()` should do the trick. I any case, I will try out both solutions. Thanks! — kb_14, Apr 19 '15 at 08:48
Ahh, I see now. So you want it to go one shade darker or lighter on each scroll event. Got it. Yeah, using an Animation would not work in that case then. — Daniel Nugent, Apr 19 '15 at 08:52

score 7 · Accepted Answer · edited May 23 '17 at 10:29

Edit: @pskink is correct, an Animation will not work for this particular use case. Using setAlpha() is the only way to get the desired results.

You will have to put this together with a RecyclerView OnScrollListener

This answer should help you with that.

It looks like the hardest part will be determining exactly what position you are at in the scrolling, See this question.

General code structure for OnScrollListener, you will probably need to use trial and error to get the alpha values dialed in to where you want it:

float alpha = 1.0f;
float newAlpha = 1.0f;
int overallXScroll = 0;

mRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
         super.onScrolled(recyclerView, dx, dy);

         //use this value to determine left or right scroll
         overallXScroll = overallXScroll + dx;

         //if scroll left
         float newAlpha = alpha - 0.1f;
         if (newAlpha >= 0){
           textView.setAlpha(newAlpha);
           alpha = newAlpha;
         }

         //if scroll right
         float newAlpha = alpha + 0.1f;
         if (newAlpha <= 1){
           textView.setAlpha(newAlpha);
           alpha = newAlpha;
         }
     }
});

What's the usage of overallXScroll? I don't see it using for boolean check other than setting it value? — Vincent Paing, Apr 11 '18 at 15:38
@Vincent_Paing You're right, in this example it's not used. I think I left it in there just in case someone's specific case would need to use it. — Daniel Nugent, Apr 11 '18 at 18:03

Fade out/fade in TextView based on scroll

1 Answers1