Fragments and Menus Chapter 4 1

Objectives Learn three different types of menus: options, context, and popup Learn to configure the ActionBar and Toolbar Understand the Fragment lifecycle Explore how to build applications that use menus and fragments Implement fragments with “responsive design” techniques 2

Menus Common UI component in many types of apps Use Menu APIs to present user actions and other options in activities Three types of menus Options menu Menu for an activity (activated by clicking the Menu button) Action bar (since 3.0) and Tool bar (since 5.0) Context menu Floating menu for a view (activated by long click) Popup menu (since 3.0) Vertical list of items anchored to a view 3

Options Menu Display information related to the current activity (at the bottom) Activated by pressing the MENU key (< version 3.0) Action bar at the top since version 3.0 Tool bar since version 5.0 API defined in Activity boolean onCreateOptionsMenu(Menu) boolean onOptionsItemSelected(MenuItem) 4

ActionBar (Toolbar in 5.0) Provide information and displays control elements to the user Display the application icon and a title, often identifying the running activity Features Application Icon Action Items Action overflow 5

Creating an Options Menu Override boolean onCreateOptions(Menu) Initialize standard options menu by placing menu items Use MenuItem Menu.add(int, int, int, String), where arguments are groupId, itemId, order, and title Call super’s for system menu of category CATEGORY_SYSTEM Return true for displaying and false for not 6 public boolean onCreateOptionsMenu(Menu menu) { menu.add(1, 1, 1, “Text”); // groupId, itemId, order menu.add(1, 2, 2, “ ”); return super.onCreateOptionsMenu(menu); }

Using XML Menu Resources Define menu in XML resource file, e.g., res/menu/main.xml Inflate a menu resource using MenuInflater 7 <item android:orderInCategory="1" app:showAsAction="never"/> public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; }

Handling Menu Click Events 8 Override boolean onOptionsItemSelected(MenuItem) To be called when a user selects an item from the options menu (including action items in the app bar) public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.play: startGame(); return true; default: return super.onOptionsItemSelected(item); } }

Context Menu Floating menu owned by a view, not an activity Display information related to a particular view of an activity Activated by long click---tapping and holding on to it One options menu vs. multiple context menus API defined in Activity void registerForContextMenu(View) void onCreateContextMenu(ContextMenu, View, ContextMenuInfo) boolean onContextItemSelected(MenuItem) API defined in View void setOnCreateContextMenuListener( View.OnCreateContextMenuListener) 9

Creating a Context Menu 10 Register a view for a context menu Populate a context menu public void onCreate(Bundle savedInstanceState) { … TextView textView = (TextView) findViewById(R.id.textview); registerForContextMenu(textView); } public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { menu.setHeaderTitle("Context Menu"); menu.add(1, 1, 1, "Item 1"); // or use XML menu, e.g., // getMenuInflater().inflate(R.menu.context_menu, menu); }

Responding to Context Menu Items 11 Override boolean onContextItemSelected(MenuItem) To be called when a user selects an item from a context menu public boolean onContextItemSelected(MenuItem item) { … }

Popup Menu Associated with a view and is shown every time an UI event (e.g., button click) occurs to the view. Unlike the options/context menu, the popup menu requires that you create a menu object and a listener object for handling item selection. 12

Popup Menu (Cont.) APIs defined in PopupMenu PopupMenu(Context, View) Menu getMenu() void inflate() void setOnMenuItemClickListener(PopupMenu.OnMenuItemClickListener) void show() In sum, a popup menu: is used on demand is anchored to a view uses its own menu item callback 13

Example: Menu upon Button Click 14 Button button = (Button) findViewById(R.id.button); final PopupMenu popupMenu = new PopupMenu(this, button); popupMenu.inflate(R.menu.popup_menu); popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { public boolean onMenuItemClick(MenuItem item) { … return true; } } ); button.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { popupMenu.show(); } });

Lab 4-2 Unit Conversion Calculator Pages Features ActionBar from Android support v7 (AppCompatActivity) onTouchEvent to hide/show the action bar 15 Create a blank activity to add an action bar Corrections Menu (p ) android:showAsAction app:showAsAction API (p. 317) getActionBar() getSupportActionBar() Q: Add context/popup menu?

Side: Listening for UI Events Two levels of interactions: views and activity, e.g., boolean Activity.onTouch(MotionEvent) void View.setOnTouchListener(View.onTouchListener) Propagation of events from views to activity (children to parents) Can be prevented in a handler by returning true rather than false Common methods for handling events at activity level onKeyDown (View.OnKeyListener for views) onKeyUp onKeyLongPressed() … 16

Fragments --- Motivation Introduced in Android 3.0 (for tablets) Larger screens with more rooms to combine and interchange UI components Activity: single activity responsible for whole screen Work well for small screens such as handsets But not modular and less flexible for large screens (e.g., separation of concerns) 17

Fragments A behavior or a portion of user interface embedded in an activity (sort of a mini activity) Combined to build a multi-pane UI Reusable in multiple activities In sum, a modular section (or subdivision) of an activity With its own lifecycle (synchronized with the containing activity) Receives its own input events Can be added or removed while the activity is running 18

19

Fragment Lifecycle 20 Associated with an activity and can be created, added or removed while the activity is running Its own lifecycle, as well as its own user interface Fragment’s lifecycle connected to the activity that owns it Usually implement at least: onCreate(): called when created; initialize fragment components onCreateView(): called to draw UI for the first time; return a view (root of the layout) onPause(): called when leaving the fragment; commit changes

Creating Fragments Create a subclass of Fragment or its subclasses such as DialogFragment, ListFragment, and PreferenceFragment (similar to creating a new activity class) Implement the onCreateView() method to provide a layout 21 public static class ArticleReaderFragment extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.reader_fragment, container, false); } }

Adding Fragment to Activity Declare a fragment inside an activity’s layout file 22

Adding Fragment (Cont.) Or programmatically add the fragment to an existing view group by using FragmentManager FragmentTransaction 23 FragmentManager manager = getFragmentManager(); FragmentTransaction transaction = fragmentManager.beginTransaction(); ArticleReaderFragment fragment = new ArticleReaderFragment(); transaction.add(R.id.fragment_container, fragment); transaction.commit();

Communicating with Activity Use getActivity() to get the containing activity Use FragmentManager to retrieve a contained fragment 24 // in fragment View listView = getActivity().findViewById(R.id.listview); // in Activity ArticleReaderFragment fragmet = (ArticleReaderFragment) getFragmentManager().findFragmentById(R.id.reader);

Responsive Design Originally from Web design to respond to the user’s behavior and environment based on the screen size, the platform, and the screen orientation, esp. for mobile devices Change the layout based on the size and capabilities of a device Use a mix of flexible grids and layouts, images, etc. Adjust to a device as well as the content Use for heavy data driven content Master/detail flow interface design pattern List of items and a detailed view of contents Two-pane mode Fragments for panes 25

Lab 4-3, 4-6 Shades App Lab 4-3 (p ): Buttons for master view Lab 4-6 (p ): ListView Responsive design Use of fragments Single-pane for portrait Two-pane for landscape 26