Comments (9)
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?
from multiline-collapsingtoolbar.
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.
from multiline-collapsingtoolbar.
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
from multiline-collapsingtoolbar.
Yes, changing the alpha animation of the additional lines could be a solution. I'll look into that.
from multiline-collapsingtoolbar.
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:
@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.
from multiline-collapsingtoolbar.
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
from multiline-collapsingtoolbar.
I like the change, I feel it looks a lot better. I don't think the second option (sequential animations) would look nice.
from multiline-collapsingtoolbar.
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
- 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.
- 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 :)
from multiline-collapsingtoolbar.
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
.
from multiline-collapsingtoolbar.
Related Issues (20)
- Align background with expanded text HOT 3
- Scrim color doesn't persist HOT 2
- Text get duplicated if it's not in English HOT 1
- Revert to single line when changing title text size with TextAppearance HOT 1
- Multiline not working with TextSize<21 SP HOT 4
- How to fix Toolbar Background color?
- Error HOT 2
- How to enlarge image on a backdrops HOT 1
- expandedTitleMarginEnd not working
- New line without the need HOT 5
- Failed to resolve: net.opacapp:multiline-collapsingtoolbar:1.6.0 HOT 6
- Link versions to support library dependency version HOT 3
- Update library to Support Library version 27.1.1 HOT 1
- Add subtitles HOT 1
- crash-CollapsingTextHelper#calculateUsingTextSize HOT 2
- Update library to Support Library version 28.0.0 HOT 3
- Migrating to AndroidX HOT 7
- Custom Font family HOT 1
- Duplicated title HOT 7
- JCenter migration HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from multiline-collapsingtoolbar.