Android The Toolbar
Credits Lectures are heavily based of materials and examples from: Android Programming The Big Nerd Ranch Guides Bill Phillips and Brian Hardy April 7, 2013
ToDoList We re going to extend the ToDoList application from Lecture 19. Here we are going to create a toolbar.
Toolbar vs ActionBar The toolbar is the latest style of bar as of 5.0 The actionbar was what was used prior to 5.0 We will want to ensure that our program is backwards compatible
AppCompat Library We need to add the app compatibility library Go to File -> Project Structure Select app -> Dependencies tab Add the library dependency appcompat-v7
Styles You will want to be using the appcompat Dark ActionBar in your styles
ActionBarActivity We know want our Activities (SingleFragmentActivity and ToDoPagerActivity) to implement ActionBarActivity rather than FragmentActivity
ToolBar You should now see your toolbar, at the top. Note how it says MyList
+ Menu Item We will be adding the + menu item When clicked this item will allow the user to add a new todo item
Adding Strings First we ll add the strings that we need to achieve our tasks
Create options menu xml Under res/menu create a new file called menu_to_do_list.xml. It might already exist Here we are making that + icon for users to add new ToDo s
menu_to_do_list.xml The icon list here represents the + icon. It s a standard icon that comes with Android The last line says only display in Action Menu if there s room, otherwise display in overflow menu
Landscape The last line in the previous slide, said display text if room. On a Landscape device there is room so it ll display the text, New ToDo
Enabling the Menu in Code Now we need to hook up the Options Menu to the ToDoListFragment In OnCreate we need to indicate it has an Options Menu with sethasoptionsmenu
Connect the XML File Now we want to specify how the options in the Menu by tying it to the xml file In ToDoListFragment we ll add the following
See the Options Menu You should now see the options Menu If you long click on the + you ll see New Crime
Responding to user actions Now, when the user clicks options in the menu we want to create a new ToDo item. First, we need extend the model to allow for this.
ToDoSet First let s get rid of the for loop that makes the ToDos, as from now the user can make them using the program Now, make the ability to add a ToDo
ToDo Now, when we create a new ToDo let s set the date so we don t get any null pointers
Responding to user click Now in ToDoListFragment we ll need to respond to the user clicking the +
Now try it Add new ToDos. When you navigate back to the list screen you should see them.
The up button WILL SEND THE USER BACK TO THE PARENT SCREEN
Enabling the up button The up button sends the user to the previous screen We ll be enabling the Up button In the ToDoFragment, the up button will navigate the user back to the list fragment.
Enabling the up button We can enable the up button, by specifying the parent element on the item in the Manifest. Here we are saying, if you re in the pager activity, and you press up, then go back to the list
The up Button working Now it should navigate you to the parent
Show/Hide Subtitle
Show the subtitle We ll be activating the feature in the ToDoListFragement We ll be responding to the menu item click
Adding the subtitle menu item Let s add our second menu item to menu_to_do_list.xml
Show the Subtitle
Now it should show Click the menu item to show the subtitle clicked show subtitle
Toggling the subtitle We also have to make sure to change the menu items title between show and hide First we need to create a boolean to keep track of the visibility
Switch flag Each time you click the button you want to switch the flag for visibility
Toggle Flag Each time the button is clicked, make the flag toggle Also, make the label toggle Also, show/hide the subtitle
Toggle the subtitle
Toggling should work
Rotation on rotation we want to make sure we keep the state of the subtitle, and don t reset it to not showing. Try rotating right now. The subtitle should go back to its default state each time.
Save boolean variable We need to save the state of our boolean variable when we rotate First create a constant for saving
Save boolean variable Next, save the boolean variable in the onsavedinstancestate method
Updating the subtitle Because we ll be updating the subtitle on rotation and when the menu item is selected we should have a method for it.
Update onitemselected Let s now update the onitemselected method to use the udpatesubtitle method
updateui now we add the call to updatesubtitle to updateui
Updating initial state Last, we need to show the correct string show/hide subtitle when we rotate. We do this in oncreateoptionsmenu
All done Now, both your menu items should work as described.