Boardies IT Solutions Tel:

Transcription

1 Navigation Drawer Manager Library H ow to implement Navigation Drawer Manager Library into your A ndroid Applications Boardies IT Solutions info@boardiesitsolutions.com Tel:

2 Contents Version Information... 2 Introduction... 3 Importing the Library... 3 Installing the Apache Maven Repository... 3 Importing the library into your project... 3 Creating the User Interface... 4 Implementing the Code... 5 Adding a menu header... 8 Adding a text view menu with an icon... 8 Adding a text view with no icon or summary... 8 Adding a switch... 9 A text view with summary... 9 A text view with summary and icon... 9 Header with Summary... Error! Bookmark not defined. How to implement an on click listener for a navigation menu item Using Generic DrawClickListener Using a Specific OnClickListener Final Notes... 11

3 Version Information Author Version Number Description Boardies IT Solutions 1.0 Beta This is the initial release. Supports Android 2.2 and above. Boardies IT Solutions 2.0 Now supports the material design of Android 5.0 Lollipop Follows the Android Design Guidelines Spec Supports the Native Android API from Android 14 as well as the AppCompat Theme Support Libraries The code is now converted for Android Studio instead of Eclipse it should work in Eclipse but these instructions are for Android Studio

4 Introduction The Navigation Drawer Manager Library by Boardies IT Solutions makes use of the official native API s for the Navigation Drawer for devices with a minimum of Android API level 14, or if you prefer, you can use the Navigation Drawer with the use of the AppCompat themes. The navigation drawer, as you expect can either be opened by sliding your finger from the left edge or by clicking the action bar toggle button. Please note that the instructions provided in this document is assuming you are using Android Studio development IDE for developing your android applications. This document assumes that Android Studio and the SDK are already configured and setup and your application project has already been created. Importing the Library The recommended way of using the library is to use a local Apache Maven Repository for storing the library. Installing the Apache Maven Repository Download the latest version of Maven from and extract the archive to somewhere on your development PC. Next you need to create/modify a couple of environment variables. You need to create a new environment variable called MAVEN_HOME and set the path to be the root directory of where you just extracted the archive. For example, C:\maven. Next, modify your PATH environment variable to include the path of the above MAVEN_HOME path and the MAVEN_PATH/bin directory. That should be maven set up. Now the next part is to publish the library to your local maven repository. Extract the Navigation Drawer Manager library (download from to somewhere on your PC. Then load up a command prompt or terminal window and change directory to where you have extracted the library to. Then run the following command gradlew.bat clean build publishtomavenlocal The build should successfully be published without any issue. Importing the library into your project First things first we need to tell your applications project build files that it can look for libraries in a local maven repository. In order to do this, add the following to your project build.gradle file (not your top level build.gradle) android { repositories { mavenlocal()

5 Now we need to actually tell the gradle files about our library. In your build.gradle (again not the top level file) there should be a dependencies section towards the bottom. In the dependencies section, add the following line: compile 'com.boardiesitsolutions:navigationdrawermanager:2.0' You should see a message at the top of the screen informing you need to re -sync your Gradle files. Ensure the gradle files are re-synced and the library should now be ready for to use. Creating the User Interface In your activities layout add the following. Note, that if you are NOT using the AppCompat theme for your app then you should remove android.support.v7.widget.toolbar, failing to do so will result in an exception being thrown. <android.support.v4.widget.drawerlayout xmlns:android=" android:id="@+id/my_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitssystemwindows="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--Only include this toolbar if you are using the AppCompat theme--> <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minheight="?attr/actionbarsize" android:background="@color/appprimarycolour" /> <FrameLayout android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="match_parent"></framelayout> </LinearLayout> <ListView android:id="@+id/left_drawer" android:divider="@null" android:layout_width="match_parent" android:layout _height="match_parent" android:choicemode="singlechoice" android:background="#ffffff" /> </android.support.v4.widget.drawerlayout> Create a new XML layout file by right clicking on your project and going to New > Android XML File and specify the file name main_fragment.xml. This XML file will be the layout for the main content area of the your app. We re just going to keep it simple by having one textview that displays some text.

6 Add the following your XML file. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textsize="20dp" android:text="hello Fragment" /> </LinearLayout> Create a new source file called MainContentFragment which is a fragment which will show you the main content of the app, i.e. using the XML layout that we just created in ste p 4. This is done by right clicking on your project and going to New > Class. Provide it with the name MainContentFragment and make sure that it extends Fragment. In the MainContentFragment source code add the following code. Please note that whenever you are importing functions that are related to fragments make sure you import from android.support.v4.app and not android.app. package com.boardiesitsolutions.navigationdrawertutorial; import android.app.fragment; import android.os.bundle; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; public class MainContentFragment extends Fragment { public View oncreateview(layoutinflater inflator, ViewGroup container, Bundle savedinstancestate) { return inflator.inflate(r.layout.main_fragment, container, false); public void onactivitycreated(bundle savedinstancestate) { super.onactivitycreated(savedinstancestate); Implementing the Code Now go to your main activities class file. From this class you set up your fragment (the frame layout will be replaced by your fragment) and you will also set up your navigation drawer. First things first, we need to make sure that your activities class is extending the correct class. The class that you extend by will depend on what theme your application and/or your activities theme is using.

7 For example, if you are using the theme Theme.Holo or an equivalent form for Honeycomb and above devices, or if you are using Theme.Material or equivalent for Lollipop and above, then your main activities class should extend FragmentActivity and your fragment class should extend Fragment. Note: That when importing the FragmentActivity and Fragment classes then you should import from android.support.v4.app.fragmentactivity If you are using the theme Theme.AppCompat or equivalent then your main activities class and your fragment class should extend ActionBarActivity. Next step is set up your oncreate method. Below is the basics of what you need in your oncreate method. After the code below each part of the code is explained. public class MainActivity extends FragmentActivity { DrawerLayout mdrawerlayout; ListView mdrawerlist; Button btnselectmenuitem; ActionBarDrawerToggle drawertoggle; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); FragmentTransaction t = getsupportfragmentmanager().begintransaction(); Fragment frag = new MainContentFragment(); t.replace(r.id.framelayout, frag); t.commit(); //Only do the following two lines if you are using AppCompat theme //Toolbar toolbar = (Toolbar) findviewbyid(r.id.my_awesome_toolbar); //setsupportactionbar(toolbar); NavigationManager navigationmanager = new NavigationManager(this, mdrawerlayout, R.string.drawer_open, R.string.drawer_closed); /**Use the below instead of above if you are using the AppCompat theme**/ //AppCompatNavigationManager navigationmanager = new AppCompatNavigationManager(this, mdrawerlayout); /**If you are using AppCompat you need to parse in the toolbar, otherwise don't**/ drawertoggle = navigationmanager.setdrawertoggle(); mdrawerlayout.setdrawerlistener(drawertoggle); drawertoggle.setdrawerindicatorenabled(true); navigationmanager.prepareactionbar(); /*Set up an apapter and controls to your navigation drawer. Below * adds a header and two text views with a click listener */ NavigationManagerAdapter navadapter = new NavigationManagerAdapter(this); navadapter.add(new NavigationMenuItem("Header")); navadapter.add(new NavigationMenuItem("Item 1", "ITEM1", NavigationMenuItem.GuiType.TEXTVIEW, true, mclicklistener)); navadapter.add(new NavigationMenuItem("Item 2", "ITEM2", NavigationMenuItem.GuiType.TEXTVIEW, false, mclicklistener));

8 mdrawerlist = (ListView)findViewById(R.id.left_drawer); mdrawerlist.setadapter(navadapter); mdrawerlayout.setstatusbarbackgroundcolor(getresources(). getcolor(r.color.appprimarycolourdark)); protected void onpostcreate(bundle savedinstancestate) { super.onpostcreate(savedinstancestate); // Sync the toggle state after onrestoreinstancestate has occurred. mdrawertoggle.syncstate(); public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); mdrawertoggle.onconfigurationchanged(newconfig); public boolean onoptionsitemselected(menuitem item) { // Pass the event to ActionBarDrawerToggle, if it returns // true, then it has handled the app icon touch event if (mdrawertoggle.onoptionsitemselected(item)) { return true; // Handle your other action bar items... return super.onoptionsitemselected(item); The first part of the code, sets the content view, this loads the XML layout and displays it in your activity. The next part is using the FragmentTransaction. This loads FrameLayout that is in your XML and replaces it with your Fragment class. Your fragment class is instantiated, and the view is loaded into your FrameLayout. The next part is the tool bar. This is only needed if your applications activity, or your application default theme is using the AppCompat theme. If you are then you need to set up the toolbar and set it to be your action bar. This replaces the default Action Bar so it can be styled easily to match all Android versions as it is part of a support library. The next part stores a references to your Drawer Layout GUI object from your XML layout. Next, you instantiate the NavigationManager class and pass in the required parameters. If you are using the AppCompat theme, then you should use the AppCompat equivalent of this class AppCompatNavigationManager. After preparing your class object, you then get a reference to the DrawerToggle. This drawer toggle allows you to open the navigation drawer without needing to slide your finger from the left edge. You then enable the action bar drawer toggle and prepare the action bar which finishes off setting up the action bar and the toggle button.

9 Now that the navigation manager is setup and done all what s necessary to implement the Navigation Drawer we can now start adding items to our menu. The next step set ups an adapter class and you add new items to the adapter by calling the correct constructor and parsing in the correct GUIType Parameter. Below are a list of all the components you can add along with the parameter details. Adding a menu header This is nice and simple all you need to do is add the following line menuadapter.add(new NavigationMenuItem("Header")); Adding a text view menu with an icon There are two ways to add a text view, either using a generic List Item Click Listener which uses the Tag parameter to determine which item was pressed, or you can create a specific on click liste ner and pass the on click listener variable into the NavigationMenuItem constructor. For more information on how to implement the two types of on click listener, check the How to implement an on click listener for a navigation menu item. The icon is always passed a resource ID as a drawable menuadapter.add(new NavigationMenuItem("MenuItem", MENU_ITEM, NavigationMenuItem.GuiType.TEXTVIEW, true, R.drawable.ic_launcher, null)); Parameter 1 The menu text that is shown to the user Parameter 2 The tag for generic on click listener can be null if using specific on click listener Parameter 3 This always has to be NavigationMenuItem.GuiType.TEXTVIEW, entering a different value for this parameter may cause unexpected behaviour Parameter 4 This is a Boolean value to set whether the control should be added with the selection styling. If true, the menu item will look as if this menu item is selected, so you would probably want to make your first menu item selected. Note, that if you add multiple text views with thi s parameter set to true, then only the last menu item that you ve added will show as selected. Parameter 5 The onclick listener, can be null if using generic draw click listener Adding a text view with no icon or summary menuadapter.add(new NavigationMenuItem("World", MENU_ITEM, NavigationMenuItem.GuiType.TEXTVIEW, null)); Parameter 1 The menu text that is shown to the user Parameter 2 The tag for generic on click listener can be null if using specific on click listener Parameter 3 This always has to be NavigationMenuItem.GuiType.TEXTVIEW, entering a different value for this parameter may cause unexpected behaviour.

10 Parameter 4 The onclick listener, can be null if using generic draw click listener Adding a switch menuadapter.add(new NavigationMenuItem("Enabled", ENABLED, "Switch is turned on", "Switch is turned off", enabledoncheckedchangelistener, false)); Parameter 1 The menu text that is shown to the user Parameter 2 The tag for generic on click listener can be null if using specific on click listener Parameter 3 What the button says when it is enabled. Pass in null to use the default switch value Parameter 4 What the button says when it is disabled. Pass in null to use the default switch value Parameter 5 The on oncheckedchangelistener, can be null if using generic Parameter 6 The default value for the switch A text view with summary menuadapter.add(new NavigationMenuItem("Spanned", "Spanned", GuiType.TEXTVIEW_SUMMARY, "This is the summary", null)); Parameter 1 The menu text that is shown to the user Parameter 2 The tag for the generic on click listener can be null if using specific on click listener Parameter 3 Should be GuiType.TEXTVIEW_SUMMARY, specifying different type may result in unexpected behaviour Parameter 4 This is the summary text that is shown to the user Parameter 5 The on click listener, can be null if using a generic on click listener A text view with summary and icon menuadapter.add(new NavigationMenuItem("Summary", "Summary", GuiType.TEXTVIEW_SUMMARY, "This is a summary", R.drawable.ic_launcher, null)); Parameter 1 The menu text that is shown to the user Parameter 2 The tag for the generic on click listener can be null if using specific on click listener Parameter 3 Should be GuiType.TEXTVIEW_SUMMARY, specifying different type may result in unexpected behaviour

11 Parameter 4 This is the summary text that is shown to the user Parameter 5 This is the drawable int ID of the icon that should be shown Parameter 6 The on click listener, can be null if using a generic on click listener How to implement an on click listener for a navigation menu item As mentioned earlier, the text view can use an on click listener from either a generic list view on click listener or creating a specific on click listener and passing the variable to the NavigationMenuItem constructor. Using Generic DrawClickListener To create the generic list item click listener you need to create a class like the code below. private class DrawerClickListener implements ListView.OnItemClickListener { public void onitemclick(adapterview<?> parent, View view, int position, long id) { NavigationMenuItem menuitem = (NavigationMenuItem)mDrawerList.getItemAtPosition(position); if (menuitem.tag == MENU_ITEM_1) { Toast.makeText(getApplicationContext(), "You clicked menu item 1", Toast.LENGTH_LONG).show(); As you can see the tag is what is used to determine from the DrawClickListener which menu item was pressed. At the top of your MainActivity class it is recommended to create a static final string variable that is passed as the tag for the navigation menu item constructor, this tag is then used in various if statements to perform the task for each item. When using the DrawClickListener then the onclicklistener argument within the NavigationMenuItem constructor should be passed as null. For example the code may look something like the below (note this doesn t contain the other code required in between it is just base code). private static final String MENUI_ITEM_1 = "MENU_ITEM_1"; If you are using this method then after you set the adapter then you need to add the following code. mdrawerlist.setonitemclicklistener(new DrawClickListener()); menuadapter.add(new NavigationMenuItem("Hello", MENU_ITEM_1, NavigationMenuItem.GuiType.TEXTVIEW, R.drawable.ic_launcher, null); Using a Specific OnClickListener If your using a specific on click listener for each menu item, then the tag is not required and you can just pass null to the tag parameter within the NavigationMenuItem constructor. In order to use this on click listener type use the following code.

12 private OnClickListener menuitemonelistener = new OnClickListener() { ; public void onclick(view v) { Toast.makeText(getApplicationContext(), "WOO HOO YOU CLICKED HELLO", Toast.LENGTH_LONG).show(); menuadapter.add(new NavigationMenuItem("Hello", null, NavigationMenuItem.GuiType.TEXTVIEW, R.drawable.ic_launcher, menuitemonelistener); Final Notes This library is currently in beta release and we are working on this continually to bring improvements to the library. If you have any feature requests then please us at support@boardiesitsolutions.com. If you find any bugs within the library, then please report them via our bug reporting service at