[CollapsingToolbarLayout] Allow multiple lines of text in expanded state #413

johan12345 · 2019-06-29T15:28:44Z

closes #6 and was also discussed in https://issuetracker.google.com/issues/136120586, where you said you would welcome a PR.

We have implemented the possibility to use multiple lines of text as a title in the collapsing app bar. The additional lines are displayed in the expanded state and will be hidden in the collapsed state, like this:

This is based on the work of @raphaelm and me as well as a few contributors in the multiline-collapsingtoolbar library, which is based on the CollapsingToolbarLayout code of the Android Design Support library (predecessor of Material Components) and has already become quite popular.

However, as discussed in opacapp/multiline-collapsingtoolbar#62, it would be quite difficult to update our library with support for the new Material Components and AndroidX libraries, as many of the interfaces we are calling are not part of the public API and thus can only be called from the Material Components library itself. Therefore, it would be great if this feature could instead be included in the official Material Components library.

In addition to copying over the adjustments from our library into the CollapsingTextHelper codebase, I also added a demo in the catalog app to showcase this new feature.

johan12345 · 2019-07-02T12:56:15Z

As the Travis CI build is also failing on master, I'm assuming these test failures are not due to my changes.

lib/java/com/google/android/material/internal/CollapsingTextHelper.java

cketcham · 2019-07-10T18:29:14Z

@johan12345 When I run the demo in the catalog I see the text is black instead of white. Do you see that as well?

cketcham · 2019-07-10T20:05:42Z

It looks as though there might be a bug in RTL as well? If you enable pseudolocales for the catalog, it causes overlapping text:

johan12345 · 2019-07-10T20:14:40Z

@johan12345 When I run the demo in the catalog I see the text is black instead of white. Do you see that as well?

Yes, I see that as well, but the same happens with the original Collapsing Demo, also on master. Seems like the default style for the CollapsingToolbarLayout is not correctly set. It works correctly when switching to the dark theme in the main activity.

dsn5ft · 2019-07-10T20:55:40Z

@johan12345 When I run the demo in the catalog I see the text is black instead of white. Do you see that as well?

Yes, I see that as well, but the same happens with the original Collapsing Demo, also on master. Seems like the default style for the CollapsingToolbarLayout is not correctly set. It works correctly when switching to the dark theme in the main activity.

@johan12345 Ah you can set a theme overlay on your AppBarLayout (android:theme="@style/ThemeOverlay.Catalog.AppBarLayout") to fix the text color issue, similar to cat_topappbar_collapsing_fragment.xml (updated recently in d3b7c72).

johan12345 · 2019-07-10T20:58:54Z

@johan12345 Ah you can set a theme overlay on your AppBarLayout (android:theme="@style/ThemeOverlay.Catalog.AppBarLayout") to fix the text color issue, similar to cat_topappbar_collapsing_fragment.xml (updated recently in d3b7c72).

Okay, then I should better rebase onto master first, right?

It looks as though there might be a bug in RTL as well? If you enable pseudolocales for the catalog, it causes overlapping text

Indeed, there's something wrong here. I will try to look into that... Probably, the calculations in CollapsingTextHelper.java#652 and CollapsingTextHelper.java#573 need to have a special case for RTL, but I'm not sure how that would need to be calculated to get the same result.

I previously only tested the "force RTL layout" option in developer options, which looked fine.

johan12345 · 2019-07-11T15:58:59Z

Hmm, I played around with the RTL issue for a couple of hours, but had no success so far. It's really difficult as while the text goes from right to left, the x-positions of things on the display still need to be calculated from the left... Some help would be appreciated!

dsn5ft · 2019-07-11T16:03:05Z

@johan12345 Ah you can set a theme overlay on your AppBarLayout (android:theme="@style/ThemeOverlay.Catalog.AppBarLayout") to fix the text color issue, similar to cat_topappbar_collapsing_fragment.xml (updated recently in d3b7c72).

Okay, then I should better rebase onto master first, right?

Yep I think the theme overlay was updated after this PR was created.

johan12345 · 2019-07-11T16:07:58Z

@johan12345 Ah you can set a theme overlay on your AppBarLayout (android:theme="@style/ThemeOverlay.Catalog.AppBarLayout") to fix the text color issue, similar to cat_topappbar_collapsing_fragment.xml (updated recently in d3b7c72).

Okay, then I should better rebase onto master first, right?

