Fixed
Status Update
Comments
il...@google.com <il...@google.com> #2
Have you tried adding android:animateLayoutChanges="true" to your Toolbar?
sa...@gmail.com <sa...@gmail.com> #3
#2, thanks, I didn't know about that attribute. I tried it just now, and it partly works.
However, it is buggy. When navigating from a destination that has a back arrow in the toolbar to one without an arrow, then the title text only moves a tiny bit to the left and leaves a big space to the left of the title text. Without animateLayoutChanges, the text correctly sits all the way to the left.
However, it is buggy. When navigating from a destination that has a back arrow in the toolbar to one without an arrow, then the title text only moves a tiny bit to the left and leaves a big space to the left of the title text. Without animateLayoutChanges, the text correctly sits all the way to the left.
il...@google.com <il...@google.com> #4
Thanks for confirming. Since Navigation doesn't control how a Toolbar works, I've moved this to the AppCompat component to triage updating Toolbar to support better animations as the navigation icon is added/removed.
ki...@google.com <ki...@google.com> #5
+Andrey as I was looking at his older post over at https://medium.com/@andkulikov/animate-all-the-things-transitions-in-android-914af5477d50
Indeed adding android:animateLayoutChanges="true" is not enough. Some state changes are animated properly, and some are not.
I've added these lines at the beginning of ToolbarWidgetWrapper.setDisplayOptions:
if (android.os.Build.VERSION.SDK_INT >= 19) {
android.transition.TransitionManager.beginDelayedTransition(mToolbar);
}
On a v19+ device toggling display options (home, up etc) seems to be working. We also have the recently added (by Andrey) transition module, but appcompat does not depend on it, and I'd really like to not pull another dependency for appcompat.
The two things I can think of here:
1. Use the beginDelayedTransition everywhere in the toolbar implementation on v19+ (for state changes)
2. Advise applications to use the transition module APIs to wrap state change calls on Toolbar (which is ViewGroup) in their code so that it works on older platform versions.
Andrey - thoughts?
Indeed adding android:animateLayoutChanges="true" is not enough. Some state changes are animated properly, and some are not.
I've added these lines at the beginning of ToolbarWidgetWrapper.setDisplayOptions:
if (android.os.Build.VERSION.SDK_INT >= 19) {
android.transition.TransitionManager.beginDelayedTransition(mToolbar);
}
On a v19+ device toggling display options (home, up etc) seems to be working. We also have the recently added (by Andrey) transition module, but appcompat does not depend on it, and I'd really like to not pull another dependency for appcompat.
The two things I can think of here:
1. Use the beginDelayedTransition everywhere in the toolbar implementation on v19+ (for state changes)
2. Advise applications to use the transition module APIs to wrap state change calls on Toolbar (which is ViewGroup) in their code so that it works on older platform versions.
Andrey - thoughts?
ki...@google.com <ki...@google.com> #6
Also +Dan from the MDC team since the toolbar / appbar are a big part of the material skeleton.
an...@google.com <an...@google.com> #7
I think adding enabled by default transitions for the Toolbar is a huge breaking change and can affect a lot of apps's code where developer are not expecting it(don't want an animation) or already have some animation implementation applied.
More nice idea I can think of is to just recommend to use androidx Transition library for cases like this. Are developers in control of the code when this change happens? Can they manually add TransitionManager.beginDelayedTransition(mToolbar); before applying new changes to the toolbar?
More nice idea I can think of is to just recommend to use androidx Transition library for cases like this. Are developers in control of the code when this change happens? Can they manually add TransitionManager.beginDelayedTransition(mToolbar); before applying new changes to the toolbar?
an...@google.com <an...@google.com>
ki...@google.com <ki...@google.com> #8
Yes, developers can certainly do that. Toolbar is a view that the app developer explicitly adds to their layouts, and since it's a ViewGroup, it can be passed to that TransitionManager API.
Marking as WAI.
Marking as WAI.
sa...@gmail.com <sa...@gmail.com> #9
Just to clarify, how should I go about integrating TransitionManager.beginDelayedTransition(mToolbar); with AndroidX Navigation?
sa...@gmail.com <sa...@gmail.com> #10
Never mind, I got it to work using this code:
Toolbar appBar = findViewById(R.id.toolbar);
setSupportActionBar(appBar);
// Hook up the app bar with the navigation
navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController);
navController.addOnDestinationChangedListener((controller, destination, arguments) -> TransitionManager.beginDelayedTransition(appBar));
Thanks for your help!
Toolbar appBar = findViewById(R.id.toolbar);
setSupportActionBar(appBar);
// Hook up the app bar with the navigation
navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController);
navController.addOnDestinationChangedListener((controller, destination, arguments) -> TransitionManager.beginDelayedTransition(appBar));
Thanks for your help!
ki...@google.com <ki...@google.com> #11
Ian - is it worth adding this somewhere in the navigation module docs?
il...@google.com <il...@google.com> #12
NavigationUI is the one triggering the change in app icons, so we'll add the code on our side.
ap...@google.com <ap...@google.com> #13
Project: platform/frameworks/support
Branch: androidx-master-dev
commit e28e8678478c7c04b55886e7071750cbdea89121
Author: jbwoods <jbwoods@google.com>
Date: Thu Jun 27 14:32:13 2019
Animate Toolbar Changes in NavigationUI
When animateLayoutChanges is set on a Toolbar, there are errors in how
the text within the toolbar is displayed if it has an arrow. The text
leaves a big space on destinations with no arrow.
This change checks so see if the icon will be null and then uses a
TransitionManager to animate the toolbar text into the proper position.
We only animate when the icon is going to disappear. If we were animate
when the icon is appearing, the new icon and text appear stacked when
the animation begins.
Test: Tested visually in app
BUG: 131403621
Change-Id: I97ff213bdeb6da3282287d9b572f33c74cf9e9e7
M navigation/navigation-ui/build.gradle
M navigation/navigation-ui/src/main/java/androidx/navigation/ui/CollapsingToolbarOnDestinationChangedListener.java
M navigation/navigation-ui/src/main/java/androidx/navigation/ui/ToolbarOnDestinationChangedListener.java
https://android-review.googlesource.com/1007867
https://goto.google.com/android-sha1/e28e8678478c7c04b55886e7071750cbdea89121
Branch: androidx-master-dev
commit e28e8678478c7c04b55886e7071750cbdea89121
Author: jbwoods <jbwoods@google.com>
Date: Thu Jun 27 14:32:13 2019
Animate Toolbar Changes in NavigationUI
When animateLayoutChanges is set on a Toolbar, there are errors in how
the text within the toolbar is displayed if it has an arrow. The text
leaves a big space on destinations with no arrow.
This change checks so see if the icon will be null and then uses a
TransitionManager to animate the toolbar text into the proper position.
We only animate when the icon is going to disappear. If we were animate
when the icon is appearing, the new icon and text appear stacked when
the animation begins.
Test: Tested visually in app
BUG: 131403621
Change-Id: I97ff213bdeb6da3282287d9b572f33c74cf9e9e7
M navigation/navigation-ui/build.gradle
M navigation/navigation-ui/src/main/java/androidx/navigation/ui/CollapsingToolbarOnDestinationChangedListener.java
M navigation/navigation-ui/src/main/java/androidx/navigation/ui/ToolbarOnDestinationChangedListener.java
jb...@google.com <jb...@google.com> #14
This has been fixed internally and will be available in the Navigation 2.1.0-beta01 release.
Description
Version used: 2.0.0
Devices/Android versions reproduced on: all
My navigation destinations have different title bars:
* The top-level bar has no menu/back icon
* Each destination has its own title text
When I navigate between destinations, the Navigation library updates the app bar icon and title text, but no animation occurs. As a result, the app bar change is startling, whereas the content change is smooth. For the user, this makes the app feel like it has a bug or something.
Can you add a feature to animate changes to the app bar? Some animations I'd like to see are:
* If the icon is being added or removed, slide the title text from its original position to its new position
* Otherwise, either cross-fade the title or maybe match the destination transition animation
Thanks