NavigationView slow to open / Skipping frames (Android Design Lib)

Question

I'm using a NavigationView supplied by the Android Design Library. I've found after adding a few items to it that is performing quite poorly. On first launch it takes a second or so to open for the firs time. Here's a screenshot of the UI.

I'll try to post some of the relevant bits of code.

Drawer XML

<group android:checkableBehavior="single">

    <item
        android:id="@+id/home"
        android:checked="false"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/about"
        android:checked="false"
        android:icon="@drawable/ic_about"
        android:title="About" />

    <item
        android:id="@+id/gallery"
        android:checked="false"
        android:icon="@drawable/ic_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_action_settings"
        android:title="Settings" />

    <item
        android:id="@+id/navigation_subheader"
        android:title="Categories">
        <menu>

            <item
                android:id="@+id/science"
                android:checked="false"
                android:icon="@drawable/ic_science"
                android:title="Science" />

            <item
                android:id="@+id/parenting"
                android:checked="false"
                android:icon="@drawable/ic_parenting"
                android:title="Parenting" />
            <item
                android:id="@+id/android"
                android:checked="false"
                android:icon="@drawable/ic_android"
                android:title="Android" />
            <item
                android:id="@+id/technology"
                android:checked="false"
                android:icon="@drawable/ic_tech"
                android:title="Technology" />
            <item
                android:title=""
                android:checkable="false"
                android:visible="false"
                android:orderInCategory="200"/>

        </menu>
    </item>
</group>

MainAct

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    // Initializing Toolbar and setting it as the actionbar
    toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);


    //Initializing NavigationView
    navigationView = (NavigationView) findViewById(R.id.navigation_view);

    //Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

        // This method will trigger on item Click of navigation menu
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {


            //Checking if the item is in checked state or not, if not make it in checked state
            if (menuItem.isChecked()) menuItem.setChecked(false);
            else menuItem.setChecked(true);

            //Closing drawer on item click
            drawerLayout.closeDrawers();

            Log.v(TAG + "-S", "Pre_Switch = " + mCurCheckPosition);

            //Check to see which item was being clicked and perform appropriate action
            switch (menuItem.getItemId()) {


                case R.id.home:
                    homeFragment();
                    return true;
                case R.id.about:
                    webFragment();
                    return true;
                case R.id.gallery:
                    galleryFragment();
                    return true;
                case R.id.science:
                    scienceFragment();
                    return true;
                case R.id.parenting:
                    parentingFragment();
                    return true;
                case R.id.android:
                    androidFragment();
                    return true;
                case R.id.technology:
                    technologyFragment();
                    return true;
                case R.id.settings:
                    Intent i = new Intent(MainActivity.this, SettingsActivity.class);
                    startActivity(i);
                default:
                    return true;


            }
        }
    });

    // Initializing Drawer Layout and ActionBarToggle
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){

        @Override
        public void onDrawerClosed(View drawerView) {
            // Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
            super.onDrawerClosed(drawerView);
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            // Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
            super.onDrawerOpened(drawerView);
        }
    };

    //Setting the actionbarToggle to drawer layout
    drawerLayout.setDrawerListener(actionBarDrawerToggle);

    //calling sync state is necessay or else your hamburger icon wont show up
    actionBarDrawerToggle.syncState();

}

And finally here is the error im seeing in the logs from the Choreographer, i'm hoping this is just a bug in the lib however im wondering if someone else came across this and might have a work around.

I/Choreographer﹕ Skipped 117 frames!  The application may be doing too much work on its main thread.

Full source is available here: https://github.com/caman9119/The_Jones_Theory

Answer 1

Found the issue in my header.xml I was using a background.png that was 1080x720p. I scaled the image down to ~400x300 and voila, interesting problem indeed.

Answer 2

If you are using dynamic images for the background (using user facebook or g+ banner by example) and using Picasso this piece of code can be usefull:

ImageView background = (ImageView) findViewById(R.id.background);
Picasso
        .with(context)
        .load([Your image source here])
        .fit()
        .centerCrop()
        .into(background)

Answer 3

Had the same problem, i was using 512 x 512 images in the drawer list. All images were initially placed in the 'drawable' folder but when i moved them to the 'drawable-xxhdpi' folder, it was butter smooth.