Yep I think the theme overlay was updated after this PR was created.

Okay, I rebased and applied the ThemeOverlay now 👍

dsn5ft · 2019-07-11T16:51:15Z

@johan12345 Ah you can set a theme overlay on your AppBarLayout (android:theme="@style/ThemeOverlay.Catalog.AppBarLayout") to fix the text color issue, similar to cat_topappbar_collapsing_fragment.xml (updated recently in d3b7c72).

Okay, then I should better rebase onto master first, right?

Yep I think the theme overlay was updated after this PR was created.

Okay, I rebased and applied the ThemeOverlay now 👍

Great. Oh and you should be able to remove the style="?attr/catalogToolbarStyle" on the CollapsingToolbarLayout as well, similar to d3b7c72.

johan12345 · 2019-07-17T20:37:08Z

I got one part (position of the expanded text) fixed for RTL, but collapsed and cross-section text are still off...

cketcham · 2019-07-22T13:02:04Z

lib/java/com/google/android/material/internal/CollapsingTextHelper.java

+      if (isRtl) {
+        currentExpandedX = x + textLayout.getLineLeft(0) - expandedFirstLineDrawX * 2 +
+            currentBounds.width() - textLayout.getWidth() * scale;
+        currentCollapsedX = x; //+ currentBounds.width() - collapsedTextWidth * scale;


Thanks for working on this!

It looks like currentCollapsedX is always just x in the end like it was before? Also collapsedTextWidth isn't used because it's commented out here. But it does look like this does fix the x position of the expanded text.

Yep, that was an unfinished try to also correct the position of the collapsed text, but it didn't work out this way.

I currently have a new approach where I try to adjust the calculateBaseOffsets function to directly calculate the correct separate x positions for the collapsed and expanded text (in LTR text they are the same, but not in RTL because they are aligned on the right side instead of the left) instead of adjusting them afterwards in draw(). Probably that approach is much better, but it's also not working correctly yet... should I push it to another branch so that you can take a look?

I'm not sure when I'll be able to take a look to try to help identify the problem based on other priorities that we have. But I still think it would be useful to push what you have for now.

Okay, I force-pushed the new approach here and kept the previous one as a backup on our multiline-collapsingtoolbar-old branch.

Can you rebase the branches on master? We made a change recently which is preventing me from pulling them in. thanks!

Okay, should now both be rebased. I accidentally committed the pseudoLocalesEnabled true in the build.gradle, that's probably what caused the conflict. Sorry!

isaklilja · 2019-08-08T06:37:29Z

Any updates on this?

johan12345 · 2019-08-08T06:40:34Z

@isaklilja As you can see, we are still trying to get it to work correctly with RTL text. I will be on vacation next week, so probably no more updates from me until after that.

shbhmnk · 2019-08-26T08:43:47Z

@johan12345 @cketcham Any new development on this. Waiting for the multiline support so that we can use in out app.

Thanks.

johan12345 · 2019-08-26T16:23:50Z

@shubh10 I have still not found a way to make it work correctly with RTL text. If any of you can help, that would be greatly appreciated. If you do not need RTL support, you can use our current version via JitPack for now, which is what we are also doing currently:

// in your dependencies block, replace the material-components-android library with:
implementation 'com.github.opacapp:material-components-android:d290745a71'
// in your repositories block, add:
maven { url "https://jitpack.io" }

johan12345 · 2019-12-04T16:21:42Z

Hi, I have rebased the branch onto the current master and moved our multiline code to a separate MultilineCollapsingTextHelper class and also restored the original CollapsingTextHelper. In CollapsingToolbarLayout, the multiline parameter needs to be set to true to opt-in for the multiline feature.

Of course, this results in some duplicated code, especially since MultilineCollapsingTextHelper is a completely separate class and not a subclass of CollapsingTextHelper (which is final and also has many private variables).

But this should mean that the internal tests should work fine, as the default behavior will not change compared to the previous version. @ldjcmu, could you check this?

milosmns · 2019-12-11T14:24:46Z

I think that some duplication is fine for the rest of us who desperately need this feature built-in. You can create an improvement ticket to clean up the tech debt in the next release, and have a release for us? :)

This PR has gone back and forth for a long time, perhaps its review can be prioritized?

ymarian

Can you explain this commit? Can we just fallback to start rather than mutate the given value?

027067d

johan12345 · 2019-12-18T16:05:47Z

