Develop Reference

Properly handle DrawerLayout animation while navigating through fragment

I'm currently struggling with the DrawerLayout animation doing weird stuff; The hamburger icon is laggy and often switch from hamburger to arrow without animation if I don't put an Handler to delay the fragment transaction animation.
So I ended up putting an handler to wait until the hamburger icon perform the animation but it just doesn't feel natural that we need to wait until the drawer close to switch fragment. I'm sure there is a better way to handle this...
Here is how I do currently:
private void selectProfilFragment() {
final BackHandledFragment fragment;
// TODO test this again
Bundle bundle = new Bundle();
bundle.putString(FragmentUserProfile.USER_FIRST_NAME, user.getFirstname());
bundle.putString(FragmentUserProfile.USER_LAST_NAME, user.getLastname());
bundle.putString(FragmentUserProfile.USER_PICTURE, user.getProfilepic());
bundle.putString(FragmentUserProfile.USER_EMAIL, user.getEmail());
bundle.putBoolean(FragmentUserProfile.USER_SECURITY, user.getParameters().getSecuritymodule().equals("YES"));
fragment = new FragmentUserProfile();
fragment.setArguments(bundle);
mDrawerLayout.closeDrawer(mDrawerLinear);
new Handler().postDelayed(new Runnable() {
public void run() {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.pull_in_right, R.anim.push_out_left, R.anim.pull_in_left, R.anim.push_out_right);
ft.replace(R.id.content_frame, fragment)
.addToBackStack(fragment.getTagText())
.commitAllowingStateLoss();
}
}, 300);
}
It's still glitching a little bit in between the DrawerLayout closing and opening fragment transaction animation.
Here is How I instanciate the drawer:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawerListChild.setAdapter(new DrawerListAdapter(this, R.layout.drawer_layout_item, mPlanTitles));
mDrawerListChild.setOnItemClickListener(new DrawerItemClickListener());
mProfilPic.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
selectProfilFragment();
}
});
mDrawerToggle = new ActionBarDrawerToggle(
this,
mDrawerLayout,
toolbar,
R.string.drawer_open,
R.string.drawer_close
) {
public void onDrawerClosed(View view) {
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
invalidateOptionsMenu();
}
};
getSupportFragmentManager().addOnBackStackChangedListener(mOnBackStackChangedListener);
mDrawerLayout.setDrawerListener(mDrawerToggle);
setSupportActionBar(toolbar);

I am not sure what causing this behavior though I want to draw your attention on few thing.
I am not aware which ActionBarDrawerToggle class you are using but preferable to use android.support.v7.app.ActionBarDrawerToggle instead of android.support.v4.app.ActionBarDrawerToggle as it is deprecated.
Use addDrawerListener() instead of setDrawerListener() as it is deprecated.
Use spinBars and set value true to rotate bars during transition.
e.x. in your styles.xml as described here.
In onDrawerClosed and onDrawerOpened call syncState(). Also call this method on your ActionBarDrawerToggle. Check this.
Hope this will help you.

Heres how you can do it. In the Activity containing fragment setup your drawer.
public void setupDrawer(){
NavigationFragment drawerFragment = (NavigationFragment)
getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
mActionbarToggle = drawerFragment.setUp(R.id.navigation_drawer, mDrawerLayout, mToolbar);
}
Now in the NavigationDrawerFragment define your setUp method
public ActionBarDrawerToggle setUp(int navigation_drawer, DrawerLayout drawerLayout, Toolbar mToolbar) {
mFragmentContainerView = getActivity().findViewById(navigation_drawer);
this.mDrawerLayout = drawerLayout;
//mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
#Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
if (!isAdded()) {
return;
}
getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}
#Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
if (!isAdded()) {
return;
}
getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}
};
mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
((MainActivity) mContext).onBackPress();
}
});
mDrawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
mDrawerLayout.setDrawerListener(mDrawerToggle);
return mDrawerToggle;
}
That's it, your drawer is completely setUp.

Wait until DrawerLayout animation is done

