Farbod Salamat-Zadeh Farbod Salamat-Zadeh - 3 months ago 22
Android Question

Best way of implementing a scrolling navigation drawer

I have been adding a navigation drawer to one of my apps, and I started to wonder whether or not it would be better to switch from using a

ListView
to multiple
TextView
s for the navigation drawer list items. Looking at the Google Design Guidelines on Navigation Drawer content (specifically the section on 'Scrolling'), I noticed that it may look nicer with multiple
TextView
s.

At the moment, I am using a
ListView
and
ImageView
in my navigation drawer (it looks a little like this. However, when I scroll in my navigation drawer (I do this by turning my device landscape as there are not enough items in my list yet), only the
ListView
scrolls, and the
ImageView
stays as it is. I want it to be able to scoll more like this, where the
ImageView
is also scrolled with the
ListView
.

Additionally, I found that my
ListView
in my navigation drawer does not have the ripple effects as shown in this image although other
ListView
s in my other
Activity
s and
Fragment
s do.

What are the issues I am facing and how could I go about resolving these?

Update:



In Google's I/O App (2014), there seems to be a
LinearLayout
at the bottom of the navigation drawer layout which I think is responsible for the list of items shown. Could someone explain how this would work?

Answer

only the ListView scrolls, and the ImageView stays as it is

It sounds like your drawer contains an ImageView at the top and then a ListView follows. With this configuration only the ListView will scroll (because it's the only view that's scrollable).

You need to add the ImageView as a header which is always at the beginning of the list. As one of the comments suggested, do listView.addHeaderView.

there seems to be a LinearLayout at the bottom of the navigation drawer layout which I think is responsible for the list of items shown. Could someone explain how this would work?

They use the LinearLayout as a container to hold all the TextViews:

private void createNavDrawerItems() {
    mDrawerItemsListContainer = (ViewGroup) findViewById(R.id.navdrawer_items_list);
    ...
    int i = 0;
    for (int itemId : mNavDrawerItems) {
        mNavDrawerItemViews[i] = makeNavDrawerItem(itemId, mDrawerItemsListContainer);
        mDrawerItemsListContainer.addView(mNavDrawerItemViews[i]);
        ++i;
    }
}

I believe the reason they use a LinearLayout and inflate all the items programmatically is to be able to use separator items easily:

private View makeNavDrawerItem(final int itemId, ViewGroup container) {
    ...
    if (itemId == NAVDRAWER_ITEM_SEPARATOR) {
        layoutToInflate = R.layout.navdrawer_separator;
    } else if (itemId == NAVDRAWER_ITEM_SEPARATOR_SPECIAL) {
        layoutToInflate = R.layout.navdrawer_separator;
    } else {
        layoutToInflate = R.layout.navdrawer_item;
    }
    ...
    return view;
}

In a ListView you'd have to create a separate item type and use the divider's layout there, which could possibly get more cumbersome.

At first glance, however, this code just seems to be re-inventing the wheel as all of this is possible with a ListView.

Comments