If we would fall back to start, that would mean that if the user specifies only the vertical gravity, this would be overridden. Therefore, I instead mutate the given value to only replace the byte for the horizontal gravity.

ymarian · 2019-12-18T19:12:47Z

@johan12345 I understand but you always either check with RELATIVE_HORIZONTAL_GRAVITY_MASK or RELATIVE_VERTICAL_GRAVITY_MASK and you have a default do the same as START so not sure why it's necessary

ymarian · 2019-12-18T19:14:47Z

I'm splitting this into more manageable pieces btw, no need to keep updating this pr.

johan12345 · 2020-01-02T13:58:21Z

@johan12345 I understand but you always either check with RELATIVE_HORIZONTAL_GRAVITY_MASK or RELATIVE_VERTICAL_GRAVITY_MASK and you have a default do the same as START so not sure why it's necessary

Hm, you're right. Maybe it was necessary earlier but not in the current state.

ArcherEmiya05 · 2020-01-24T09:20:39Z

I was just confuse for the fork library should I use this com.github.opacapp:material-components-android:d290745a71 or net.opacapp:multiline-collapsingtoolbar:27.1.1? Which one is the stable and updated?

johan12345 · 2020-01-24T09:26:09Z

@ArcherEmiya05 net.opacapp:multiline-collapsingtoolbar:27.1.1 is the latest stable version, but only compatible with Android Design Support Library 27.1.1 (quite old).

com.github.opacapp:material-components-android:d290745a71 is our new fork that we are trying to get merged into the official material-components-android library with this PR. Thus, it is compatible with the newest AndroidX libraries. It also includes some additional fixes that were made after the net.opacapp:multiline-collapsingtoolbar:27.1.1 release. But, there can be some problems if you use it together with other libraries that depend on material-components-android, because contrary to net.opacapp:multiline-collapsingtoolbar:27.1.1, com.github.opacapp:material-components-android:d290745a71 needs to replace the material-components-android library in your build.gradle.

ArcherEmiya05 · 2020-01-24T09:54:54Z

@ArcherEmiya05 net.opacapp:multiline-collapsingtoolbar:27.1.1 is the latest stable version, but only compatible with Android Design Support Library 27.1.1 (quite old).

com.github.opacapp:material-components-android:d290745a71 is our new fork that we are trying to get merged into the official material-components-android library with this PR. Thus, it is compatible with the newest AndroidX libraries. It also includes some additional fixes that were made after the net.opacapp:multiline-collapsingtoolbar:27.1.1 release. But, there can be some problems if you use it together with other libraries that depend on material-components-android, because contrary to net.opacapp:multiline-collapsingtoolbar:27.1.1, com.github.opacapp:material-components-android:d290745a71 needs to replace the material-components-android library in your build.gradle.

One more thing, can I also add subtitle on the CollapsingToolbar?

johan12345 · 2020-01-28T07:38:51Z

One more thing, can I also add subtitle on the CollapsingToolbar?

@ArcherEmiya05 That's not something our implementation currently supports. It might be possible to just add a custom TextView to the AppBarLayout for that, but I don't have an example handy.

ArcherEmiya05 · 2020-01-29T08:36:35Z

One more thing, can I also add subtitle on the CollapsingToolbar?

@ArcherEmiya05 That's not something our implementation currently supports. It might be possible to just add a custom TextView to the AppBarLayout for that, but I don't have an example handy.

Thanks for the information :)

bazinac · 2020-02-08T13:11:41Z

Hi guys, is there chance that these changes might get merged anytime soon? Such a feature (multiline title) will be very handy.

adhirajsinghchauhan · 2020-02-10T16:28:28Z

@bazinac There are issues with RTL text, which haven't been fixed yet.

@johan12345 I've managed to add subtitle support as well. What do you think will be better? Finishing this PR up first, and then creating another one for subtitle support? Or shall we do it together?

ymarian · 2020-02-10T19:37:06Z

@johan12345 I finally got some time to work on this. Are you interested in continuing from 83e4e47 ?

I think there might be a few bugs so I left the API restricted. The current implementation seems to work ok and it's not causing any screenshots changes on our side.
We still need to add the demo and some of the attributes. I wouldn't add all of them to start like spacing and multiplier. Let me know what you think.

Also RTL orientation actually works but an RTL language does not. Let me know if you can take a look and you have other thoughts.

Don't think it's worth implementing jelly bean for now either.

johan12345 · 2020-02-10T21:04:52Z

