Repeated Text

[89jd]

Hi,

When I try and use the library with a long string, it wraps correctly when fully expanded. However, when it starts collapsing and the text is moved to one line, it still overlaps.

For instance, the String "Lorem Ipsum: Lorem Ipsum Lorem Ipsum Lorem Ipsum", will firstly display as: -

Lorem Ipsum:
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

If I drag down, not quite collapsed, I can see :-

Lorem Ipsum: Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Is this meant to be the case? I.e. when the text has now moved up a line, should it be removed from below?

Thanks

Jack

[johan12345]

I see what you mean. It also happens (less strikingly) with the text in the demo app on my Moto G (device is relevant because text wrapping depends on the screen size):

This is a long title text
displayed in multiple
lines

turns into

This is a long title text displayed...
displayed in multiple
lines.

The repeated text is definitely not something we intended (or even noticed 😉), but the reason for this behavior is that our code tries to to make as much of the title as possible visible in the collapsed state.

We would change the behavior to only showing the text in the collapsed state that is visible on the first line in the expanded state, which would mean:

This is a long title text...
displayed in multiple
lines.

or in your case

Lorem Ipsum:...
Lorem Ipsum
Lorem Ipsum

and in the collapsed state:

This is a long title text... instead of This is a long title text displayed... or
Lorem Ipsum:... instead of Lorem Ipsum: Lorem Ipsum Lorem Ipsum Lorem Ipsum

So we have to weigh up showing duplicated text during the animation against having less text visible in the collapsed state. I am not sure which of those is more desirable.

@raphaelm, what is your opinion about this?

[raphaelm]

There is also the third option of adjusting the text in the second line during the animation, but let's exclude that because it'd lead to a stuttering animation.

I believe the duplicate text is fine to me, as I value the usefulness in the fully collapsed and expanded states more than the correctness during the animation.

[89jd]

Thanks for the quick response!

I think that it just looks quite confusing when you have a title, for instance I had a title that was something along the lines of "Test Test: Test and Test".

This appeared as: -

Test Test: Test and Test
And Test

Which looked quite strange. In terms of what it could display, Would it be possible for it to add more of an alpha to the additional lines, this would be more in keeping with the animation, and also not look as if the duplicated text is part of the title?

Thanks

Jack

[johan12345]

Yes, changing the alpha animation of the additional lines could be a solution. I'll look into that.

[johan12345]

In a6ae43f, I changed the alpha animation to use a FastOutSlowInInterpolator instead of the default linear interpolator. Further changes were needed to make sure that the text that stays the same still stays opaque during the whole animation.

With this new interpolator, the transparency of the text at the midpoint of the animation is increased significantly:

before/after:

@JackED42, @raphaelm, what is your opinion about this?

I could also try to not let both animations happen at the same time so that there is no overlap between them (so first the lower lines disappear and then the rest of the upper line appears), but I fear that would look weird.

[89jd]

I think that it looks better. Can the interpolator change the alpha based on the y, i.e. bottom line is less visible than middle line?

If I get chance, I will check out and take a look at the code, including your new change...

The second option may be worth trying just to see how it looks if it won't be too much work

[raphaelm]

I like the change, I feel it looks a lot better. I don't think the second option (sequential animations) would look nice.

[89jd]

Hi,

Just tested it. Looks great! :)

One problem I can see, which I don't know if you have control of, is that the alpha is on the wrong place at the start of the interpolation. E.g for Aaaa Baaaa: Ccccc Ddddd Eeeee Fffff: -

When starting to scroll, you get: -

Aaaa Baaaa: Ccccc Ddddd
Ccccc Ddddd

1. At the start of the stage the Alpha for "Aaaaa Baaaa:" is fully opaque, the 1st "Ccccc Ddddd" has maybe half transparency, and the second "Ccccc Ddddd" has 4/5th transparency.
2. As you scroll further, the transparency becomes less transparent on the 1st "Ccccc Ddddd" and more on the 2nd.

I think at stage 1, it would be better if the 1st and 2nd "Ccccc Ddddd" had reversed transparency.

Again, I don't know if it is possible, but if you have any ideas or could point me in the right direction, I would be happy to take a look myself.

If this doesn't make sense, just let me know and I will try and take a video with labels or something.

Thanks

Jack!

Ps. Keep up the good work :)

[johan12345]

Hi Jack,

yes, we probably need to play with the animation parameters a little more to make it look better.
The point where the alpha values are set is CollapsingTextHelper:336. The fraction parameter is the one that stores the current position in the animation from 0 to 1. setCollapsedTextBlend sets the alpha value for the text in the first line and setExpandedTextBlend for the other lines.

What you could try to do is maybe using some different (custom?) interpolators there and/or changing the start and end points of the two animations by not using fraction (or 1-fraction) as the parameter for the lerp function directly, but instead something like fraction > 0.2 ? (fraction-0.2) / 0.8 : 0.