Switching between Android Navigation Drawer image and Up caret when using fragments

AndroidAndroid FragmentsAndroid ActionbarNavigation Drawer

Android Problem Overview

When using the Navigation Drawer the Android devs are recommending that in the ActionBar "only those screens that are represented in the Navigation Drawer should actually have the Navigation Drawer image" and that "all other screens have the traditional up carat."

See here for details: http://youtu.be/F5COhlbpIbY

I'm using one activity to control multiple levels of fragments and can get the Navigation Drawer image to display and function at all levels.

When creating lower level fragments I can call the ActionBarDrawerToggle setDrawerIndicatorEnabled(false) to hide the Navigation Drawer image and have the Up caret displayed

LowerLevelFragment lowFrag = new LowerLevelFragment();

//disable the toggle menu and show up carat
theDrawerToggle.setDrawerIndicatorEnabled(false);
getSupportFragmentManager().beginTransaction().replace(R.id.frag_layout, 
lowFrag, "lowerFrag").addToBackStack(null).commit();

The problem I'm having is when I navigate back to the top level fragments the Up carat still shows instead of the original Navigation Drawer image. Any suggestions on how to "refresh" the ActionBar on the top level fragments to re-display the Navigation Drawer image?

Solution

Tom's suggestion worked for me. Here’s what I did:

MainActivity
This activity controls all fragments in the app.

When preparing new fragments to replace others, I set the DrawerToggle setDrawerIndicatorEnabled(false) like this:

LowerLevelFragment lowFrag = new LowerLevelFragment();
	
//disable the toggle menu and show up carat
theDrawerToggle.setDrawerIndicatorEnabled(false);
getSupportFragmentManager().beginTransaction().replace(R.id.frag_layout,   
lowFrag).addToBackStack(null).commit();

Next, in an override of onBackPressed, I reverted the above by setting the DrawerToggle to setDrawerIndicatorEnabled(true) like this:

@Override
public void onBackPressed() {
    super.onBackPressed();
    // turn on the Navigation Drawer image; 
    // this is called in the LowerLevelFragments
    setDrawerIndicatorEnabled(true)
}

In the LowerLevelFragments
In the fragments I modified onCreate and onOptionsItemSelected like this:

In onCreate added setHasOptionsMenu(true) to enable configuring the options menu. Also set setDisplayHomeAsUpEnabled(true) to enable the < in the actionbar:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // needed to indicate that the fragment would 
    // like to add items to the Options Menu		
    setHasOptionsMenu(true);	
    // update the actionbar to show the up carat/affordance 
    getActivity().getActionBar().setDisplayHomeAsUpEnabled(true);
}

Then in onOptionsItemSelected whenever the < is pressed it calls the onBackPressed() from the activity to move up one level in the hierarchy and display the Navigation Drawer Image:

@Override
public boolean onOptionsItemSelected(MenuItem item) {	
    // Get item selected and deal with it
    switch (item.getItemId()) {
        case android.R.id.home:
            //called when the up affordance/carat in actionbar is pressed
            getActivity().onBackPressed();
            return true;
        … 
    }

Android Solutions

Solution 1 - Android

It's easy as 1-2-3.

If you want to achieve:

  1. Drawer Indicator - when no fragments are in the Back Stack or the Drawer is opened

  2. Arrow - when some Fragments are in the Back Stack

    private FragmentManager.OnBackStackChangedListener mOnBackStackChangedListener = new FragmentManager.OnBackStackChangedListener() { @Override public void onBackStackChanged() { syncActionBarArrowState(); } };

    @Override protected void onCreate(Bundle savedInstanceState) { getSupportActionBar().setDisplayShowHomeEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mDrawerToggle = new ActionBarDrawerToggle( this,
    mDrawerLayout,
    R.drawable.ic_navigation_drawer, 0, 0
    ) {

         public void onDrawerClosed(View view) {
         syncActionBarArrowState();
     }

     public void onDrawerOpened(View drawerView) {
         mDrawerToggle.setDrawerIndicatorEnabled(true);
     }
 };

 mDrawerLayout.setDrawerListener(mDrawerToggle);
 getSupportFragmentManager().addOnBackStackChangedListener(mOnBackStackChangedListener);

    }

    @Override protected void onDestroy() { getSupportFragmentManager().removeOnBackStackChangedListener(mOnBackStackChangedListener); super.onDestroy(); }

    private void syncActionBarArrowState() { int backStackEntryCount = getSupportFragmentManager().getBackStackEntryCount(); mDrawerToggle.setDrawerIndicatorEnabled(backStackEntryCount == 0); }

  3. Both indicators to act according to their shape

    @Override public boolean onOptionsItemSelected(MenuItem item) { if (mDrawerToggle.isDrawerIndicatorEnabled() && mDrawerToggle.onOptionsItemSelected(item)) { return true; } else if (item.getItemId() == android.R.id.home && getSupportFragmentManager().popBackStackImmediate()) { return true; } else { return super.onOptionsItemSelected(item); } }

P.S. See Creating a Navigation Drawer on Android Developers on other tips about the 3-lines indicator behavior.

Solution 2 - Android

You have written that, to implement lower-level fragments, you are replacing the existing fragment, as opposed to implementing the lower-level fragment in a new activity.

I would think that you would then have to implement the back functionality manually: when the user pressed back you have code that pops the stack (e.g. in Activity::onBackPressed override). So, wherever you do that, you can reverse the setDrawerIndicatorEnabled.

Solution 3 - Android

I've used next thing:

getSupportFragmentManager().addOnBackStackChangedListener(new FragmentManager.OnBackStackChangedListener() {
            @Override
            public void onBackStackChanged() {
                if(getSupportFragmentManager().getBackStackEntryCount() > 0){
                    mDrawerToggle.setDrawerIndicatorEnabled(false);
                    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
                }
                else {
                    getSupportActionBar().setDisplayHomeAsUpEnabled(false);
                    mDrawerToggle.setDrawerIndicatorEnabled(true);
                }
            }
        });

Solution 4 - Android

If your up action bar button doesn't work, don't forget to add the listener :

// Navigation back icon listener
mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed();
        }
});