@johan12345 I've managed to add subtitle support as well. What do you think will be better? Finishing this PR up first, and then creating another one for subtitle support? Or shall we do it together?

@adhirajsinghchauhan Well, in the end, that's something for Google to decide (@ymarian), but I would say this is already complicated enough that subtitles should better be done in a separate PR.

@johan12345 I finally got some time to work on this. Are you interested in continuing from 83e4e47 ?

@ymarian
Thank you! Yes, I will try to take a look in the next few days.

I think there might be a few bugs so I left the API restricted. The current implementation seems to work ok and it's not causing any screenshots changes on our side.
We still need to add the demo and some of the attributes. I wouldn't add all of them to start like spacing and multiplier. Let me know what you think.

Okay, yeah, the demo should be quite straightforward to add.
The maxLines attribute is definitely needed. I myself don't need the line spacing customization at the moment, but it was requested (opacapp/multiline-collapsingtoolbar#29) and contributed (opacapp/multiline-collapsingtoolbar#45) to our library, so we should add it at some point.

Also RTL orientation actually works but an RTL language does not. Let me know if you can take a look and you have other thoughts.

Yes, I think that's what we had seen earlier as well - "force RTL layout" works, but RTL languages (+ pseudolocales) don't. RTL is more difficult for this, because in LTR the x positions (which are always calculated from the left) of the collapsed and expanded texts are the same, but not necessarily in RTL. That's why I tried to implement the calculation of the separate positions in opacapp@8f012b3, but I haven't got it to work unfortunately.

Don't think it's worth implementing jelly bean for now either.

Yeah, that's probably fine.

bazinac · 2020-02-10T22:06:17Z

I would absolutely love to have subtitle solved as well. At the moment, we are using custom text view in the appBar and its not all that nice. I believe that subtitle would be oftentimes handy feature, due to the nature of the CollapsingToolbarLayout.

Anyways, keep up the good work, I really appreciate your effort and I believe google does so as well :)

johan12345 · 2020-02-11T08:04:11Z

@ymarian So, on a new branch, I have now added the maxLines attribute and the demo.

ymarian · 2020-02-11T14:55:45Z

@johan12345 Thanks a lot, that looks good to me, I can merge that in and close this PR. Any outstanding bugs can be addressed in different PRs or people can file bugs as they start to test.

Sounds good?

johan12345 · 2020-02-11T14:57:48Z

That sounds good, thank you! 🎉

