Cosc 5/4730 Android Navigation: Menus, ActionBar/ToolBar, and Navigation Drawer.

Slides:



Advertisements
Similar presentations
JQuery Mobile. Benefits Required links Remember that we need to add the links to the head, in this order.
Advertisements

CE881: Mobile and Social Application Programming Simon M. Lucas Quiz, Walkthrough, Exercise, Lifecycles, Intents.
CE881: Mobile and Social Application Programming Simon M. Lucas Menus and Dialogs.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Cosc 5/4730 Game Design. A short game design primer. A game or animation is built on an animation loop. – Instance variables of “objects” are updated.
All About Android Introduction to Android 1. Creating a New App “These aren’t the droids we’re looking for.” Obi-wan Kenobi 1. Bring up Eclipse. 2. Click.
© by Pearson Education, Inc. All Rights Reserved.
Cosc 5/4730 Material Design Spec’s and Toolbar.. Material Design First and for most, Material Design is a spec used by android to have app look similar.
Cosc 5/4730 Blackberry and Android: Menus. BLACKBERRY.
Cosc 5/4730 Game Design. A short game design primer. A game or animation is built on an animation loop. – Instance variables of “objects” are updated.
Cosc 4730 Android TabActivity and ListView. TabActivity A TabActivity allows for multiple “tabs”. – Each Tab is it’s own activity and the “root” activity.
Android Development (Basics)
PROG Mobile Java Application Development PROG Mobile Java Application Development Event Handling Creating Menus.
StressChill App Click the StressChill icon (shown to the right) to open the app. If you do not see this on the desktop, you will find it in the pull up.
05/09/ Introducing Visual Basic Sequence Programming.
How to Download and Install a Sharp Print Driver on a Mac.
POWER POINT CREATING A PRESENTATION. What is a Presentation? A presentation is an informative talk, such as a lecture or speech, that usually includes.
MICROSOFT WORD GETTING STARTED WITH WORD. CONTENTS 1.STARTING THE PROGRAMSTARTING THE PROGRAM 2.BASIC TEXT EDITINGBASIC TEXT EDITING 3.SAVING A DOCUMENTSAVING.
IE 411/511: Visual Programming for Industrial Applications
Cosc 5/4730 Introduction: Threads, Android Activities, and MVC.
@2011 Mihail L. Sichitiu1 Android Introduction GUI Menu Many thanks to Jun Bum Lim for his help with this tutorial.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
CS378 - Mobile Computing More UI - Part 2. Special Menus Two special application menus – options menu – context menu Options menu replaced by action bar.
Create Navigation Drawer Team 2 Zhong Wang Jiaming Dong Philip Wu Lingduo Kong.
Programming Mobile Applications with Android September, Albacete, Spain Jesus Martínez-Gómez.
Lecture Set 2 Part A: Creating an Application with Visual Studio – Solutions, Projects, Files.
Understand applications and their components activity service broadcast receiver content provider intent AndroidManifest.xml.
Cosc 5/4730 Dialogs and below 3.0 and above (fragment)
Cosc 5/4730 Android Communications Intents, callbacks, and setters.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Cosc 4730 Android Fragments. Fragments You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own.
Action Bar Action Bar Contains Logo Application Name Options Menu SW in Android 3.0 and above was HW in Older Versions.
Copyright © Curt Hill More Components Varying the input of Dev-C++ Windows Programs.
Android Using Menus Notes are based on: The Busy Coder's Guide to Android Development by Mark L. Murphy Copyright © CommonsWare, LLC. ISBN:
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Styles, Dialog Boxes, and Menus. Styles Allow creation of a common format – placed in res/values/styles.xml – file name is incidental Can be applied.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
ListView and ExpandableListView
Pearson Webcast Series
Android Application Lifecycle and Menus
CS378 - Mobile Computing More UI - Part 2. Special Menus Two special application menus – options menu – context menu Options menu replaced by action bar.
1 Android Development Lean and mean introduction Based on a presentation by Mihail L. Sichitiu.
Lecture Set 2 Part A: Creating an Application with Visual Studio – Solutions, Projects, Files 8/10/ :35 PM.
More UI Action Bar, Navigation, and Fragments
TCS Internal Maps. 2 TCS Internal Objective Objective :  MAPS o Integration of Maps.
Cosc 5/4735 YouTube API. YouTube The YouTube Android Player API enables you to incorporate video playback functionality into your Android applications.
Cosc 4735 Collapsing Toolbar Support Pallette. Collapsing toolbar. Using a ScrollingView like listview, Recyclerview, or a NestedScrollView – Mostly done.
Creating a Web Site Creating a new Web site Defining and using folders Creating and editing Web pages Viewing pages in a Web browser.
Lecture 8 the Preference Menu. Settings... Sudoku settings s Music Play background music Hints Show hints during play We add some strings to the strings.xml.
CHAPTER 4 Fragments ActionBar Menus. Explore how to build applications that use an ActionBar and Fragments Understand the Fragment lifecycle Learn to.
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
Cosc 5/4730 Support design library. Support Design library Adds (API 9+) back support to a number of 5.0 lollipop widgets and material design pieces –
Fragments and Menus Chapter 4 1. Objectives Learn three different types of menus: options, context, and popup Learn to configure the ActionBar and Toolbar.
Menus. Menus are a common user interface component in many types of applications. The options menu is the primary collection of menu items for an activity.
Lab7 – Appendix.
Android Programming - Features
CS240: Advanced Programming Concepts
GUI Programming Fundamentals
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
Politeknik Elektronika Negeri Surabaya
Mobile Application Development BSCS-7 Lecture # 11
Review 2: Material Design and key widgets.
CMPE419 Mobile Application Development
Android Developer Fundamentals V2 Lesson 4
Android Developer Fundamentals V2 Lesson 4
Cosc 4730 An Introduction.
CMPE419 Mobile Application Development
Activities and Fragments
Mobile Programmming Dr. Mohsin Ali Memon.
Android Sensor Programming
Presentation transcript:

Cosc 5/4730 Android Navigation: Menus, ActionBar/ToolBar, and Navigation Drawer

Navigation visual Back Button ActionBar/ ToolBar Menu Note: If there is physical menu button, then the menu does not show on the screen Navigation Drawer Action Buttons

ActionBar and Menus The default activity in Andriod Studio is an ActionBarActivity (via the support.v7 library) – This provides an ActionBar and menu in the same place back to Android (api 10) – For the purpose of this lecture, that is what I’m going to use. We have full support for fragments, ActionBar, and menus There is an older menu system from api 1, that still works, but I’m not covering it. – Note, there is a new ToolBar (via support.v7 library) that can replaces the ActionBar and allows more support for lollipop APIs, which we will see later. Also the toolbar can be moved around the screen and support Material Design elements.

MENUS Android

Menus Menus are created via an xml document – First create a menu xml (normally in res/menu) with menu as the type. You can add items (and sub menus). You can also group the items as well.

Menu.xml example: <item android:orderInCategory="5" android:title="item1"/> <item android:orderInCategory="10" android:title="item2"/> <item android:orderInCategory="1" android:title="item3"/> <item android:orderInCategory="3" android:title="item4"/> <item android:orderInCategory="2" android:title="item5"/> Note the orderInCategory determines the order of display, so this will show: Item3 Item5 Item3 Item1 item2

Sub menus in xml Create and item that will be the submenu heading – Then create a menu instead of the item tags

Menu Java code Use onCreateOpensMenu and onOptionsItemSelected Which android studio creates for you by public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu, menu); return true; public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. int id = item.getItemId(); if (id == R.id. item1) { //assuming previous xml document return true; //do something here to handle the menu. } … //handle the rest. return super.onOptionsItemSelected(item); }

Popup menus. Add a click listener (or longtouch, whatever) to anything. – We are using a TextView, so make sure it clickable – It will then call our code, called showPopupMenu(View v) Note this is not an override, just a method we are using public void onClick(View v) { showPopupMenu(v); }

showPopupMenu private void showPopupMenu(View v){ PopupMenu popupM = new PopupMenu(this, v); popupM.inflate(R.menu.popup); popupM.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() public boolean onMenuItemClick(MenuItem item) { //do something return true; } }); popupM.show(); }

Popup Menus Visual

Fragments and Menus Fragments can contribute to the menu as well – Including if there is no menu. – In the OnCreate() method of the fragment, you must add setHasOptionsMenu(true); – Otherwise the menu methods will not be called. A note, when the fragment is showing, the menu will be there and when the fragment is “removed”, then those menu items are removed as well. – Remember, fragments are nice, because of the encapsulation.

Fragments and Menus (2) Override the following, note the onCreateOptionsMenu is a little public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater); inflater.inflate(R.menu.frag2menu, menu); public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.frag2item: //do something. return true; } return super.onOptionsItemSelected(item); }

Fragment Example The show Fragment X is menu from the activity.

Menu creation Menu items can be changed later by – invalidateOptionsMenu(); – Which calls the onCreateOptionsMenu method again. – So if you need to change, enable/disable menu items, you can pretty easily.

ACTIONBAR Android

Action Bar The Action bar can provide a “Back” button to the parent Activity. We can also add “buttons”, except they are menu items, via the xml – We can also add sub menu to the ActionBar that drop down when clicked.

Xml code From Googles page: resource.htmlhttp://developer.android.com/guide/topics/resources/menu- resource.html – Using the xmlns:app=" app:showAsAction= – ifRoom Only place this item in the Action Bar if there is room for it. – withText Also include the title text (defined by android:title) with the action item. You can include this value along with one of the others as a flag set, by separating them with a pipe |. – never Never place this item in the Action Bar. – always Always place this item in the Action Bar. Avoid using this unless it's critical that the item always appear in the action bar. Setting multiple items to always appear as action items can result in them overlapping with other UI in the action bar. – collapseActionView The action view associated with this action item (as declared by android:actionLayout or android:actionViewClass) is collapsible. – Introduced in API Level 14.

Xml code example <item app:showAsAction="ifRoom" <item android:title="sub menu" app:showAsAction="always" > <item android:orderInCategory="1" android:title="subitem1"/> <item android:orderInCategory="2" android:title="subitem2"/> <item android:title="item1"/> <item android:title="item2"/> Show if room, if not show in normal menu Always shows and creates a Drop menu (separate from standard Menu) Normal menu items

End result This shows how it can look – The sub menu item has been clicked to show the sub menu.

Action Bar We can also have “buttons” as well and change them as needed, programmatically. This example uses the ViewPager fragment example and adds buttons for Previous and Next – also finish, but that doesn’t do anything The buttons may show at the bottom of the screen if there is not enough space on the actionbar.

Java code We need to use the invalidateOptionsMenu(); every time the page is changed, so – Using the ViewPager.setOnPageChangeListener(…) Otherwise the main work is in the onCreateOptionsMenu(Menu menu)

OnCreateOptionsMenu public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.activity_screen_slide, menu); Enable the previous menu item, if we are not on the first page (xml). menu.findItem(R.id.action_previous).setEnabled(viewPager.getCurrentItem() > 0); Add either a "next" or "finish" button to the action bar, depending on which page is currently selected. Done programmatically. MenuItem item = menu.add(Menu.NONE, R.id.action_next, Menu.NONE, (viewPager.getCurrentItem() == mPagerAdapter.getCount() - 1) ? R.string.action_finish : R.string.action_next); item.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT); return true; }

And the result looks like First page: Third page Last page

Other things xml. android:titleCondensed="string“ android:onClick="method name“ android:actionViewClass="class name" android:actionProviderClass="class name" android:alphabeticShortcut="string" android:numericShortcut="string" android:checkable=["true" | "false"] The layout allows you to add say a search bar to the top.

NAVIGATION DRAWER

Navigation Drawer Provides a slider window that allows you have navigation, like a listview, but not always on screen. ClosedOpened

Navigation Drawer It uses a Drawer layout that takes two “views” – Both views are likely layouts or fragments – View/layout 1 is the main content. – The one that shows when the drawer is closed. – View/layout 2 is the drawer content. – What shows when the drawer is open. » Mostly like has a listview as well.

Navigation Drawer xml code <android.support.v4.widget.DrawerLayout … android:layout_width="match_parent" android:layout_height="match_parent"> <…Layout android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:layout_gravity="start" //default left to right and switch for right to left languages. android:choiceMode="singleChoice"/>

DrawerLayout Java The listview is setup like normal – Except on a selection, we also close the drawer. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); In the setOnItemClickListener use mDrawerLayout.closeDrawers(); We need to tie the drawer to the actionbar, so the icons show, uses the ActionBarDrawerToggle.

DrawerLayout Java (2) enable ActionBar app icon to behave as action to toggle nav drawer getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); ActionBarDrawerToggle ties together the proper interactions between the sliding drawer and the action bar app icon mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */ mDrawerLayout, /* DrawerLayout object */ R.string.drawer_open, /* "open drawer" description for accessibility */ R.string.drawer_close /* "close drawer" description for accessibility */ ) { public void onDrawerClosed(View view) { getSupportActionBar().setTitle(R.string.app_name); //change the title back, when closed. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } public void onDrawerOpened(View drawerView) { getSupportActionBar().setTitle("Categories"); //change the name, when opened. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } }; mDrawerLayout.setDrawerListener(mDrawerToggle);

DrawerLayout Java (3) Lastly, these two or it doesn’t drawer correctly in the actionbar. /** * When using the ActionBarDrawerToggle, you must call it during * onPostCreate() and onConfigurationChanged()... 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); // Pass any configuration change to the drawer toggls mDrawerToggle.onConfigurationChanged(newConfig); }

DrawerLayout Java (4) Lastly, a fix to the menu as well. public boolean onOptionsItemSelected(MenuItem item) { // The action bar home/up action should open or close the drawer. // ActionBarDrawerToggle will take care of this. if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } …

Demos The NavDrawerFragDemo – Uses the Shakespeare fragments from listview demos in the Drawerlayout Not the ListFragment, since you need to change the text color correctly, for a dark background and light text color. Also changing the listview rowlayout. NavDrawer is google example, show a listview and fragment. – Some corrections for the newer version of the drawerlayout.

ToolBar The ToolBar is a replacement for the ActionBar – Basically everything works the same, but uses a support.v7.widget.Toolbar. – It’s better suited to cover with Lollipop and Material Design lecture.

References Surprisingly, very few and mostly google. sources/menu-resource.html sources/menu-resource.html oid/app/Fragment.html#onOptionsItemSelect ed%28android.view.MenuItem%29 oid/app/Fragment.html#onOptionsItemSelect ed%28android.view.MenuItem%29 /actionbar.html /actionbar.html

Q A &