I've got some trouble implementing a drawer navigation with a home button, everything worked except the action buton.

Solution 5 - Android

Try handling the Home item selection in the MainActivity depending on the state of the DrawerToggle. This way you don't have to add same code to every fragment.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Only handle with DrawerToggle if the drawer indicator is enabled.
    if (mDrawerToggle.isDrawerIndicatorEnabled() &&
            mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    // Handle action buttons
    switch (item.getItemId()) {
        // Handle home button in non-drawer mode
        case android.R.id.home:
            onBackPressed();
            return true;

        default:
            return super.onOptionsItemSelected(item);
    }
}

Solution 6 - Android

FOLLOW UP

The solution given by @dzeikei is neat, but it can be extended, when using fragments, to automatically handle setting back the drawer indicator when the backstack is empty.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Only handle with DrawerToggle if the drawer indicator is enabled.
    if (mDrawerToggle.isDrawerIndicatorEnabled() &&
            mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    // Handle action buttons
    switch (item.getItemId()) {
        // Handle home button in non-drawer mode
        case android.R.id.home:
	        // Use getSupportFragmentManager() to support older devices
	        FragmentManager fragmentManager = getFragmentManager();
	        fragmentManager.popBackStack();
		    // Make sure transactions are finished before reading backstack count
            fragmentManager.executePendingTransactions();
		    if (fragmentManager.getBackStackEntryCount() < 1){
		    	mDrawerToggle.setDrawerIndicatorEnabled(true);	
		    }
            return true;

        default:
            return super.onOptionsItemSelected(item);
    }
}

EDIT

For the question of @JJD.

The fragments are held/managed in an activity. The above code is written once in that activity, but only handle the up caret for the onOptionsItemSelected.

In one of my apps I also needed to handle the behavior of the up caret when the back button was pressed. This can be handle by overriding onBackPressed.

@Override
public void onBackPressed() {
    // Use getSupportFragmentManager() to support older devices
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.executePendingTransactions();
	if (fragmentManager.getBackStackEntryCount() < 1){
		super.onBackPressed();
	} else {
		fragmentManager.executePendingTransactions();
	    fragmentManager.popBackStack();
	    fragmentManager.executePendingTransactions();
        if (fragmentManager.getBackStackEntryCount() < 1){
            mDrawerToggle.setDrawerIndicatorEnabled(true);
        }
	}
};

Note the code duplication between onOptionsItemSelected and onBackPressed which can be avoided by creating a method and calling that method in both places.

Also note I add two more times executePendingTransactions which in my case was required or else I had sometimes strange behaviors of the up caret.

Solution 7 - Android

I created an interface for the hosting activity to update the view state of the hamburger menu. For top level fragments I set the toggle to true and for fragments for which I want to display the up < arrow I set the toggle to false.

public class SomeFragment extends Fragment {

    public interface OnFragmentInteractionListener {
        public void showDrawerToggle(boolean showDrawerToggle);
    }

    private OnFragmentInteractionListener mListener;

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            this.mListener = (OnFragmentInteractionListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString() + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        mListener.showDrawerToggle(false);
    }
}

Then in my Activity ...

public class MainActivity extends Activity implements SomeFragment.OnFragmentInteractionListener {

    private ActionBarDrawerToggle mDrawerToggle;

    public void showDrawerToggle(boolean showDrawerIndicator) {
        mDrawerToggle.setDrawerIndicatorEnabled(showDrawerIndicator);
    }

}

Solution 8 - Android

This answer was working but there was a little problem with it. The getSupportActionBar().setDisplayHomeAsUpEnabled(false) was not called explicitly and it was causing drawer icon to be hidden even when there were no items in the backstack so changing the setActionBarArrowDependingOnFragmentsBackStack() method worked for me.

