Properly handle DrawerLayout animation while navigating through fragment

Question

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);

Answer 1

I am not sure what causing this behavior though I want to draw your attention on few thing.

1. 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.

2. Use addDrawerListener() instead of setDrawerListener() as it is deprecated.

3. Use spinBars and set value true to rotate bars during transition. e.x. in your styles.xml as described here.

4. In onDrawerClosed and onDrawerOpened call syncState(). Also call this method on your ActionBarDrawerToggle. Check this.

   Hope this will help you.