Week 4 Instructor’s Notes // My instructions and comments are in red text – not all sections of the tutorial are copied/pasted/annotated in this document, so have the tutorial Web pages open. // Remember: When you see the word “class” this means Java // Important: At least after each major section of the tutorial, try to run your project (this will build your project) so that you catch errors early and can fix them as you go along. Do not wait until the end of the tutorial to do a build; it will be much harder to identify and fix errors. // One problem I had when running the app was seeing the Toolbar with text and icons. I fixed this by editing my layout files in Design mode, selecting the Toolbar, then in Properties: 1. Select background 2. Access Resources pallet 3. System/holo_blue_dark (able to see both black and white easily on this color) There are other ways you can set the colors of the Toolbar. // Make sure you READ the tutorial – understand what you are doing, do not just put the code together Add a Toolbar to an Activity These steps describe how to set up a Toolbar as your activity's app bar: 1. Add the v7 appcompat support library to your project, as described in Support Library Setup. When you open MainActivity.java, the import statements look like this: Click the … to expand and see the imports. An import statement imports Android packages, which are sets of Android class files. You can write an import statement to import a single class file. When you expand the import statements, you will see that the AppCompatActivity class is already imported, which is why there is no error thrown on the class statement in Step 2. 2. Make sure the activity extends AppCompatActivity: public class MyActivity extends AppCompatActivity { // ... You should have this by default } Note: Make this change for every activity in your app that uses a Toolbar as an app bar. 3. In the app manifest, set the element to use one of appcompat's NoActionBar themes. Using one of these themes prevents the app from using the native ActionBar class to provide the app bar. For example: Replace the default theme in the manifest file with this theme 4. Add a Toolbar to the activity's layout. For example, the following layout code adds a Toolbar and gives it the appearance of floating above the activity: // Add this code to activity_main.xml – this code tells your app to use a Toolbar object. When you first put this code in, you will get the following error: // This error appears because there is no identifier for ‘app’. Do what the blue popup tells you: Press Alt+Enter. Android Studio adds a line of code which defines ‘app’ as an attribute to the layout’s RelativeLayout tag: // If you run your app and the toolbar does not stretch all the way across your screen, then in the code aobve, remove the padding attributes(these attributes add space between widgets). The Material Design specification recommends that app bars have an elevation of 4 dp. Position the toolbar at the top of the activity's layout, since you are using it as an app bar. This means the Toolbar tag and attirbutes must be before any other elements in your layout file but remember the root tag of the layout file is the layout type (RelativeLayout) so the Toolbar must be second in the layout file and indented one level. 5. In the activity's onCreate() method (in MainActivity.java), call the activity's setSupportActionBar() method, and pass the activity's toolbar. This method sets the toolbar as the app bar for the activity. For example: (add the two lines in the red box) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar); setSupportActionBar(myToolbar); } When you first add these two lines, you will get an error because there is no Java definition for the Toolbar class: Again, press Alt+Enter – you will get popups asking what you want to import. Import the v7 widget Toolbar class –in your import statements you should see: import android.support.v7.widget.Toolbar; Here is what the two lines of code added do: 1. The left side of the first line declares a reference for a Toolbar object named “myToolbar”. On the right side of the = sign, a new Toolbar object is created (instantiated) using the Toolbar definition that you provided in your layout file. The Toolbar object is assigned to the myToolbar reference. 2. The second line sets the Toolbar to be your ActionBar. This means that the Toolbar will be able to use ActionBar methods (read the first two paragraphs under Use App Bar Utility Methods). Your app now has a basic action bar. By default, the action bar contains just the name of the app and an overflow menu. The options menu initially contains just the Settings item. You can add more actions to the action bar and the overflow menu, as described in Adding and Handling Actions. Add Action Buttons All action buttons and other items available in the action overflow are defined in an XML menu resource. To add actions to the action bar, create a new XML file in your project's res/menu/ directory. 1. Under the res folder, add a menu folder 2. In the menu folder, add a file named ‘menu_main.xml’ Add an element for each item you want to include in the action bar, as shown in this code example of a menu XML file: 3. Add the following code to your menu_main.xml file: // When you first add this code you will get the following errors because: 1) Your project does not have a set of graphics for the favorite icon you are trying to add to the Toolbar, and 2) you do not have string definitions for your favorite action or your settings action. // To fix the missing graphics problem, refer to my Week 2 Instructor’s Notes, the section on Create Different Bitmaps, and from the Material Icons page, select the favorite icon: When adding the icons, you must name the icons the same as in this line: android:icon="@drawable/ic_favorite_black_48dp" You are also going to need a search icon for later in the tutorial, so go back to Material Icons and get the search icon; name it “ic_action_search.png” To fix the string errors, add strings to res/values/strings.xml for action_favorite and action_settings (the strings can display any text that you want, but they must be defined). The string name attributes must be the same as in the menu_main.xml file. You will know the errors are fixed when the code turns from red to green. The app:showAsAction attribute specifies whether the action should be shown as a button on the app bar. If you set app:showAsAction="ifRoom" (as in the example code's favorite action), the action is displayed as a button if there is room in the app bar for it; if there is not enough room, excess actions are sent to the overflow menu. If you set app:showAsAction="never" (as in the example code's settings action), the action is always listed in the overflow menu, not displayed in the app bar. The system uses the action's icon as the action button if the action is displayed in the app bar. You can find many useful icons on the Material Iconspage. Respond to Actions When the user selects one of the app bar items, the system calls your activity's onOptionsItemSelected() callback method, and passes a MenuItemobject to indicate which item was clicked. In your implementation of onOptionsItemSelected(), call the MenuItem.getItemId() method to determine which item was pressed. The ID returned matches the value you declared in the corresponding element's android:id attribute. For example, the following code checks to see which action the user selected. If the method does not recognize the user's action, it invokes the superclass method: // Add the following code to your MainActivity class below the onCreate() method but before the closing brace } of the MainActivity class. @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: // User chose the "Settings" item, show the app settings UI... return true; case R.id.action_favorite: // User chose the "Favorite" action, mark the current item // as a favorite... return true; default: // If we got here, the user's action was not recognized. // Invoke the superclass to handle it. return super.onOptionsItemSelected(item); } } Adding an Up Action Your app should make it easy for users to find their way back to the app's main screen. One simple way to do this is to provide an Up button on the app bar for all activities except the main one. When the user selects the Up button, the app navigates to the parent activity. This lesson shows you how to add an Up button to an activity by declaring the activity's parent in the manifest, and enabling the app bar's Up button. Declare a Parent Activity To support the up functionality in an activity, you need to declare the activity's parent. You can do this in the app manifest, by setting an android:parentActivityName attribute. The android:parentActivityName attribute was introduced in Android 4.1 (API level 16). To support devices with older versions of Android, define a name-value pair, where the name is "android.support.PARENT_ACTIVITY" and the value is the name of the parent activity. For example, suppose your app has a main activity named MainActivity and a single child activity. The following manifest code declares both activities, and specifies the parent/child relationship: ... // Add the code highlighted in gray to your manifest file. You will need to make // some changes to this code; I describe the changes below. ... First change: In the block of code below (reference to your parent activity), your project’s package name and project name must be in front of MainActivity. If your package name is “com.example.myfirstapp”, then leave it. You can shorten up this little block of code to one line of code as well. The three dots must be deleted, in both spots. ... In my project, I have changed the block above to what you see below. Note that my package name and project name are different, and I shortened the code to one line. When you edit this line of code, if you get a red wavy line under it as shown above, this means the main activity is being declared twice, which is an error. If there is an activity element already in your application element that declares your main activity (see block below), then delete the two lines of code above this paragraph: Second change: The block of code below was copied straight from the tutorial and pated into my project – note the errors. You have to hover over the ~ to see the popup error message: Here is my fixed code: I made the following changes:  Replaced the package.project name  Added a string to values/strings.xml for this line: android:label="@string/title_activity_child" My strings.xml file currently looks like this: Question: What happens if you delete the @ symbol from this string: android:label="@string/title_activity_child"   The error described by the “Element activity is not closed” popup is actually caused by a code error in the tutorial; it is simple to fix – I added a / to provide a properly-formed closing tag for the activity element. I still have an error. Why is MyChildActivity red? android:name="com.john.week4assignment.MyChildActivity" Because I have not yet added the Java class MyChildActivity to the project: 1. 2. 3. 4. Navigate to app/source/main/java/ Right-click, New > Java Class Name the class MyChildActivity, click OK You should get this template and you should see the file added under app/source/main/java/: 5. In the manifest, you will see an error, “… MyChildActivity is not assignable to ‘android.app.Activity’”, but this error will go away after code for the application is added to the child class. Enable the Up Button (This will be an action view) To enable the Up button for an activity that has a parent activity, call the app bar's setDisplayHomeAsUpEnabled() method. Typically, you would do this when the activity is created. For example, the following onCreate() method sets a Toolbar as the app bar for MyChildActivity, then enables that app bar's Up button: // This code goes in MyChildActivity.java // Remember that you are going to see errors after you add the code until you import // all of the packages necessary to support the objects used in the code. // First fix class declaration: public class MyChildActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_child); // Must add layout for child class // my_child_toolbar is defined in the layout file Toolbar myChildToolbar = (Toolbar) findViewById(R.id.my_child_toolbar); // Add Toolbar in child layout setSupportActionBar(myChildToolbar); // Get a support ActionBar corresponding to this toolbar ActionBar ab = getSupportActionBar(); // Enable the Up button ab.setDisplayHomeAsUpEnabled(true); } You do not need to catch the up action in the activity's onOptionsItemSelected() method. Instead, that method should call its superclass, as shown inRespond to Actions. The superclass method responds to the Up selection by navigating to the parent activity, as specified in the app manifest. Add an Action View To add an action view, create an element in the toolbar's menu resource, as Add Action Buttons describes. Add one of the following two attributes to the element:  actionViewClass: The class of a widget that implements the action.  actionLayout: A layout resource describing the action's components. Set the showAsAction attribute to either "ifRoom|collapseActionView" or "never|collapseActionView" . The collapseActionView flag indicates how to display the widget when the user is not interacting with it: If the widget is on the app bar, the app should display the widget as an icon. If the widget is in the overflow menu, the app should display the widget as a menu item. When the user interacts with the action view, it expands to fill the app bar. For example, the following code adds a SearchView widget to the app bar: // This code goes into menu_main.xml // When you paste it, you will get two errors, but you should know how to fix them If the user is not interacting with the widget, the app displays the widget as the icon specified by android:icon. (If there is not enough room in the app bar, the app adds the action to the overflow menu.) When the user taps the icon or menu item, the widget expands to fill the toolbar, allowing the user to interact with it. // At this point, when you run your app, you should see the screen for the main activity (top screen, and whatever you named your app), and when you click the search icon, you should navigate to the second screen (bottom screen), but you will not see the message send function because there is no code for it yet. Clicking the Up icon (left-pointing arrow) should take you back to the main activity screen. In the main activity screen, the favorites icon does not do anything, but you can access the overflow area (3 vertical dots). Figure 1. When the user clicks an action view's icon, the view's UI fills the toolbar. // STOP HERE
Purchase answer to see full attachment