Navigation Drawer twitches on close

Question

I try implement Navigation Drawer (Material Design) in my app. My activity contains FrameLayout with fragments. When user select item in Navigation Drawer FrameLayout reload new fragment:

    listViewDrawer.setOnItemClickListener( new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick( AdapterView<?> parent, View view, int position, long id) {

            drawerLayout.closeDrawer( listViewDrawer); // <<<-------

            toolbar.setTitle( getResources().getString( R.string.title));

            fragmentMain = new FragmentMain();

            android.app.FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                       .replace( R.id.frameLayoutMain, ApplicationTapaKiosk.getInstance().fragmentMain)
                       .commit();

        }
     }

When I click on item all work fine. Navigation Drawer closed not smoothly but with frozen (twitches, jerks) because fragment reload in background.

How close Navigation Drawer smoothly?

Answer 1

You have to decide whether you like more:

replacing Fragment in your FrameLayout and then closing DrawerLayout

or

closing DrawerLayout and then replacing your Fragment.

To implement the first approach:

just make those changes in your code:

listViewDrawer.setOnItemClickListener(new AdapterView.OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        toolbar.setTitle(getResources().getString(R.string.title));

        fragmentMain = new FragmentMain();

        android.app.FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction()
                   .replace(R.id.frameLayoutMain, ApplicationTapaKiosk.getInstance().fragmentMain)
                   .commit();

        fragmentManager.executePendingTransactions(); // wait for the transaction to finish
        drawerLayout.closeDrawer(listViewDrawer); // call closeDrawer(...) as a last thing
    }
 }

To implement the second approach:

set some sort of flag when user clicked:

listViewDrawer.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        mDrawerItemClicked = true;
        drawerLayout.closeDrawer(listViewDrawer); 
    }
 }

and set DrawerLayout.DrawerListener on your DrawerLayout, like this:

drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
    }

    @Override
    public void onDrawerOpened(View drawerView) {
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        if (mDrawerItemClicked){
            mDrawerItemClicked = false;

            toolbar.setTitle(getResources().getString(R.string.title));
            fragmentMain = new FragmentMain();
            android.app.FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                   .replace(R.id.frameLayoutMain, ApplicationTapaKiosk.getInstance().fragmentMain)
                   .commit();
        }
    }

    @Override
    public void onDrawerStateChanged(int newState) {
    }
});

Answer 2

it takes about 200 milliseconds for the drawer to close. so you can do something like:

Handler mHandler = new Handler();

drawerLayout.closeDrawer( listViewDrawer);
mHandler.postDelayed(
                new Runnable() {
                    @Override
                    public void run () {
                        loadFragment();
                    }
                }
                , NAVDRAWER_CLOSE_DELAY // 250...for delay
        );