Best way to implement navigation box scrolling

Question

I am adding a navigation box to one of my applications, and I started wondering if it would be better to switch from using a ListView to multiple TextView for the list items of the navigation boxes. Looking at the Google Design Guide for the contents of the navigation box (specifically the Scrolling section) , I noticed that it might look better with multiple TextView s.

Right now I'm using ListView and ImageView in my navigation box (it’s a bit like. However, when I scroll in my navigation box (I do this by rotating the landscape of the device, because there aren’t enough elements in my list yet), only ListView scrolls, and ImageView stays as it is, I want it to be able to scoll more than this, where ImageView also scrolls with ListView .

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

What are the problems that I am facing and how can I solve them?

Update:

In the Google I / O app (2014), at the bottom of the navigation tablet’s layout is LinearLayout , which I think is responsible for the list of items shown. Can someone explain how this will work?

Answer 1

only ListView scrolls are displayed, while ImageView remains

It looks like your box contains an ImageView at the top, followed by a ListView . In this configuration, only the ListView will scroll (because this is the only view that scrolls).

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

it seems that LinearLayout is at the bottom of the navigation box layout, which, I think, is responsible for the list of items shown in the figure. Can someone explain how this will work?

They use LinearLayout as a container to store all TextView s:

 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 that the reason they use LinearLayout , and to inflate all the elements programmatically, is to easily use separator elements:

 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 will need to create a separate item type and use a separation layout there, which can become more cumbersome.

At first glance , however, this code simply reinvents the wheel, since all this is possible with the ListView .

Answer 2

As of May 29, 2015 (after Google I / O 2015), you can use the Android Design Support Library to add a NavigationView for your application (s). The Android Developer Blogspot article says the following:

Type of navigation

A navigation box can be an important focus for identification and navigation in your application, and consistency in design here can significantly affect how easy your application is to navigate, especially for users for the first time. NavigationView facilitates this by providing the framework needed for the navigation box, as well as the ability to inflate navigation elements through a menu resource.

...

Then you can start using the Design library with one new dependency:
compile 'com.android.support:design:22.2.0'

...

The Design Library, AppCompat, and the entire Android Support Library are important tools in creating the building blocks needed to create a great, modern Android app without creating everything from scratch.

Answer 3

Implementing a scrollable navigation box using android.support.v4.widget.DrawerLayout and NavigationView can be even simpler than described below: http://android-developers.blogspot.ru/2015/05/android-design-support-library. html

This article suggests adding each element of your Navigation Drawer application as a menu item. This is a cool and definitely way for most developers. But what if you already have a navigation box implemented inside, for example. Line layout?

It looks like you can easily make your old good layout scrollable: just set it as "app: headerLayout" in the NavigationView. No more changes required! So, in the final solution, you will have:

A layout of your activity, similar to the blog post above, but without the attribute "app: menu =" @ menu / drawer ", for example:

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- your content layout --> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" /> </android.support.v4.widget.DrawerLayout> 

And the layout for all of your old box contents in the "drawer_header.xml" file has been transferred without any changes to this scrollable box, for example. this is:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:choiceMode="singleChoice" android:orientation="vertical"> <TextView android:id="@+id/myFirstButton" android:onClick="onMyFirstButtonClick" android:text="@string/my_first_button_title"/> <TextView android:id="@+id/goToTheTopButton" android:onClick="onGoToTheTopButtonClick" android:text="@string/go_to_the_top_title"/> <View style="@style/Divider"/> <!-- Some other "menu items" --> </LinearLayout> 

For a full working example, see this activity mockup: https://github.com/andstatus/andstatus/blob/master/app/src/main/res/layout/timeline.xml and this latch where I moved to scrollable navigation box : https://github.com/andstatus/andstatus/commit/a80b299de714bdd65cacb138ffb31adc3ea23a98