CHAPTER 4. Fragments ActionBar Menus

Transcription

1 CHAPTER 4 Fragments ActionBar Menus Explore how to build applications that use an ActionBar and Fragments Understand the Fragment lifecycle Learn to configure the ActionBar Implement Fragments with Responsive Design Techniques Explore animation in Fragment Transactions Experiment with Fragments, ListViews, and ArrayAdapters 1

2 4.1 Fragmentation and Android Fragments There are many shapes and screen sizes and different performance characteristics Multiple versions of Android are being used This translates into a wider audience to build applications for When designing and coding layouts, there are several factors to consider, such as spacing, positioning, size, and the grouping of user interface controls Layouts must be compatible with many physical screens A Fragment is modeled as a subdivision of an Activity Fragment is integrated into an Activity, and needs an Activity to run The advantage of building applications that use Fragments is their ability to easily present a consistently welldesigned user interface Fragments are particularly helpful in adapting a user experience across a wide range of devices. 2

3 4.2 The Fragment Lifecycle Fragments are associated with an activity and can be created, added or removed while the activity is running Similar to an Activity, a Fragment has its own lifecycle, as well as its own user interface The Fragment s lifecycle is connected to the activity that owns it Each fragment has its own callback methods in the standard Activity lifecycle. Callbacks used in the lifecycle of a Fragment. oncreateview() oninflate() onactivitycreated() onattach() ondestroyview() ondetach() 3

4 4.3 Action Bar The action bar provides information and displays control elements to the user. In a basic configuration, the action bar displays the application icon and a title The title often identifies the running activity Users are given an indication of where they are and a consistent identity from which to recognize the application Action bar features: Application Icon Action Items Action overflow 4

5 4.4 ActionBar Configurations Control elements that appear directly on the action bar as an icon and/or text are known as action buttons When an Activity starts, its associated layout is inflated on the screen and the action bar is populated with action buttons The activity's oncreateoptionsmenu() method is responsible for inflating a menu hierarchy from a specified XML resource file 4.4 ActionBar Configurations Control elements that appear directly on the action bar as an icon and/or text are known as action buttons When an Activity starts, its associated layout is inflated on the screen and the action bar is populated with action buttons The activity's oncreateoptionsmenu() method is responsible for inflating a menu hierarchy from a specified XML resource file Figure 04.06: Action bar with five action buttons and the overflow button 5

6 4.4.1 Overflow on the Action Bar Narrow devices can often require the use of the overflow button When creating layouts on devices with a narrow screen, use ifroom to request that an item appear in the action bar Allow the system to move elements into the overflow when there is not enough room Figure 04.07: Buttons placed in the overflow menu display text titles Lab Experiment 4-1: Fragment and the ActionBar: Menu Experiment Figure 04.02: An Actionbar containing Tabs 6

7 Lab Experiment 4-1: Fragment and the ActionBar: Menu Experiment Figure 04.03: Project structure for the ActionBar Experiment application Lab Experiment 4-1: Fragment and the ActionBar: Menu Experiment Figure 04.04: activity_my.xml contains a LinearLayout view for storing fragments 7

8 Lab Experiment 4-1: Fragment and the ActionBar: Menu Experiment Figure 04.05: The fragment_snack.xml layout shown in landscape orientation Adding an Action View An action view is simply a widget that appears in the action bar as a substitute for an action button An action view provides quick access to heavily used actions Consider a collapsible search view widget. A search action view can be added as an embedded search view widget in the action bar To declare an action view, the actionlayout or actionviewclass attribute can be added to an item to specify either a layout resource or a widget class 8

9 Lab Experiment 4-2: Unit Conversion Calculator App (using overflow menu) Figure 04.08: Unit Conversion Calculator Lab Experiment 4-2: Unit Conversion Calculator App (using overflow menu) Figure 04.09: The Overflow menu contains Action Items 9

10 Lab Experiment 4-2: Unit Conversion Calculator App Figure 04.10: Project structure for the Unit Conversion Calculator app Lab Experiment 4-2: Unit Conversion Calculator App Figure 04.11: The layout design for activity_my.xml 10

11 4.5 Responsive Design with Fragments Responsive design works across different screens sizes Responsive design techniques should also be applied to Android applications for solving interactive design and layout problems Responsive design is used for heavy data driven content. Adaptive design is primarily used for the re-arrangement of fixed user interface elements in an application Figure 04.12: Fragments can be combined or separated on a device 4.5 Responsive Design with Fragments Responsive design makes use of Fragments A user interface can be divided into multiple panes using Fragments and reused in more than one screen of an application, as shown in the following figure Fragments can be combined or separated on a device When building an application that follows a similar master/detail design pattern, the application often needs a set of Java and XML layout resource files 11

12 4.5 Responsive Design with Fragments 4.5 Responsive Design with Fragments Responsive design revolves around a master/detail flow interface design pattern The user is provided with a list of items Upon selecting one of the items, additional information relating to that item is then presented to the user 12

13 This design concept is called responsive in the sense that list and detail panels of the app can change based on the width of the device On a large tablet-sized Android device, the screen is large enough to display both panels The master list can appear as a narrow vertical panel along the left hand edge of the screen while the remainder of the screen can display the detail panel This arrangement is referred to as two-pane mode. Figure 04.14: One- and two-pane configurations Lab Experiment 4-3: Shades App: A Fragment Experiment (using responsive design two-pane/single-pane configuration) Figure 04.14: One- and two-pane configurations 13

14 Lab Experiment 4-3: Shades App: A Fragment Experiment Figure 04.15: The final project structure for the Shades application Lab Experiment 4-3: Shades App: A Fragment Experiment (Individual Fragment Layouts) Figure 04.16: list_fragment.xml 14

15 Lab Experiment 4-3: Shades App: A Fragment Experiment (Individual Fragment Layouts) Figure 04.17: The layout, information_fragment.xml, used to hold color information Lab Experiment 4-3: Shades App: A Fragment Experiment (The Main User Interface to Hold the Fragments) Figure 04.18: activity_my.xml uses a LinearLayout root element 15

16 Lab Experiment 4-3: Shades App: A Fragment Experiment (The Main User Interface to Hold the Fragments) Figure 04.19: The main layout designed for portrait orientation. Fragment1 is shown holding the color list 4.6 Animation in Fragment Transactions Transition animations can be applied directly to fragments that are entering and exiting a transaction The FragmentManager provides the structure that handles transactions between fragments A transaction refers to the sequence of steps that add, replace, or remove fragments. Operations performed by the FragmentManager will occur inside a transaction 16

17 Lab Experiment 4-4: Recipes-Fragments with Transition (Basic animation effects and the Android Interpolator) Figure 04.20: The Recipes app: A button in the lower left corner for flipping the photograph Lab Experiment 4-4: Recipes-Fragments with Transition Figure 04.21: Project structure for the Recipes application 17

18 Lab Experiment 4-4: Recipes-Fragments with Transition (Designing Individual Fragments) Figure 04.22: The visual layout design for fragment_recipe_photo Lab Experiment 4-4: Recipes-Fragments with Transition (Designing Individual Fragments) Figure 04.23: The layout, fragment_recipe.xml, used to hold color information 18

19 Lab Experiment 4-4: Recipes-Fragments with Transition (User Interface and Fragment Design) Figure 04.24: The visual design for activity_my.xml Lab Experiment 4-4: Recipes-Fragments with Transition (The Transition Animation) Figure 04.25: Animation effect rotationx rotates around the x-axis 19

20 4.7 ListViews and Adapters (dynamic data) A ListView is similar to a ScrollView A ScrollView is an extension of the FrameLayout, and is suitable for holding a single control element It provides the user with the scroll mechanism to reveal more content than can be displayed on the screen at once A LinearLayout, containing multiple View items, can be placed within a ScrollView 4.7 ListViews and Adapters (dynamic data) A ListView is a specialized control that is optimized for displaying long lists of items When the data content for the layout is dynamic or not pre-determined, it is possible to use a layout that subclasses an AdapterView to populate the layout with views at runtime 20

21 Lab Experiment 4-5: Redlands Music Events App Adapters and ListViews Figure 04.26: A Fragment containing a ListView Lab Experiment 4-5: Redlands Music Events App Adapters and ListViews Figure 04.27: Project structure for the Redlands Music Events application 21

22 Lab Experiment 4-5: Redlands Music Events App Adapters and ListViews (The Fragment Layout File) Figure 04.28: The layout design for the Music Festival application 4.8 Handling Click Events in a ListView A ListView might be populated with items that need to respond to a click event You can respond to click events on an item in an AdapterView by implementing the AdapterView.OnItemClickListener interface The onitemclick () callback method will always be invoked when an item in the AdapterView has been clicked. 22

23 Lab Experiment 4-6: Shades (Part 2): Clickable Shades of Color in the ListView Figure 04.29: Shades II application features a scrollable list of clickable items Lab Experiment 4-6: Shades (Part 2): Clickable Shades of Color in the ListView Figure 04.30: Project structure for Shades II application 23

24 Lab Experiment 4-6: Shades (Part 2): Clickable Shades of Color in the ListView Figure 04.31: The visual structure for the master list, list_fragment.xml 24