Mobile Application Development BSCS-7 Lecture # 11

UI Controls – Appbar App bar, formerly known as Action bar in Android. Appbar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Dependencies and prerequisites Android 2.1 (API level 7) or higher Setting Up App Bar Add a Toolbar widget to your activity, and set it as activity's App bar. In its most basic form, action bar displays title for activity on one side and an overflow menu on other. Beginning with Android 3.0 (API level 11), all activities that use default theme have an ActionBar as an app bar. However, app bar features have gradually been added to native ActionBar over various Android releases. For this compatibility reason, you should use support library's Toolbar class to implement your activities' app bars. Using support library's toolbar helps ensure that your app will have consistent behavior across widest range of devices.

UI Controls – Appbar  Setting Up App Bar Add a Toolbar to an Activity Add v7 appcompat support library to your project, as described in Support Library Setup. Make sure the activity extends AppCompatActivity Note: Make this change for every activity in your app that uses a Toolbar as an app bar. In app manifest, set <application> element to use one of appcompat's NoActionBar themes. Using one of these themes prevents app from using native ActionBar class to provide app bar. For example: <application android:theme="@style/Theme.AppCompat.Light.NoActionBar" /> Add a Toolbar to activity's layout. For example, following layout code adds a Toolbar and gives it appearance of floating above activity: -> Add the layout in activity xml code: <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/my_toolbar" android:layout_width="match_parent" android:layout_height=“wrap_content" android:background=“@color/toolbarColor" android:elevation="4dp"> </android.support.v7.widget.Toolbar> <include layout="@layout/my_toolbar" android:id=@+id/my_toolbar/>

UI Controls – Appbar  Setting Up App Bar Add a Toolbar to an Activity In activity's onCreate() method, call activity's setSupportActionBar() method, and pass activity's toolbar. This method sets toolbar as app bar for activity. For example: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar); setSupportActionBar(myToolbar); } Use App Bar Utility Methods Once you set toolbar as an activity's app bar, you have access to various utility methods provided by the v7 appcompat support library's ActionBar class. To use ActionBar utility methods, call activity's getSupportActionBar() method. hide() • setSubtitleTextColor(int color) setLogo(Drawable icon) • setTitle(CharSequence title) setNavigationIcon(Drawable icon) • setTitleTextColor(int color) setOverflowIcon(Drawable icon) • setSubtitle(CharSequence subtitle)

UI Controls – Appbar  Adding and Handling Actions Add Action Buttons All action buttons and other items available in action overflow are defined in an XML menu resource. To add actions to action bar, create a new XML file in your project's res/menu/ directory. Add an <item> element for each item you want to include in action bar. <item android:id="@+id/action_favorite" android:icon="@drawable/ic_favorite_black_48dp" android:title="@string/action_favorite" app:showAsAction="ifRoom"/> An app bar with a single action button and an overflow menu. Override onCreateOptionsMenu method for overflow menu and call getMenuInflater().inflate() method to provide menu resource and return true. Respond to Actions When user selects one of app bar items, system calls activity's onOptionsItemSelected() callback method, and passes a MenuItem object to indicate which item was clicked. In onOptionsItemSelected(), call MenuItem.getItemId() method to determine which item was pressed. ID returned matches the value you declared in corresponding <item> element's android:id attribute.

UI Controls – Appbar  Adding An Up Action Add an Up button to your app bar, so users can navigate back to app's home screen. App should make it easy for users to find their way back to app's main screen. Provide an Up button on app bar for all activities except the main one. When user selects Up button, app navigates to parent activity. Declare a Parent Activity To support Up functionality in an activity, declare the activity's parent. In manifest, set an android:parentActivityName attribute. android:parentActivityName attribute was introduced in Android 4.1 (API level 16). To support devices with older versions of Android, define a <meta-data> name-value pair, where name is "android.support.PARENT_ACTIVITY" and value is name of parent activity. Enable the Up Button To enable the Up button for an activity that has a parent activity, call the app bar's setDisplayHomeAsUpEnabled() method. Typically, you would do this when the activity is created. Do not catch Up action in activity's onOptionsItemSelected() method. Instead, that method should call its superclass, as shown in Respond to Actions. Superclass method responds to Up selection by navigating to parent activity, as specified in app manifest.

UI Controls – Appbar  Action Views and Action Providers v7 appcompat support library Toolbar provides several different ways for users to interact with app. Now add two versatile components: Action view is an action that provides rich functionality within app bar. For example, a search action view allows user to type their search text in app bar, without having to change activities or fragments. Action provider is an action with its own customized layout. Action initially appears as a button or menu item, but when user clicks action, action provider controls action's behavior in any way you want to define. For example, action provider might respond to a click by displaying a menu. Add an Action View To add an action view, create an <item> element in the toolbar's menu resource, as Add Action Buttons describes. Add one of the following two attributes to the <item> element: actionViewClass: The class of a widget that implements the action. actionLayout: A layout resource describing the action's components. <item android:id="@+id/action_search" android:title="@string/action_search" android:icon="@drawable/ic_search" app:showAsAction="ifRoom|collapseActionView" app:actionViewClass="android.support.v7.widget.SearchView" />s