private void setActionBarArrowDependingOnFragmentsBackStack() {
		int backStackEntryCount = getSupportFragmentManager()
				.getBackStackEntryCount();
		// If there are no items in the back stack
		if (backStackEntryCount == 0) {
			// Please make sure that UP CARAT is Hidden otherwise Drawer icon
			// wont display
			getSupportActionBar().setDisplayHomeAsUpEnabled(false);
			// Display the Drawer Icon
			mDrawerToggle.setDrawerIndicatorEnabled(true);
		} else {
			// Show the Up carat
			getSupportActionBar().setDisplayHomeAsUpEnabled(true);
			// Hide the Drawer Icon
			mDrawerToggle.setDrawerIndicatorEnabled(false);
		}

	}

Solution 9 - Android

Logic is clear. Show back button if fragment back stack is clear. Show material hamburger-back animation if fragment stack is not clear.

getSupportFragmentManager().addOnBackStackChangedListener(
    new FragmentManager.OnBackStackChangedListener() {
        @Override
        public void onBackStackChanged() {
            syncActionBarArrowState();
        }
    }
);


private void syncActionBarArrowState() {
    int backStackEntryCount = getSupportFragmentManager().getBackStackEntryCount();
    mNavigationDrawerFragment.setDrawerIndicatorEnabled(backStackEntryCount == 0);
}

//add these in Your NavigationDrawer fragment class

public void setDrawerIndicatorEnabled(boolean flag){
    ActionBar actionBar = getActionBar();
    if (!flag) {
        mDrawerToggle.setDrawerIndicatorEnabled(false);
        actionBar.setDisplayHomeAsUpEnabled(true);
        mDrawerToggle.setHomeAsUpIndicator(getColoredArrow());
    } else {
        mDrawerToggle.setDrawerIndicatorEnabled(true);
    }
    mDrawerToggle.syncState();
    getActivity().supportInvalidateOptionsMenu();
}

//download back button from this(https://www.google.com/design/icons/) website and add to your project

private Drawable getColoredArrow() {
    Drawable arrowDrawable = ContextCompat.getDrawable(getActivity(), R.drawable.ic_arrow_back_black_24dp);
    Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

    if (arrowDrawable != null && wrapped != null) {
        // This should avoid tinting all the arrows
        arrowDrawable.mutate();
        DrawableCompat.setTint(wrapped, Color.GRAY);
    }
    return wrapped;
}

Solution 10 - Android

If you take a look at the GMAIL app and come here to search for the carret/affordance icon..

I would ask you to do this, none of the above answer was clear. i was able to modify the accepted answer.

  • NavigationDrawer --> Listview contains subfragments.

  • subfragments will be listed like this

  • firstFragment == position 0 ---> this will have subfragments --> fragment

  • secondFragment

  • thirdFragment and so forth....

In firstFragment you have other fragment.

Call this on DrawerActivity

getFragmentManager().addOnBackStackChangedListener(new FragmentManager.OnBackStackChangedListener() {
        @Override
        public void onBackStackChanged() {
            if (getFragmentManager().getBackStackEntryCount() > 0) {
                mDrawerToggle.setDrawerIndicatorEnabled(false);
            } else {
                mDrawerToggle.setDrawerIndicatorEnabled(true);
            }
        }
    });

and in fragment

    setHasOptionsMenu(true);    

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Get item selected and deal with it
    switch (item.getItemId()) {
        case android.R.id.home:
            //called when the up affordance/carat in actionbar is pressed
            activity.onBackPressed();
            return true;
    }
    return false;
}

On the OnBackPressed Drawer activity method set the drawer toggle to true to enable navigation list icon again.

Thanks, Pusp

Solution 11 - Android

You can look at this little example! https://github.com/oskarko/NavDrawerExample

Solution 12 - Android

IMO, using onNavigateUp() (as shown here) in riwnodennyk's or Tom's solution is cleaner and seems to work better. Just replace the onOptionsItemSelected code with this:

@Override
public boolean onSupportNavigateUp() {
    if (getSupportFragmentManager().getBackStackEntryCount() > 0) {
        // handle up navigation
        return true;
    } else {
        return super.onSupportNavigateUp();
    }
}
Categories
Recommended Android Solutions
Recommended Android Fragments Solutions
Recommended Android Actionbar Solutions
Recommended Navigation Drawer Solutions

Previous Solution:

How to prevent sticky hover effects for buttons on touch devices

JavascriptCssHoverTouch

Next Solution:

Why extend the Android Application class?

AndroidAndroid Application-Class

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEvilAshView Question on Stackoverflow
Solution 1 - AndroidriwnodennykView Answer on Stackoverflow
Solution 2 - AndroidTomView Answer on Stackoverflow
Solution 3 - AndroidYuriy SychView Answer on Stackoverflow
Solution 4 - AndroidBurrichView Answer on Stackoverflow
Solution 5 - AndroiddzeikeiView Answer on Stackoverflow
Solution 6 - AndroidHpTermView Answer on Stackoverflow
Solution 7 - AndroidBill MoteView Answer on Stackoverflow
Solution 8 - AndroidSheraz Ahmad KhiljiView Answer on Stackoverflow
Solution 9 - Androidkml_ckrView Answer on Stackoverflow
Solution 10 - AndroidEngineSenseView Answer on Stackoverflow
Solution 11 - AndroidoskarkoView Answer on Stackoverflow
Solution 12 - Android0101100101View Answer on Stackoverflow