Android Navigation View With Tabs

In this tutorial we will create a simple app which has a NavigationView, a Toolbar with Tabs and a simple list of items, that are displayed for each selected tab.

Tabs & Navigation lollipop and above

Tools used:

  • Android Studio 2.2 Preview 4
  • Android Emulator 5x API 22

Project

  1. Create a new project by choosing the empty template and then click the Next button until the project is created.
  2. Switch the visibility of project structure by selecting “Project” option like in the image below.
    Android Project Structure

Part 1: NavigationView

First, we will create the NavigationView like explained further in the tutorial.

Summary

  • add compile ‘com.android.support:design:24.0.0’ to dependencies in build.gradle
  • handle theme setup in values – styles.xml
  • handle theme setup in values-v21 – styles.xml
  • set the themes in AndroidManifiest.xml
  • create menu items for NavigationView
  • add strings in strings.xml
  • add dimensions for NavigationView’s header in dimens.xml
  • create the xml file for the NavigationView’s header
  • set TabLayout and NavigationView in the activity_main.xml
  • setup NavigationView in MainActiviy.java

Explanation

  • build.gradle

    In the app module directory, open the build.gradle file and add ‘com.android.support:design:24.0.0’ to dependencies.

  • Theme setup in values – styles.xml

    Under app – src- main – res – values – styles.xml, set the default AppTheme to support a NoActionBar theme.

    Styles.xml from this directory, will be used for Android versions lower than API Level 21 (Lollipop). Also, keep in mind that for lower versions of Android the status bar won’t be transparent when the NavigationView is opened.

  • Theme setup in values-v21 – styles.xml

    You will have to create this directory because we will use 2 attributes which are available only for Lollipop and above. The directory must be created like this:

  1. Right click on the res directory
  2. Click New – Android resource directory
  3. Select values directory and api level  like in the image below:
    Values v21
  4. Now, inside this directory create a styles.xml file like this:
    1. right click on the values-v21 directory 
    2. click New – Values resource file
    3. write styles.xml
    4. This is the code you should add:

The 2 attributes that are available only from API Level 21 and above are:

  • android:windowDrawsSystemBarBackgrounds: Flag indicating whether this Window is responsible for drawing the background for the system bars. If true and the window is not floating, the system bars are drawn with a transparent background and the corresponding areas in this window are filled with the colors specified in {@link android.R.attr#statusBarColor} and {@link android.R.attr#navigationBarColor}.
  • android:statusBarColor: this will make the status bar transparent when the NavigationView is opened
  • Set themes in AndroidManifest.xml

  • Menu items for NavigationView

    Now, we will have to create a menu directory in which we will have to create a xml file containing the NavigationView items.

    1. Right click on the res directory
    2. Click NewAndroid resource directory
    3. Select menu directory menu
    4. Now right click on the menu directory
    5. Click New – Values resource file
    6. Write navigation_items.xml
    7. Add the following code:
  • strings.xml

    Add the following strings to res – values – strings.xml

     

  • dimens.xml

    Go to res – values – dimens.xml and add the following code.

  • nav_header.xml

    Under res – layout create a new xml file and name it nav_header.xml. This layout will be added as header to the NavigationView. It contains 2 texts and an icon (this file is taken from the NavigationView project from Android Studio Templates).

  • activity_main.xml

    In this xml file we will set the NavigationView, toolbar and tabs, using CoordinatorLayout. In the image below, we have described the hierarchy of the views (which view contains which view).

    CoordinatorLayout Hierarchy

    As you can see, DrawerLayout is the root view of this layout and this is the correct way to do it. If you embed DrawerLayout inside other layout (let’s say a RelativeLayout as root view) and you place other UI components outside the DrawerLayout, those UI components will overlap the NavigationView when opened like below:
    DrawerLayout wrong hierarchy

  • Another wrong example, that I did in a project of mine, was that I used CoordinatorLayout as root view instead of DrawerLayout. And because of that, the navigationView was not being opened over the status bar.Also, you have to keep in mind that FrameLayout (the container) will be replaced in Java code with ContainerFragment.java fragment. This class handles the displaying of the list of items and tabs. You will see later how to use this class. So, by using the correct hierarchy, we can now play with scroll events for the toolbar, due to the use of CoordinatorLayout. But if we don’t follow this hierarchy, the scroll events or UI elements might behave in a strange way.
Explanation of some properties
  • android:fitsSystemWindows="true" Read TYL 15
  • android:theme="@style/AppTheme.AppBarOverlay" Read TYL 16
  • app:layout_scrollFlags="scroll|enterAlways" Read TYL 17
  • app:tabMode="scrollable" Read TYL 11
  • app:layout_behavior="@string/appbar_scrolling_view_behavior" Read TYL 13
  • MainActivity.java (intermediary code)

    At this point, you can run the app to see how the NavigationView looks like and how it behaves on different Android versions (pre-Lollipop and from Lollipop and above).

Next, we will proceed to part 2 of this tutorial: on setting up the tabs.

Part 2: Setup Tabs

Summary

  • setup xml file with ViewPager for the container view
  • setup xml file with RecyclerView for a page from ViewPager
  • setup xml file with a title TextView for RecyclerView rows
  • create a new Java class for RecyclerView’s adapter
  • create a new Fragment for ViewPager’s pages
  • create a new Fragment which represents the container. From here we will create the tabs and handle ViewPager’s adapter.

Project

  • fragment_container.xml

  • fragment_page.xml

  • recycler_item.xml

    Note: android:background="?android:attr/selectableItemBackground" is used in order to have a click effect on the RecyclerView when its rows are clicked.

  • SimpleRecyclerAdapter.java

  • PageFragment.java

  • ContainerFragment.java

  • MainActivity.java (final)

You can also see the project on Github.

Android: CoordinatorLayout RecyclerView First Item not visible

Problem

I had to implement a Toolbar with tabs, together with CoordinatorLayout, and the content of each tab had to be a list of items, for which I used RecyclerView. But when I ran the app, the first item in the list was overlapped by the tabs, so it was not fully visible.

This is how my xml file looked like:

FrameLayout is replaced in the code with a fragment containing the RecyclerView.

Solution

This property MUST be added to your scrolling view in order to make all list’s items visible:

In my case, as I was using a FrameLayout which contained a RecyclerView, I had to add this property to the FrameLayout, and not directly to the RecyclerView as it was in another xml file and wouldn’t work. But if you declare your RecyclerView directly inside CoordinatorLayout, you should add this property to it, and everything should be fine.

Just a final Note

If you are using ListView instead of RecyclerView together with CoordinatorLayout, you will encounter different scrolling and UI issues that will be difficult to handle. At first I had a ListView and tried to make the app work with it, but I ended up in refactoring the code and used RecyclerView instead. This way, all the UI issues were solved much more easily.

So my recommandation is to refactor your code and replace ListViews with RecyclerViews if you intend to benefit from the power of CoordinatorLayout.

Android: Add Tabs using TabLayout

In this tutorial we will see how to add tabs to a project by using TabLayout together with ViewPager, and some other new views from the design library 🙂

Before starting I will make summary to present the main idea of creating the tabs.

  • xml
    • in the xml file, because we use TabLayout together with a scrollable view, it is recommended to use CoordinatorLayout  as root view
    • Toolbar and TabLayout should live inside an AppBarLayout
    • ViewPager should live outside the AppBarLayout
  • java class
    • add this method setSupportActionBar(toolbar); in order to use the Toolbar
    • create an adapter for ViewPager and setup the ViewPager
    • in order to setup the tabs, we use only 1 method:
      • setupWithViewPager(viewPager);

Now let’s see the code!

1. build.gradle (Updated)

We have to add to the build.gradle file the dependency for the design support library.

2. Change Theme to “Theme.AppCompat.Light.NoActionBar”

In order to change the theme, go to app – src – main – res – values – styles and change the default theme “Theme.AppCompat.Light.DarkActionBar” to “Theme.AppCompat.Light.NoActionBar”.

This step is needed because we will use Toolbar which replaces the action bar.

3. activity_main.xml file

We will get back to this code later to explain more about the new types of views.

4. fragment_fragment1.xml (Updated)

We will create 3 fragments which will represent each tab so we will have 3 tabs too 😀 So go to app – src – main – res – layout and create a new xml file named fragment_fragment1.xml.

5. fragment_fragment2.xml

6. fragment_fragment3.xml

7. TabsListener.java interface (New)

8. Fragment1.java (Updated)

Now go to app – src – main – java and create a new fragment class named Fragment1.java.

8. Fragment2.java

9. Fragment3.java

10. MainActivity.java (Updated)

Now go to the MainActivity.java class and add the following code:

NOTE: According to android developer documentation (https://developer.android.com/reference/android/support/design/widget/TabLayout.html)

void setTabsFromPagerAdapter(PagerAdapter adapter)This method is deprecated. Use setupWithViewPager(ViewPager) to link a TabLayout with a ViewPager together. When that method is used, the TabLayout will be automatically updated when the PagerAdapter is changed.

And this is the result of our tutorial:

android tabs

 

Now, let’s understand what is with CoordinatorLayout and the other views from activity_main.xml file.

  • CoordinatorLayout: about this layout you can learn from this post.
  • AppBarLayout: It’s a vertical LinearLayout (former action bar) which implement many features of material design, especially scrolling gestures.
  • app:layout_behavior=”@string/appbar_scrolling_view_behavior”: This is used if we want to affect the toolbar, when a view, like RecyclerView, is being scrolled.
  • app:tabMode=”scrollable”: This is used in order to make the tabs scrollable. If not set, their width will be wrapped in order to make all the tabs fit the screen.
  • app:layout_scrollFlags=”scroll|enterAlways”: 
    • scroll: this flag should be set for all views that want to scroll off the screen – for views that do not use this flag, they’ll remain pinned to the top of the screen
    • enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern

 

Did you know about CoordinatorLayout?

Definition

CoordinatorLayout is a more advanced FrameLayout, that now, with all these new changes with Material Design, it was introduced in the DesignLibrary, in order to provide help and more control over touch events between child views.

Usage

It is mainly used with:

  • FloatingActionButton – if for example you have a view that might overlap the FloatingActionButton, CoordinatorLayout will help you to handle this by using additional callbacks that will move the FAB up, automatically, when that view appears.
  • or ActionBar (now called App Bar) together with Toolbar – In this case it is used to help you achieve different scrolling techniques.

References

http://android-developers.blogspot.ro/2015/05/android-design-support-library.html http://android-developers.blogspot.ro/2015/05/android-design-support-library.html

Poll

Did you know about CoordinatorLayout?

View Results

Loading ... Loading ...

.