Using android's action bar
0 likes389 views
The document discusses using the Android action bar. It explains that the action bar is at the top of every activity screen and can include menu items, tabs, and other navigation elements. It provides steps for adding an action bar, including menu items, and handling clicks. It also covers splitting the action bar on narrow screens and enabling up navigation with the app icon.
Using android's action bar
- 1. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 1/16 You are here: Home (/) / Tutorials (/index.php/articles.html) / Articles (/index.php/articles.html) / Using Android's Action Bar Tweet 18 Check out our google+ page (https://plus.google.com/+101appsCoZa/?prsrc=3) Using Android's Action Bar Written by Clive Where's the action? The Action Bar 0Like Send 0Share Share
- 2. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 2/16 The Action Bar The Action Bar is at the top of every activity screen The app icon displays in it by default. You can replace the app icon with your company logo if you wish. You can also include tabs, drop-down lists, pop-ups and menus in the Action Bar. I’ll show you how to include menu items as Action items in the Action Bar. Use the Action Bar on all devices, well almost… The Action Bar has been available since Android 3.0 (Honeycomb, API level 11). The Support Library Using the support library makes the Action Bar available since Android 2.1 (API level 7). We’ll be using the support library in our tutorial.
- 3. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 3/16 Adding an Action Bar Import the ActionBar class Make sure that you import the correct ActionBar class: We’re using the support library class because we’re targeting earlier devices Which class you import depends on the devices that you target: API level 11 and above – import ActionBar API level 10 and below – import support.v7.app.ActionBar. This is the one we’ll import Create the activity Create the activity by extending the ActionBarActivity class. Include a theme Edit the AndroidManifest.xml file to include the Theme.AppCompat.Light theme Hiding the Action Bar You can hide the Action Bar:
- 4. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 4/16 Use getSupportActionBar() to get an instance of the Action Bar then call hide() to hide it Showing the Action Bar You can show the Action Bar by getting an instance of the Action Bar and then call show(): Showing the Action Bar Brand your app. Use your logo The image on the left can either be the app icon or your company logo Which image is displayed depends on these settings in the manifest: The icon attribute image is the default Include the logo attribute and this image will replace the icon image. But there’s a catch… The logo image will not show on any device running Android 10 and lower. Unless…
- 5. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 5/16 You include this code in your activity: Get an instance of the action bar by calling getSupportActionBar(). Then call setLogo() to set the logo If you use this workaround then you don’t have to include the logo attribute in the manifest. Action items Action items are menu options. You can display the most important action items in the Action Bar. Action items that are not important or cannot fit in the Action Bar end up in the action overflow. You can access the action overflow by pressing the action overflow button
- 6. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 6/16 Pressing the overflow button reveals the Settings item. The Help and Phone items are displayed as Action Buttons in the Action Bar Creating the action items Create the action items in a menu file and save it in the res>menu folder. Here’s a code snippet: Note the following: icon – this image will show in the Action Bar. It will not show in the overflow title – the title will show in the overflow. It will show in the Action Bar, if: you include withText in the showAsOption attribute there is room app:showAsAction – because we are using the support library, we must use the custom namespace (app) defined in the <menu> tag of the menu xml file: The namespace is defined in the menu tag
- 7. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 7/16 showAsAction – use this to declare whether or not you want the action item to appear in the Action Bar. Some common options are: ifRoom – shows the action item in the Action Bar if there is room withText – includes the action item’s title if there is room never – never show this action item in the Action Bar Always include an action title You should always include an action title because: only a title appears in the action overflow blind users need it for their screen readers long-pressing the Action Button displays a tooltip Long-pressing the Action Button displays the tooltip, Phone Getting action icons You can download free action icons from the official Android site (http://developer.android.com/design/downloads/index.html) Displaying the Action Bar in an activity The activity’s onCreateOptionsMenu() inflates the menu file and places the action items in the Action Bar. Here’s the code:
- 8. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 8/16 This inflates the menu resource file and loads the action items into the Action Bar Note the following: getMenuInflater().inflate() – inflates the menu found in the resource file into the menu object Handling clicks Pressing an action item, calls onOptionsItemSelected(), passing the selected item as a parameter. Here’s the code: Note the following:
- 9. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 9/16 getItemId() – gets the ID of the selected action item switch() – we use a switch statement to match the selected item ID with the id’s of our menu items as saved in the menu resource file. The appropriate code is executed if it matches message – we create a message for each of the action item id’s. The matching id’s message will display as a Toast (/articles/making-toast.html) Pressing an Action Button Action item icons in the Action Bar are known as Action Buttons. Pressing the Phone Action Button uses an intent to start another activity. The second activity This activity demonstrates the Split Action Bar and Up Navigation. Splitting the Action Bar You can split the Action Bar when running on narrow screens. The action items will display at the bottom of the screen. This leaves room for navigation and title elements at the top.
- 10. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 10/16 A narrow screen with a split Action Bar. The separate bar at the bottom of the screen displays the action items
- 11. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 11/16 The bar is not split on wide screens Splitting the Bar: It depends on the device Accommodating API 14 and higher For devices using API level 14 or higher, add the uiOptions attribute to specific activities or the application as a whole. Accommodating API 13 and below For devices using API level 13 or lower, add the <meta-data> element to the activities where you want to split the action bar:
- 12. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 12/16 Include the first <meta-data> element to split the Action Bar on older devices Navigating up with the app icon Up navigation takes the user to the parent of the current activity. The Back button takes the user to the previous activity.
- 13. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 13/16 If pressing an action button in activity A starts activity C then pressing the Up Navigation icon in activity C will return the user to activity A. If the user reached activity C from A via B then, pressing the Back button will first return to activity B and then to activity A
- 14. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 14/16 Enable the app icon as an Up button The caret to the left of the logo icon indicates an Up Button Here’s the code: Use getSupportActionBar() to get an instance of an Action Bar then call setDisplayHomeAsUpEnabled(true) to enable the Up Button For it to work you need to specify the parent activity in the manifest file: Add this code to the activity where you have enabled the Up Button Run the app The first activity The first activity will display the Action Bar with the Strawberry logo on the left and the Action Buttons on the right.
- 15. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 15/16 Android apps and Google Drive: Picking files (/index.php/articles/android-apps-and-google-drive- picking-files.html) Related items Change the device orientation. The Phone action item’s title is displayed in landscape mode but not in portrait mode. Pressing the Phone action button starts the second activity. The second activity The Action Bar is split if the screen is narrow. Change the device orientation. The Action Bar is not split when the device is in landscape mode. The app logo is also an Up Button. Pressing the logo returns the user to the first activity. I hope that you have found this tutorial useful. You may also be interested in Android Fragments, Action Bar, Menus, Notifications and Tabs. (http://www.amazon.com/Android-Fragments-Action-Menus-Notifications-ebook/dp/B00B7NQ2KQ/ref=sr_1_4? ie=UTF8&qid=1393233618&sr=8-4&keywords=clive+sargeant) This tutorial was created using Android Studio (http://www.amazon.com/Android-Studio-How-guide-tutorial- ebook/dp/B00HZ1O78S/ref=sr_1_3?ie=UTF8&qid=1393233618&sr=8-3&keywords=clive+sargeant). You can download the project files here (/downloads.html) Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files (/articles/importing- android-studio-projects-into-eclipse.html).
- 16. 22/05/2015 Using Android's Action Bar http://www.101apps.co.za/articles/usingandroidsactionbar.html 16/16 Android apps and Google Drive: A tutorial (/index.php/articles/android-apps-and-google-drive-a- tutorial.html) Converting Android Activities to Fragments (/index.php/articles/converting-android-activities-to- fragments.html) Let your apps take a giant leap. A Tutorial (/index.php/ebooks/let-your-apps-take-a-giant-leap-a- tutorial.html) Android: Launching activities (/index.php/articles/android-launching-activities.html)