Android: Basic modern navigation

27/01/2014 | Add comment

In this tutorial we’ll build basic navigation application that will switch between fragments using the latest Navigation Drawer layout from Google.

As one of the more modern UI patterns nowadays turns out to be the side bar menu navigation, the helpful layout that appears from left or right and gives you more possibilities. It was not long ago (actually last year) when clients wanted the same tab bar layout in the Android applications just as on the iPhone. Not that there was a constraint implementing it but it was rather odd having the tabbar down there when all UI rules and ideas said the opposite – put the tabbar up there. Meanwhile, the official Twitter application has already established its UI patterns with UI elements such as the “swipeable list item” or (more important) the pull to refresh list. The pull to refresh lists are being used even today, with its evolutionary versions such as the ActionBar pull to refresh in the new Google applications (such as GMail). What this has to say? Something pretty obvious. Applications that are being used by the majority and accepted as UI/UX friendly and “idiot-proof”, define the way all other apps will behave in future. Thus, when Facebook made its updates and brought the side navigation, it was just a matter of time when the users and developers would understand the importance and usability of the component and start using/implementing it. At the beginning there were individual implementations that we’ve come across when working with many clients. Then, there were 3rd party “Sliding Menu” libraries (not one, but many) that did their job (and are used in many projects that lack refactor and updates today) up until Google brought its Navigation Drawer to the light of the developers’ day. Besides the fact that Google tries to make developers use this “native” layout for the Sliding Menu UI Pattern it also means that new, fresh and good ideas are accepted even by giants such as Google. The implementations are also part of the support library which helps us build “drawer” applications for older Android versions.

Components of the drawer

The first basic component of the Drawer pattern in the Android SDK is the “DrawerLayout” layout that is supposed to be the root of all other UI elements in a “drawer” application. The Drawer in its most basic for should have a ListView and FrameLayout. The ListView is used to show the items that are supposed to be navigated (say: “Friends, Events, Messages”). The FrameLayout serves to include the content of each of this items, which in our example would be 3 different Fragments. What we’ll implement is the basic Navigational layout and logic that can be reused from project to project, additional adaptation can be done by the developer quite easily.

Then we need ActionBarDrawerToggle object so that we can make the connection between the ActionBar and the DrawerLayout object. The simple implementation goes like this:

The last two parameters are used as indication for the strings that need to be used when the Drawer is opened/closed.

The ic_navigation_drawer is a 9patch drawable made by Android Asset Studio which exports nice and ready to use resource.

Then we make the “link” between the Drawer Layout and the Drawer Toggle by:

The third most important thing is the Activity. The launcher Activity needs to be ActionBarActivity which is something whose definition is taken as dependency from the actionbar-support-v7 project in the extras folder of the SDK (in my case that’d be: android-sdk/extras/android/support/v7/appcompat). Link this project as dependency to your project. This Activity’s style needs to extend Theme.AppCompat (or Theme.AppCompat.Light appropriately if needed) as main style. Without it, you’ll get pretty explanatory exception when running the application.

In the onPostCreate method of the ActionBarActivity (MainActivity) we’ll call the mNavToggle.syncState() method just to make sure that when the application is rotating or restoring its state from “somewhere” – the navigation drawer keeps its state.

The last thing at this point would be to create (if needed) custom adapter for the ListView. That is something we won’t explain now.

Fragments

We will create 3 fragments named DwarfFragment, GnomeFragment and DragonFragment. Each one of them will extend the AbstractFragment which has few more other methods that do not need to be reimplemented in each fragment separately. The AbstractFragment would allow us to generalize the implementation of repetitive code and, by defining abstract methods, force each of its children implement the required methods – if needed afterwards (for this example it is not needed). Our AbstractFragment looks like this:

As you can see, not much of explaining needed. We’ll extend this Fragment for every Fragment in our application later.

Then we need to create the 3 necessary fragments. The only difference in each of this Fragments would be the onCreateView method implementation, which is basically the same, just the fragment layout definition is different:

The other two fragments need the fragment_gnome and fragment_dragon layout definition.

The fragments are ready.

Switching the fragments

In the launcher (MainActivity) we need to have two methods that are implemented like this:

The first method (selectItem) needs to be called in onItemClick callback for the ListView so that the appropriate logic performs when an item in the ListView is clicked which, also, makes sure the required Fragment is shown in the FragmentManager. That is done by using the showFragment method which is implemented in its most simple form for replacing Fragments in the manager. The R.id.fragment_container use here is from the activity_main.xml definition discussed before.

Now we have MainActivity which takes care of the DrawerLayout object and the ListView with its adapter and onItemClick listener, an ActionBarDrawerToggle object set as drawer listener for the Drawer Layout, the 3 fragments which are managed via the FragmentManager and the transactions. When item in the ListView is clicked, we show the appropriate fragment as content in the app.

Easy isn’t it? Go for the code.

Published in: android, development, tutorials | Tags: , , ,