Android hamburger arrow transition on new fragment / activity - android

I have an activity A and on that activity, I want to create a new Activity B (or fragment if needs be). On A, I have a hamburger icon and on B, I have left arrow icon. When I created B from A, B is created with left arrow icon but there is no animation. I want to turn hamburger icon to left arrow icon animated as below when creating new activity.
It should work like android gmail application. In Gmail app, when you are in inbox menu, there is a hamburger icon in toolbar and if you click and open one of your mails in inbox list, hamburger icon turns to left arrow animated. When you click to left arrow or back button, the left arrow turns to hamburger icon also animated. Any help?

I can see 2 ways of implementing it. The right way to do this is to use the Toolbar or ActionBar as a shared element between activities and change the state of ActionBarToggle when activity is started and when you return from that activity. But that will not work in pre-lollipop devices. But if you really badly want that to work on older devices, you can start the animation in the Toolbar inside Activity B after the activity B starts, it will not look as smooth as shared element transition, but that is the most straightforward way I see to implement it on older devices.

Related

Material Toolbar & Jetpack navigation glitch issues

I have some strange "glitch" and refresh issues with my application, using jetpack navigation library (2.3.5), Material Toolbar and view bindings.
The demo scenario is the following: a simple navigation between 3 different fragments.
ENTRY POINT ---> SCREEN C ---> SCREEN D
DISCLAIMER
Sorry for the "pseudo-blur boxes" on the screen, but I can't show the real UI, and if I change the fragment layout for demo purpose, the issue changes. So I need to use the real UI.
First step : ENTRY POINT ---> SCREEN C
The user enter in our app: an empty MaterialToolbar is on screen top, with a standard back icon.
Then the user tap on a button and enter into SCREEN C.
When the SCREEN C is fully rendered, the Material Toolbar is updated with the screen title "SCREEN C", a custom navigation icon and a menu item on the right (the question mark icon).
As you can see in the gif, there are 2 main issues during the navigation:
The screen title "SCREEN C" is initially shown with a very large font and wrong color (the white one). This is the style of the empty MaterialToolbar in the ENTRY POINT fragment.
The back icon is initially the standard one, after a while (when the whole screen is rendered) it is changed with the custom navigationIcon.
Second step: SCREEN C ---> SCREEN D
The user is on "SCREEN C". Then tap on a card and enter into "SCREEN D".
When the SCREEN D is fully rendered, the Material Toolbar is updated with the screen title "SCREEN D", a custom back arrow icon and the menu item on the right will disappear.
As you can see in the gif, there are also some issues:
First, the title "SCREEN D" is shown to the user, with the standard back icon and the menu item on the right
Then, when "SCREEN D" is fully rendered, the back icon is the custom one and the menu item disappears.
The MaterialToolbar, in every fragment, is configured as following:
val navController = NavHostFragment.findNavController(fragment)
val appBarConfiguration = AppBarConfiguration(navController.graph)
setupWithNavController(navController, appBarConfiguration)
This is called in the fragment onViewCreated callback.
Why there is such rendering issue during every navigation step?
When you pass a toolbar to setupWithNavController, it'll automatically set the title as you navigate around the app, using the label value of the navigation destination. It's designed so you have a static toolbar in your activity, with the destination fragments swapped out underneath it, and the toolbar updates to reflect the current fragment.
When you have a separate toolbar in every fragment, you get this glitch where the title updates on the current fragment's toolbar before the navigation to the next fragment happens. The easiest fix here is to just clear the label values on each fragment in the navigation graph, and set them manually on each toolbar (e.g. in the layout XML). I've seen Ian Lake (one of the developers) say that the labels are really intended for that automatic-title-change behaviour, and you shouldn't use them if you have separate toolbars
here we are - in the comments on this question:
How to remove glitch when navigating between Fragments with different toolbars?
Why are you using labels in your navigation graph at all then? Toolbars have APIs to set a static title, which is certainly appropriate if you know that Toolbar is only associated with one fragment.

Use drawer indicator as back button

