How do I change my button image with navigation drawer opening and closing

Question

I have a navigation button for my navigation fragment which turns active and opens a navigation drawer menu upon click:

Now when I click it, it turns active as follows:

However, I want to associate it with a navigation drawer such a way that, even if I do not click the button and slide open the navigation drawer, the button turns active when the navigation drawer menu is open and when closed by sliding back in from right to left, the button turns red/inactive. The code which I am trying to work with is as follows:

private boolean mIsNavigationOpen = false;
    private DrawerLayout drawerLayout;
    private NavigationPanelFragment dlDrawer;
    private ActionBarDrawerToggle actionBarDrawerToggle;
public boolean isNavigationOpen() {

        return mIsNavigationOpen;

    }
//----------Code for Navigation open logo button active/inactive instances
    @SuppressWarnings("deprecation")
    public void setNavigationOpen(final boolean isNavigationOpen) {
        this.mIsNavigationOpen = isNavigationOpen;
        final ImageButton mainButton = (ImageButton) findViewById(R.id.button_main);
        if(isNavigationOpen) {
            mainButton.setBackgroundResource(R.drawable.bg_helios_active);
        } else {
            mainButton.setBackgroundDrawable(null);
        }
@Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        //----------Code for Navigation Drawer setup
        // 2. App Icon 
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        // 2.1 create ActionBarDrawerToggle
                 actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
                            R.drawable.arrow_up, R.string.drawer_open, R.string.drawer_close){

                        /** Called when a drawer has settled in a completely closed state. */
                        public void onDrawerClosed(View view) {
                           // getActionBar().setTitle(NavigationPanelFragment.activeFragmentTitle);
                           // invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
                        }

                        /** Called when a drawer has settled in a completely open state. */
                        public void onDrawerOpened(View drawerView) {
                         //   getActionBar().setTitle(NavigationPanelFragment.activeFragmentTitle);
                          //  invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
                        }
                    };


                // 2.2 Set actionBarDrawerToggle as the DrawerListener
                drawerLayout.setDrawerListener(actionBarDrawerToggle);
          }
@Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
         actionBarDrawerToggle.syncState();
    }
private void setupOnClickListenerForMainButton() {
        final ImageButton mainButton = (ImageButton) findViewById(R.id.button_main);
        mainButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(final View v) {
                toggleNavigationPanel();


            }
        });
    }
@Override
    public boolean onMenuItemSelected(final int featureId, final MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                toggleNavigationPanel();
                break;

            default:
                break;
        }
        return super.onMenuItemSelected(featureId, item);
    }
public void onNewsClicked(final View view) {
        if(mIsNavigationOpen) {
            toggleNavigationPanel();
        }

        if (isFragmentVisible(NewsFragment.TAG_NEWS_FRAGMENT)) {
            return;
        }

        FragmentStackManager.getInstance().clearBackStack(getSupportFragmentManager());
        mActiveFragment = NewsFragment.newInstance(getSupportFragmentManager());
        updateActionBarTitle();
        //For swipe action close drawer on button click
         drawerLayout.closeDrawer(R.id.drawer);
    }
public void onListsClicked(final View view) {
        if(mIsNavigationOpen) {
            toggleNavigationPanel();
        }

        if (isFragmentVisible(ListsContainerFragment.TAG_LIST_CONTAINER_FRAGMENT)) {
            return;
        }

        FragmentStackManager.getInstance().clearBackStack(getSupportFragmentManager());
        mActiveFragment = ListsContainerFragment.newInstance(getSupportFragmentManager());
        updateActionBarTitle();
        //For swipe action close drawer on button click
        drawerLayout.closeDrawer(R.id.drawer);
    }
private void toggleNavigationPanel() {
        //final FragmentStackManager manager = FragmentStackManager.getInstance();
        if (mIsNavigationOpen) {
            //NavigationPanelFragment.removeInstance(getSupportFragmentManager());
            updateActionBarTitle();
            drawerLayout.closeDrawer(R.id.drawer);
        } else {
            drawerLayout.openDrawer(R.id.drawer);
            final TextView title = (TextView) findViewById(R.id.main_title);
            title.setText(getString(R.string.title_applications));
            //NavigationPanelFragment.newInstance(getSupportFragmentManager(), manager.getTopTitle());
        }


        setNavigationOpen(!mIsNavigationOpen);
    }

You might want to concentrate on the main_button and togglenavigationpanel. I added the condition if(drawerlayout.isdraweropen(R.id.drawer)){closedrawerlayout...} but it didn't do the trick. I was wondering if anyone has any idea regarding the same?

Thanks!

Answer 1

When you've set up the drawer a listener has been added which has callbacks for when the drawer is in either final state, so what you need to do is reset the drawable inside these callbacks. I've shown what I think your final code should look like, minus some cleaning up you need to do, hope it helps

private DrawerLayout drawerLayout;
private NavigationPanelFragment dlDrawer;
private ActionBarDrawerToggle actionBarDrawerToggle;
private ImageButton mDrawerButton; //Store it! - findViewById is *Expensive*
private TextView mTitle;

@Override
protected void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);
    mTitle = (TextView) findViewById(R.id.main_title);
    mDrawerButton = (ImageButton) findViewById(R.id.button_main);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
            R.drawable.arrow_up, R.string.drawer_open, R.string.drawer_close) {

        public void onDrawerClosed(View view) {
            mDrawerButton.setImageResource(R.drawable.bg_helios_inactive);
        }

        public void onDrawerOpened(View drawerView) {
            mDrawerButton.setImageResource(R.drawable.bg_helios_active);
        }

    };
    drawerLayout.setDrawerListener(actionBarDrawerToggle);
    setupOnClickListenerForMainButton(;
}

@Override //Note: I'd imagine this should be in onResume ...
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    actionBarDrawerToggle.syncState();
}

private void setupOnClickListenerForMainButton() {
    mDrawerButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(final View v) {
            toggleNavigationPanel();
        }
    });
}

...

private void toggleNavigationPanel() {
    //if ( drawerLayout.isOpen() ) { //I dont know what methods these objects have
    if ( dlDrawer.isOpen() ) { //but one of these must be sensibly storing its own state
        updateActionBarTitle();
        drawerLayout.closeDrawer(R.id.drawer);
    } else {
        drawerLayout.openDrawer(R.id.drawer);
        mTitle.setText(getString(R.string.title_applications));
    }
}