How to implement navigation drawer in your android app with an example

Navigation Drawer Example - androidhunger.com

Hello everyone, welcome back to androidhunger.com. Here in this session, I am going to discuss on implementing a navigation drawer in your android app with some sample college app for students.

This app has different sections like Time table, Exam Schedule, Attendance and Result section which helps the student to get updated with all the college stuff and his involvement in it. However, all the data shown here is static data, but you can extend the idea of this to develop a new application of this kind.

So, let’s get started.

Contents:

Project on Github     Download the app

Create a new Navigation Drawer app

I will create a new android application by selecting Navigation Drawer activity in Android Studio. Refer image below,

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

So after Android Studio does its thing and eventually show you ‘Gradle build finished’ (:P just kidding, if you have a good configuration, everything will load fine), you can see some layout files and an activity file (MainActivity.java) with some code written in it. Basically, it has the navigation menu, icons, header and handling the menu item clicks and all that stuff. Here I will use that and extend it to leverage the code Android Studio gave us by default 😀

Project on Github     Download the app

Navigation Menu

I will go step by step and tell you about the application we are going to build. First, I will finish the navigation menu layout.

If you open activity_main.xml file at app/res/layout directory, you can see the code for NavigationMenu.

In the above snippet in the last line app:menu="@menu/activity_main_drawer" which says that the menu for this is located at  menu directory in the res folder. So now let us edit the menu items.

Open the activity_main_drawer.xml file and place the following code in it.

If you look at the above code, I created a menu using menu, item, and group.
menu which is the root element and it can have sub child’s/sub elements like item and group.

item which is the single menu item, we can divide/separate the menu by creating an another menu as the sub-child of item element. I also gave a title to the sub menu as ‘Social’ .

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

In the above screenshots, you can see an icon beside each menu item, that can be set using the android icon attribute android:icon="@drawable/image_name", these icons are either android default images or you can download any icon of your wish and use them. The social network icons I used are from https://icons8.com/ the other icons are default android icons.

So now the NaviginationMenu is completed, now I will link this menu item clicks to its related fragment.

In the MainActivity.java file,

I initialized the NavigationView using the following couple of lines,

I will handle the menu click items in the following lines of code,

Here I got the id of each menu item and use that id to check and start a new fragment and for social links, I also pass the URL of the appropriate social network link for Android Hunger and start a new activity, here I use same WebViewFragment to load all of my web pages of different social networks.

Now let us see each of the fragment, and what is does.

Project on Github     Download the app

Navigation Menu item – HomeFragment

In the HomeFragment.java file in the onCreate function, I initialize the layout( R.layout.home) for this fragment.

Let us see home.xml file at res/layout/home.xml

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

In the above screenshots, I nested different layouts, both horizontal and vertical scroll view, a custom view to draw an horizontal dividing line and many more.

You can also look at the component tree of the layout,

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

I used a  LinearLayout to show name, semester, department and registration number, the layout is as follows,

Next, I used a View attribute to display a horizontal line just as a separator,

Then a simple TextView which says Important Info.

Now a ScrollView with some TextView’s in it. As you know ScrollView should have only one child, so I use a LinearLayout and place all the TextView there.

Project on Github     Download the app

Next I will display a HorizontalScrollView to show some buttons,

I will now handle this button clicks in its Fragment(HomeFragment).

Initialise the buttons, in viewCreated() method, place the following lines.

I will set a click listener to it,

So now I will let the fragment implement click listeners.

Now it will create a new method onClick,

So now when a button is clicked I will start its related Fragment.

Project on Github     Download the app

Navigation Menu item – TimeTableFragment

In the TimeTableFragment.java file in the onCreate function, I initialize the layout( R.layout.timetable) for this fragment.

Let us see timetable.xml file at res/layout/timetable.xml

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

The component tree of the layout,

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Here the main part is the TableLayout where I display the time table with subjects and time and below it a   LinearLayout to display the subject full names.

Also placed these two Layouts in a ScrollView, and to make the ScrollView center, I used RelativeLayout to set android:layout_centerVertical="true" as ScrollView’s attribute.

TableLayout have multiple child elements TableRow’s and here I placed some TextView’s in its rows.

Next, a LinearLayout of TextView’s to display each subject’s name.

Project on Github     Download the app

Navigation Menu item – ExamScheduleFragment

In the ExamScheduleFragment.java file in the onCreate function, I initialize the layout( R.layout.examschedule) for this fragment.

Let us see examschedule.xml file at res/layout/examschedule.xml

 

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

This layout is pretty simple, it just consists of TextView’s all in a ScrollView

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Below is the layout snippet,

Project on Github     Download the app

Navigation Menu item – AttendenceFragment

In the AttendenceFragment.java file in the onCreate function, I initialize the layout( R.layout.attendence) for this fragment.

Let us see examschedule.xml file at res/layout/attendence.xml

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

So here, I just used a simple Spinner to select the semester and then in display that semester’s attendance in TextView. The Spinner is something like which you can call it a dropdown too. There are some methods on Spinner like on onItemSelected so we can do something when the item in the Spinner is changed. Let’s see all that cool stuff now.

So in the AttendenceFragment I initialize this Spinner,

also set an adapter to it, to show some items in the Spinner.

Here I stored the Spinner item list in a separate file called srings.xml where we can store all the strings used in our app.

Open /app/res/values/strings.xml and add the following string array.

So I used this array as R.array.semisters to set the adapter.

So now, I displayed the Spinner with some items, I also need to listen to the item change in the Spinner. So I use item selected listener on this Spinner.

and a method to use when implementing AdapterView.OnItemSelectedListener

So when the semester changes, I just updated the TextView with some static value for attendance.

Project on Github     Download the app

Navigation Menu item – ResultFragment

The Result screen is very similar to the previous screen attendance, here I use the same layout, the only change is the TextView when the Spinner item is changed.

See the following snippet,

Project on Github     Download the app

Navigation Menu item – WebViewFragment

In the Navigation Menu, there are some social links like Facebook, G+, Twitter, YouTube, and Github. So when these items are pressed I will load up its related web page. A detailed explanation of implementing WebView in Android is discussed in my previous post.

So in the onNavigationIemSelected method inMainActivity which I just discussed, I will just pass the URL of the respective social network site to WebViewFragment which then loads the web page.

So in WebViewFragment I will read the URL sent,

and pass it to a function callWebClient which calls the WebViewClient,

and the callWebClient(gurl); function,

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

Navigation Drawer Example - androidhunger.com

Navigation Drawer Example – androidhunger.com

That is it for this post, please feel free to look at some of the previous posts here.

1 comment

  1. Eric says:

    Please, how to I create WebViewFragment that Managed the URL of the facebook, google+ ?
    I will be greatful if the code of the WebViewFagment can send to me. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *