Android. The Toolbar

Transcription

1 Android The Toolbar

2 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

3 ToDoList We re going to extend the ToDoList application from Lecture 19. Here we are going to create a toolbar.

4 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

5 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

6 Styles You will want to be using the appcompat Dark ActionBar in your styles

7 ActionBarActivity We know want our Activities (SingleFragmentActivity and ToDoPagerActivity) to implement ActionBarActivity rather than FragmentActivity

8 ToolBar You should now see your toolbar, at the top. Note how it says MyList

9 + Menu Item We will be adding the + menu item When clicked this item will allow the user to add a new todo item

10 Adding Strings First we ll add the strings that we need to achieve our tasks

11 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

12 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

13 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

14 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

15 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

16 See the Options Menu You should now see the options Menu If you long click on the + you ll see New Crime

17 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.

18 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

19 ToDo Now, when we create a new ToDo let s set the date so we don t get any null pointers

20 Responding to user click Now in ToDoListFragment we ll need to respond to the user clicking the +

21 Now try it Add new ToDos. When you navigate back to the list screen you should see them.

22 The up button WILL SEND THE USER BACK TO THE PARENT SCREEN

23 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.

24 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

25 The up Button working Now it should navigate you to the parent

26 Show/Hide Subtitle

27 Show the subtitle We ll be activating the feature in the ToDoListFragement We ll be responding to the menu item click

28 Adding the subtitle menu item Let s add our second menu item to menu_to_do_list.xml

29 Show the Subtitle

30 Now it should show Click the menu item to show the subtitle clicked show subtitle

31 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

32 Switch flag Each time you click the button you want to switch the flag for visibility

33 Toggle Flag Each time the button is clicked, make the flag toggle Also, make the label toggle Also, show/hide the subtitle

34 Toggle the subtitle

35 Toggling should work

36 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.

37 Save boolean variable We need to save the state of our boolean variable when we rotate First create a constant for saving

38 Save boolean variable Next, save the boolean variable in the onsavedinstancestate method

39 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.

40 Update onitemselected Let s now update the onitemselected method to use the udpatesubtitle method

41 updateui now we add the call to updatesubtitle to updateui

42 Updating initial state Last, we need to show the correct string show/hide subtitle when we rotate. We do this in oncreateoptionsmenu

43 All done Now, both your menu items should work as described.