which now contains a fully working implementation of the multiline collapsing toolbar, yay! 🎉 (see also material-components/material-components-android#413)

katajona · 2021-04-12T10:48:50Z

There was one functionality that was lost when integrating this library. I can have multiline text but the width is still limited because of the menu items as you can see here:

In the multilinecollapsingtoolbar library the width was not limited which allowed a lot better design:

Do you ever plan to put this functionality back? There are a few questions where people are trying to fix this issue(in general for a collapsing toolbar) for example https://stackoverflow.com/questions/27502345/toolbar-title-full-width

johan12345 · 2021-04-12T15:46:54Z

@katajona Sorry, I'm no longer working at rami.io, the company who is developing the opacapp project and the multiline-collapsingtoolbar library, and making the calculations involved in in the multiline animation work correctly is quite complicated, so I unfortunately don't have time to look into this right now.

I don't remember exactly anymore, but it could be that this functionality was removed either

(on purpose) to make sure that the result when the multiline functionality is disabled exactly matches the previous version of the library, which was necessary to fulfill Google's internal test suite, or
(accidentally) in the process of fixing one of the bugs in the original multiline-collapsingtoolbar library, e.g. the missing RTL support

This was referenced Jun 29, 2019

Feature request - CollapsingToolbarLayout: Allow multiple lines of text in expanded state #6

Closed

Migrating to AndroidX opacapp/multiline-collapsingtoolbar#62

Open

Update library to Support Library version 28.0.0 opacapp/multiline-collapsingtoolbar#60

Closed

cketcham reviewed Jul 2, 2019

View reviewed changes

lib/java/com/google/android/material/internal/CollapsingTextHelper.java Outdated Show resolved Hide resolved

cketcham reviewed Jul 2, 2019

View reviewed changes

lib/java/com/google/android/material/internal/CollapsingTextHelper.java Outdated Show resolved Hide resolved

cketcham reviewed Jul 10, 2019

View reviewed changes

lib/java/com/google/android/material/internal/CollapsingTextHelper.java Outdated Show resolved Hide resolved

johan12345 mentioned this pull request Jul 11, 2019

Duplicated text for RTL languages opacapp/multiline-collapsingtoolbar#54

Open

johan12345 force-pushed the multiline-collapsingtoolbar branch from 87fbd71 to 7b08115 Compare July 11, 2019 16:06

dsn5ft added the cla: yes label Jul 16, 2019

cketcham reviewed Jul 22, 2019

View reviewed changes

johan12345 force-pushed the multiline-collapsingtoolbar branch 3 times, most recently from b64febe to abc05e8 Compare August 1, 2019 17:18

isaklilja approved these changes Sep 5, 2019

View reviewed changes

ldjcmu added the Work in progress (WIP) PR label Sep 30, 2019

ymarian self-assigned this Dec 5, 2019

wcshi requested a review from ymarian December 11, 2019 15:22

ymarian reviewed Dec 18, 2019

View reviewed changes

ymarian closed this in d7554ad Feb 11, 2020

johan12345 mentioned this pull request Feb 23, 2020

[CollapsingToolbarLayout] Slight misalignment during transition in multiline mode #1052

Closed

TinasheMzondiwa mentioned this pull request May 8, 2020

Production issues fixes Adventech/sabbath-school-android#112

Merged

johan12345 mentioned this pull request Nov 1, 2020

Improve title readability against light background opacapp/opacclient#600

Open

raphaelm mentioned this pull request Feb 18, 2021

JCenter migration opacapp/multiline-collapsingtoolbar#66

Closed

[CollapsingToolbarLayout] Allow multiple lines of text in expanded state #413

[CollapsingToolbarLayout] Allow multiple lines of text in expanded state #413

Conversation

johan12345 commented Jun 29, 2019

johan12345 commented Jul 2, 2019

cketcham commented Jul 10, 2019

cketcham commented Jul 10, 2019

johan12345 commented Jul 10, 2019

dsn5ft commented Jul 10, 2019

johan12345 commented Jul 10, 2019 • edited Loading

johan12345 commented Jul 11, 2019

dsn5ft commented Jul 11, 2019

johan12345 commented Jul 11, 2019

dsn5ft commented Jul 11, 2019

johan12345 commented Jul 17, 2019

cketcham Jul 22, 2019

Choose a reason for hiding this comment

johan12345 Jul 22, 2019

Choose a reason for hiding this comment

cketcham Jul 26, 2019

Choose a reason for hiding this comment

johan12345 Jul 30, 2019

Choose a reason for hiding this comment

cketcham Aug 1, 2019

Choose a reason for hiding this comment

johan12345 Aug 1, 2019

Choose a reason for hiding this comment

isaklilja commented Aug 8, 2019

johan12345 commented Aug 8, 2019

shbhmnk commented Aug 26, 2019

johan12345 commented Aug 26, 2019

johan12345 commented Dec 4, 2019 • edited Loading

milosmns commented Dec 11, 2019

ymarian left a comment • edited Loading

Choose a reason for hiding this comment

johan12345 commented Dec 18, 2019

ymarian commented Dec 18, 2019

ymarian commented Dec 18, 2019

johan12345 commented Jan 2, 2020

ArcherEmiya05 commented Jan 24, 2020

johan12345 commented Jan 24, 2020 • edited Loading

ArcherEmiya05 commented Jan 24, 2020

johan12345 commented Jan 28, 2020

ArcherEmiya05 commented Jan 29, 2020

bazinac commented Feb 8, 2020

adhirajsinghchauhan commented Feb 10, 2020

ymarian commented Feb 10, 2020

johan12345 commented Feb 10, 2020 • edited Loading

bazinac commented Feb 10, 2020

johan12345 commented Feb 11, 2020 • edited Loading

ymarian commented Feb 11, 2020

johan12345 commented Feb 11, 2020

katajona commented Apr 12, 2021

johan12345 commented Apr 12, 2021 • edited Loading

johan12345 commented Jul 10, 2019 •

edited

Loading

johan12345 commented Dec 4, 2019 •

edited

Loading

ymarian left a comment •

edited

Loading

johan12345 commented Jan 24, 2020 •

edited

Loading

johan12345 commented Feb 10, 2020 •

edited

Loading

johan12345 commented Feb 11, 2020 •

edited

Loading

johan12345 commented Apr 12, 2021 •

edited

Loading