UI Controls – Appbar  Action Views and Action Providers Add an Action Provider To declare an action provider, create an <item> element in toolbar's menu resource, as described in Add Action Buttons. Add an actionProviderClass attribute, and set it to fully qualified class name for ActionProvider class. For example, following code declares a ShareActionProvider, which is a widget defined in support library that allows your app to share data with other apps: <item android:id="@+id/action_share" android:title="@string/share" app:showAsAction="ifRoom" app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>

UI Controls – Appbar  Main code

UI Controls – Appbar  Sub Activity code

User Interface Events Different events are generated from user, such as physical key presses, touch events, and menu navigation. Event Handlers and Event Listeners Most user interaction with an Android device is captured by system and sent to a corresponding callback method. For example if physical BACK key is pressed, the onBackPressed() event handler method is called. User interaction with View objects can also support event listeners. Event Listener Methods onClick() - From View.OnClickListener. Called when user either touches item (when in touch mode), or focuses upon item with navigation-keys or trackball and presses suitable "enter" key or presses down on trackball. onLongClick() - From View.OnLongClickListener. Called when user either touches and holds item (when in touch mode), or focuses upon item with navigation-keys or trackball and presses and holds suitable "enter" key or presses and holds down on trackball (for one second). onFocusChange() - From View.OnFocusChangeListener. Called when user navigates onto or away from item, using navigation-keys or trackball.

User Interface Events onKeyDown() - From View.OnKeyListener. Called when user is focused on item and presses a hardware key on device. onKeyUp() - From View.OnKeyListener. Called when user is focused on item and releases a hardware key on device. onTouchEvent() - From View.OnTouchListener. Called when user performs an action qualified as a touch event, including a press, a release, or any movement gesture on screen (within bounds of item). onCreateContextMenu() - From View.OnCreateContextMenuListener. Called when a Context Menu is being built (as result of a sustained "long click"). Example of physical key press public boolean onKeyDown(int KeyCode, KeyEvent event){ if(keyCode==KeyEvent.KEYCODE_CAMERA){ return true; } return super.onKeyDown(keyCode, event);

UI Events – Menu  Types Options menu and app bar Options menu is primary collection of menu items for an activity. It's where you should place actions that have a global impact on app, such as “Search,” “Compose email,” and “Settings”. In Android 2.3 or lower, users can reveal options menu panel by pressing Menu button. On Android 3.0 and higher, items from options menu are presented by app bar as a combination of on-screen action items and overflow options. Beginning with Android 3.0, Menu button is deprecated, so you should migrate toward using action bar (Appbar) to provide access to actions and other options. Context menu and contextual action mode A context menu is a floating menu that appears when user performs a long-click on an element. It provides actions that affect selected content or context frame. In Android 3.0 and higher, use contextual action mode to enable actions on selected content. This mode displays action items that affect selected content in bar at top of screen and allows user to select multiple items. Popup menu Displays a list of items in a vertical list that's attached with view that invoked menu. It's good for providing an overflow of actions that relate to specific content or to provide options for a second part of a command. Actions in a popup menu should not directly affect the corresponding content—that's what contextual actions are for. Rather, popup menu is for extended actions that relate to regions of content in your activity.

UI Events – Menu  Defining Menu in XML For all menu types, Android provides a standard XML format to define menu items. Instead of building a menu in your activity's code, you should define a menu and all its items in an XML menu resource. You can then inflate the menu resource (load it as a Menu object) in your activity or fragment. To define menu, create an XML file inside your project's res/menu/ directory and build menu with following elements: <menu> Defines a Menu, which is a container for menu items. A <menu> element must be the root node for the file and can hold one or more <item> and <group> elements. <item> Creates a MenuItem, which represents a single item in a menu. This element may contain a nested <menu> element in order to create a submenu. <group> An optional, invisible container for <item> elements. It allows you to categorize menu items so they share properties such as active state and visibility. Download icons from http://developer.android.com/design/downloads/index.html (click material collection) https://www.google.com/design/icons/

UI Events – Menu  Defining Menu in XML <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">     <item android:id="@[+][package:]id/resource_name"           android:title="string"           android:titleCondensed="string"           android:icon="@[package:]drawable/drawable_resource_name"           android:onClick="method name"           android:showAsAction=["ifRoom" | "never" | "withText" | "always" | "collapseActionView"]           android:actionLayout="@[package:]layout/layout_resource_name"           android:actionViewClass="class name"           android:actionProviderClass="class name"           android:alphabeticShortcut="string"           android:numericShortcut="string"           android:checkable=["true" | "false"]           android:visible=["true" | "false"]           android:enabled=["true" | "false"]           android:menuCategory=["container" | "system" | "secondary" | "alternative"]           android:orderInCategory="integer" />     <group android:id="@[+][package:]id/resource name"            android:checkableBehavior=["none" | "all" | "single"]            android:visible=["true" | "false"]            android:enabled=["true" | "false"]            android:menuCategory=["container" | "system" | "secondary" | "alternative"]            android:orderInCategory="integer" >     </group>     </item> </menu>

UI Events – Menu  Creating an Option Menu

UI Events – Menu  Creating an Option Menu d