I'm using MaterialDrawer library to implement a basic material drawer in my app.
I wasted more than two days trying to figure out how to transform the menu toggle button (burger) to a back button, like Gmail app when you open an email.
In Gmail app when you open an email the menu icon is animated into a back arrow but the menu drawer remains still available.
I've tried to use ValueAnimator to animate the icon as explained here.
I've setted an onAnimationEnd listener to replace the menu icon with a working back button:
result.getActionBarDrawerToggle().setDrawerIndicatorEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
After doing that the menu drawer slide position get unlinked from the menu drawer icon animation, and when i try to restore the menu drawer button and animate it backwards it gets stuck:
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
result.getActionBarDrawerToggle().setDrawerIndicatorEnabled(true);
Actually a similar question has been already asked, and has been marked has duplicated when it is not: Navigation Drawer with Burger to back arrow animation on Lollipop

Android Fragments and sliding menu navigation

I have implemented a sliding menu navigation in my app like in this picture.
When the user clicks an item in the sliding menu, a Fragment is created for the corresponding menu entry and it replaces any existing fragment. When the used navigates further away, for example, the top level Fragment is a ThingListFragment for a list of thigs, and he taps one to open a ThingDetailFragment, then I want to replace the sliding menu icon with an icon of a back arrow (so the user must first go back to the top level either by this button or by hardware back button before being able to access the menu).
At this moment I'm setting this manually and it's time consuming and error-prone if I have a lot of fragments like this.
Is there some clever way to achieve this?
Try to make a basic fragment class (for exaple: FragmentBasic) where you register your action bar icons, and then every fragment who needs these icons, extends your FragmentBasic class. after this just implement the extra layout you want

No up button after setDisplayHomeAsUpEnabled(true) and NavDrawer

In my project I'm forced to extend some base activity which in it's turn extend ABS and creates navigation menu.
When my activity called, in onCreate I called
getSupportActionBar().setDisplayHomeAsUpEnabled(true)
but there is no up button appear near the app icon. Instead NavDrawer icon remain there (the three horizontal stripes near the app icon).
How can I change the navdrawer icon to ordinary back button ?

Setting Navigation Icon on Android ActionBar

So I'm working on adding ActionBarSherlock and the Navigation Drawer to a project that previously implemented a custom (very poorly written) "action bar". Instead of using fragments and a backstack of activities for navigation, some activities show and hide different layouts. (That is, suppose I am in a list mode and then select a button to go into an edit screen. The app currently hides the list layout and shows another layout.).
So I've added actionbar sherlock and a navigation drawer to all the activities. I want to be able to programmatically switch the navigation icon from the 3 lines to the arrow when certain buttons are pressed.
I can't figure out how to do this though. Any ideas?
Thanks!
The solution to this problem is to use the method:
setDrawerIndicatorEnabled(boolean enable)
inside the ActionBarDrawerToggle class.
After:
drawer.setDrawerListener(toggle);
Use this code:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.select);
It depends how wedded you are to built-in actionbar artifacts. You can always redraw the current actionbar by inflating a layout of your choosing, then calling
getSherlockActivity().getSupportActionBar().setDisplayShowTitleEnabled(false);
getSherlockActivity().getSupportActionBar().setDisplayShowHomeEnabled(false);
getSherlockActivity().getSupportActionBar().setDisplayShowCustomEnabled(true);
// Inflate and do whatever you need to your view...
getSherlockActivity().getSupportActionBar().setCustomView(abView);
getSherlockActivity().getSupportActionBar().show();
When you want to go back to your standard (assuming you're using a DrawerLayout to do your navigation drawer), you can just set make a call to setDisplayShowCustomEnabled(false) (re-enable showHome and showTitle as you please).
As far as I know, customization of the back button can only be done via themes. Besides, swapping the drawer icon for the back icon (within the same Activity) doesn't make sense, since users would still be able to access the navigation drawer by sliding the left most edge to the right. It just wouldn't make sense.
If you absolutely need the back icon, then it would make the most sense to make that screen a new Activity since you would indeed be adding another "level" to the stack, which is what the back icon represents.

Categories

Resources