I have a drawerLayout (support.v4) with a navigationView and have many (like many up to n menu items) menu items. To have less items on the screen at the same time, some menu items lead to another menu with many items.
The thing is, my menu switch works fine, I'm able to pass from one menu to the other one but I have no animation... I want to close the drawer when an item linked to another menu is selected and once the menu is loaded, to open it again.
Here's my code:
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem selectedItem) {
mDrawerLayout.closeDrawer(GravityCompat.START);
Log.d(MainActivity.class.getName(), selectedItem.toString());
MobileXMLMenu menu = UserMenu.getInstance().getMenu();
for(int i = 0; i < menu.sizeMenuItems(); i++){
if(menu.getMenuItem(i).getLabel(Utility.retreiveLanguage()).equals(selectedItem.toString())){
Log.d(MainActivity.class.getName(), menu.getMenuItem(i).sizeMenuItems() + "");
if(menu.getMenuItem(i).sizeMenuItems() > 0){
Menu nMenu = navigationView.getMenu();
nMenu.clear();
for(int j = 0; j < menu.getMenuItem(i).sizeMenuItems(); j++){
MobileXMLMenuItem item = menu.getMenuItem(i).getMenuItem(j);
nMenu.add(item.getLabel(Utility.retreiveLanguage())).setIcon(MemberOptionsManager.getInstance().getMenuItemIcon(item.getDecorator()));
}
mDrawerLayout.openDrawer(GravityCompat.START);
isInSubmenu = true;
}
}
}
return false;
}
});
I also have this for my ActionBarDrawerToggle (don't know if this could help):
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close){
public void onDrawerClosed(View view){
super.onDrawerClosed(view);
getSupportActionBar().setTitle(mFragment.getFragmentName());
invalidateOptionsMenu();
mDrawerToggle.syncState();
}
public void onDrawerOpened(View drawerView){
super.onDrawerClosed(drawerView);
getSupportActionBar().setTitle("Open");
invalidateOptionsMenu();
mDrawerToggle.syncState();
}
};
When I select an item not link to any sub menu, the drawer closes, but otherwise, I see no animation, just the menu content changing with no animation. How can I force my app to wait for the drawer to close before changing the menu content?
Thanks!

You can use callback methods of the drawer layout from official documentation of the android.
onDrawerClosed(View drawerView)
onDrawerOpened(View drawerView)
onDrawerSlide(View drawerView, float slideOffset)
onDrawerStateChanged(int newState)
You can find more at link:http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html

You can setDrawerListener on DrawLayout like this
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
public void onDrawerClosed(View view) {
handleClickNavigationItem(mClickedNavigationItem);
}
public void onDrawerOpened(View drawerView) {
}
};
mDrawerLayout.setDrawerListener(toggle);
handleClickNavigationItem method contains the code which handle navigation event.
And just save clicked item in onNavigationItemSelected method
public boolean onNavigationItemSelected(MenuItem item) {
mClickedNavigationItem = item.getItemId();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}

Android - Navigation Drawer change action bar icon

I have action bar with one icon:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/is_connected"
android:icon="#drawable/ic_disconnected"
android:title="#string/general_disconnected"
app:showAsAction="always"/>
When I change that icon in this way:
mActionBarMenu.getItem(0).setIcon(getResources().getDrawable(R.drawable.ic_connected));
and open navigation drawer that that item icon change to initial state ang again is: #drawable/ic_disconnected
It is possible to avoid that?
UPDATE:
private void setupDrawer() {
mDrawerList = (ListView) findViewById(R.id.navList);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mActivityTitle = getTitle().toString();
addDrawerItem();
mActionBar.setDisplayHomeAsUpEnabled(true);
mActionBar.setHomeButtonEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open, R.string.drawer_close) {
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
//getSupportActionBar().setTitle("Menu");
invalidateOptionsMenu();
}
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
invalidateOptionsMenu();
}
};
mDrawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
mDrawerToggle.setDrawerIndicatorEnabled(true);
mDrawerLayout.setDrawerListener(mDrawerToggle);
}

how disable DrawerArrowToggle from toolbar or move right

first question:
i want to create a right to left toolbar like this image:
how can customize the toolbar DrawerArrowToggle to move right?
And second question:
i create a custom toolbar and make a button for open drawer but toolbar DrawerArrowToggle is appear left of my custom toolbar.
how to remove it?
--update--
with thanks to sasikumar by adding this line the DrawerArrowToggle is removed.
mDrawerToggle.setDrawerIndicatorEnabled(false);
here my toolbar code:
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.action_bar, null);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(view, new ActionBar.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
Toolbar parent = (Toolbar) view.getParent();
parent.setContentInsetsAbsolute(0, 0);
Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, Drawer,
parent, R.string.openDrawer,
R.string.closeDrawer) {
#Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
#Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item != null && item.getItemId() == android.R.id.home) {
if (Drawer.isDrawerOpen(Gravity.RIGHT)) {
Drawer.closeDrawer(Gravity.RIGHT);
} else {
Drawer.openDrawer(Gravity.RIGHT);
}
}
return false;
}
};
Drawer.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
my desire app is like this:
sorry for bad english.

you can hide the arrow by using onDrawerSlide method.
drawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
getToolbar(), R.string.open, R.string.close) {
#Override
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
#Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
#Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, 0); // this disables the animation
}
};
If you want to remove the arrow completely, you can add
super.onDrawerSlide(drawerView, 0); // this disables the arrow # completed state
at the end of the onDrawerOpened function

Check the below link, maybe helpful:
How can I open navigation drawer from right side to left
and this link too:
Android - Is Navigation Drawer from right hand side possible?

Seems you've added remaining code.Simply set your drawer component gravity to the right.
like...
android:layout_gravity="right"
now set the drawer position to the right using following code:
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open,
R.string.drawer_close) {
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item != null && item.getItemId() == android.R.id.home) {
if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
} else {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
}
return false;
}
};

Change Icon Of Navigation Drawer

I am having trouble with changing my navigation drawer icon to a custom one. I've currently had to implement the standard drawer icon which has 3 horizontal lines on top, but now I want to replace this with my custom drawer icon.
This is how my mDrawerToggle is at the moment:
mDrawerToggle=new ActionBarDrawerToggle(this,
mDrawerLayout,
R.drawable.app_icon,
R.string.drawer_open) {
// My code
};

Use below code,it's working for V7 ActionBarDrawerToggle
mDrawerToggle.setDrawerIndicatorEnabled(false);
mDrawerToggle.setHomeAsUpIndicator(R.drawable.your_custom_icon);
mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
mDrawerLayout.closeDrawer(GravityCompat.START);
} else {
mDrawerLayout.openDrawer(GravityCompat.START);
}
}
});

Here is the sample code taken from
Creating a Navigation Drawer
Activity.class
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...
public void onCreate(Bundle savedInstanceState) {
...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */
) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...
return super.onOptionsItemSelected(item);
}
...
}

This is main activity
final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
toggle.setDrawerIndicatorEnabled(false);
toggle.setToolbarNavigationClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawer.openDrawer(GravityCompat.START);
}
});
toggle.setHomeAsUpIndicator(R.drawable.menuicon);

You could use this format for your mDrawerToggle:
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.CUSTOM_ICON, // Navigation menu toggle icon
R.string.DRAWER_OPEN, // Navigation drawer open description
R.string.DRAWER_CLOSE // Navigation drawer close description
)
Change your drawable and make sure it is the same name as the one in the code.

This is the main layout file
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
android:choiceMode="singleChoice"
android:divider="#color/black"
android:dividerHeight="1dp" />
</android.support.v4.widget.DrawerLayout>
This is the main Activity
DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.menuicon, // nav menu toggle icon
R.string.app_name, // nav drawer open - description for
// accessibility
R.string.app_name // nav drawer close - description for
// accessibility
) {
public void onDrawerClosed(View view) {
// getActionBar().setTitle(mTitle);
// calling onPrepareOptionsMenu() to show action bar icons
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
// getActionBar().setTitle(mDrawerTitle);
// calling onPrepareOptionsMenu() to hide action bar icons
invalidateOptionsMenu();
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
finally at R.drawable.menuicon(you can give your image id) it will work.