DS7 and DS8: Android Design Studio
10 points each, plus 5 for pre-task
December 5 and 7, 2016

Prepared by:
Jacob Muzzy
Geri Georg
Sudipto Ghosh


1. Overview

The goal of this design studio is to help you learn the basics of creating Android applications. This design studio will be performed in teams just like all the previous ones. At least one laptop needs to be available per team, and the laptop must have AndroidStudio installed and running.


2. Preparatory Tasks to be Performed Prior to Dec 5 (5 points)

Your team must perform the following tasks before coming to class on December 5, 2016, because they involve installing AndroidStudio and creating an initial application.

Note that the downloads and updates make take some time. Also, building Android Applications, starting the Android emulator, and then running the Android app on the emulator can take lots of time depending on the available space, memory, CPU, etc. So please be patient. Sometimes you will need to retry the same task.

2.1. Install AndroidStudio

You can optionally view the instructions here. Here is a 10 min 23 second video that gives a general idea as to how to get started.

  1. For Windows and linux machines, you must enable virtualization technology (unless already enabled). Do this by turning on the system and forcing the system into BIOS setup instead of its normal boot-up. Go to system configuration and then enable virtualization. Do a search for your particular hardware if you're not sure how to do this.

  2. Download and install AndroidStudio from here. It is available for Linux, Macs, and Windows machines.

  3. After installing the IDE, make sure you install at least one SDK. By default SDK API Level 24 will be installed. Also install API level 25, and its associated build tools by using the SDK manager of the IDE.

  4. The IDE will also come with a default device image. Make sure you install one that you like in particular that works with API level 25 (e.g., Nexus 5.0 with Nougat 7 on x86_64). The device image is used to run an Android phone/tablet/tv/wearable emulator on your computer.

  5. Depending on your laptop and what device image you install, you might be asked to install HAXM. If you do install, make sure you close AndroidStudio after installing HAXM and then reopen it.

  6. Alternatively, you can use a Google phone that is in developer mode along with your laptop that has an appropriate driver for Android (easy to install). An Android phone can be converted to developer mode with a few simple steps as shown at minute 7:49 in the above video.

2.2. Download and Complete the First App Tutorial

This simple tutorial involves building your first app and running it. The purpose of doing this tutorial is to find any issues that may exist in your installation. For example, if you had to install additional software for HAXM, you need to terminate Android Studio and restart it before you try to compile an app. Also, you may receive odd run-time errors if you don't complete starting the emulator before you try to run the app.

2.3. Show the Instructors or TAs that you did the Prep-Tasks

In class on Dec 5, show one of the instructors or TAs that you installed AndroidStudio and run the first app to get 5 points for the prep-tasks. These points will be entered in Canvas column Pre7.


3. In-class Tasks for DS7 on Dec 5 (10 points)

In this design studio, you will work with your team on an app for which some code is given to you. The app (called app 😀) is supposed to be like a quiz that presents 10 multiple-choice questions. Questions are presented one at a time, and each has 4 possible answers. Buttons allow the user to do any of the following: (1) answer the current question (Buttons A-D), (2) go back to the previous question (Previous Question button), (3) go to the next question (Next Question button), and (4) finish (Done button). The application uses the last provided answer for each question. When the user presses the Done button, a summary of answers is given.

You will work on the following tasks as a team to understand the provided code, run it, and make some minor extensions.

3.1. Set up tasks

  1. Download and unzip the compressed file P7.zip. On a Mac, this will create a folder called P7 with a skeleton project in it. On a Windows system you may have to explicitly unpack it into a folder called P7.

  2. Open Android Studio and go to the AVD Manager, which is found from the Tools menu item (sometimes Tools→Android→AVD Manager, otherwise Tools→AVD Manager). Run the default Nexus device emulator. Wait for sometime to let it get started. You will know this when the phone desktop appears with the widgets. Don't try the next step until then.

  3. Select File in the IDE and then Open. Select the P7 project that you just unpacked. You may receive a path error because the SDK path doesn’t match what is on your machine. In this case you will be prompted to change paths, so choose 'OK'. If you don’t see the project tree for the project, click on the :Project button on the left vertical bar. If P7 shows on the horizontal bar with the Android tab, expand each of the sections under P7. If you don’t see the Android tab, click the dropdown next to the name of the project and choose 'Android'. When the project opens, it rebuilds the app on your local computer.

3.2 Android Studio Tasks

  1. Create the layout for the Nexus:

    Under P7→res→layout, you will see 2 files, activity_main_screen.xml and content_main_screen.xml. From Stack Overflow:

    "According to new design pattern in android studio activity_main.xml will determine how the global UI of the Activity should be. And on the other hand content_main.xml will determine the contents in the activity_main.xml. That is, content_main.xml will contain the textview, edittext, button, etc, component. And it will be included by the activity_main.xml.”

    Open content_main_screen.xml. The graphical editor shows what looks like the actual screen of the app you will be building.

    content_main_screen.xml

    To the left of the display, note the default options for buttons and text boxes that we will use for this app. For the purpose of this design studio, we have already created a well formatted design for you to make. This layout has buttons and text areas. Each of these items must have a unique identifier. Each also has some associated text that will be displayed on the Nexus.

    In this layout, button ids have 2 parts: what they do, and the word "Button". These ids are shown on the layout, so make sure you name them properly so you can tell what button will provide what function to the user. You can vary the ids from the layout shown as long as you keep both parts of the id name. For each button, put the text that will actually be shown on the button into the 'text' field of the 'TextView' area in the Properties window.

    TextView box ids should have the ids shown in the layout. Just copy the id into the 'text' field of the 'TextView' area in the Properties window. When the app runs, this text will generally be overwritten by the app.

    Next we need to hook up the buttons to their functionality in the app. Click the dropdown next to the 'onClick' field in the 'Button' area in the Properties window. This menu should already be populated with functions names that are in the main_screen class. Choose the name that will implement the functionality. For example, the Start button needs to be connected to the 'startUp' function. Each of these function names has '(main_screen)' after it. For some reason, everything after the function name itself needs to be deleted or else the app fails.

  2. Map text fields from the layout to the main_screen.java code:

    Under app→java, you will see 3 folders: com.example.jacobmuzzy.p7, com.example.jacobmuzzy.p7 (androidTest), and com.example.jacobmuzzy.p7 (test). Expand com.example.jacobmuzzy.p7 and open main_screen.java.

    Throughout the class file you will see instances of pleaseReplace(1, 2 or 3). These are placeholders for the actual names of the TextView widgets on your layout. Your job is to replace the instances of pleaseReplace1 with the id of your 'question' TextView box, pleaseReplace2 with the id of your 'help' TextView box, and pleaseReplace3 with the id of your 'currentAnswer' TextView box.

  3. Run the application:

    Click the Run icon for the app to start it on the Nexus emulator. Check that all the buttons work properly. Note that the 'currentAnswer' TextView box remains unchanged. You'll fix this in the Design Studio 8 on Dec 7.

3.3. Show the Instructors or TAs that you Completed DS7 (10 points)

When you finish this part, show one of the instructors or TAs that you are able to run the app. These points will be entered in Canvas column DS7.


4. In-class Tasks for DS8 on Dec 7 (10 points)

Resume from where you left off on Monday to make a few more extensions to the app. Open the P7 project, and go to the Android app in the navigator window.

4.1. Add code to populate the 'currentAnswer' TextView box in main_screen.java:

In each of the functions that processes a multiple choice option, the code to replace the current answer on the screen (in the ‘currentAnswer’ TextView box) is missing. You need to add it. Hint: you can base your code off the code that updates the 'help' TextView box that is shown in each method that processes an answer.

4.2. Add a new Activity to summarize the results of the quiz

Currently the results are summarized when you press the Done button.

  1. Make changes to main_screen.java:

    First add a method called sendMessage as follows.

        public void sendMessage(View view){
        }
    

  2. Make changes to the Done button:

    Open res→layout→content_main_screen.xml. Select the Done button. Change the onClick method to be sendMessage. Be sure to remove any text that follows the name of the method.

    In the next couple of steps, we will show you how to create an Intent. This is an object that provides runtime binding between separate components, in this case 2 different activities. You do this in the sendMessage method you created. An Intent can include data, in the form of a key/value pair to the new Activity. The new Activity uses the key to retrieve the data value. Therefore, the key must also be defined in the main_screen Activity before it can be used to in the Intent. The key is added as a class variable.

  3. Add the key to the class as follows:
        public class main_screen extends AppCompatActivity {
            public final static String SUMMARY_INFO = 
                           "com.example.jacobmuzzy.P7.SUMMARY";
                 ...
        }
    

    According to best practice tips at the AndroidStudio site, it is a good idea to include the full name of the package as a prefix to key variables.

    You also need add an import:

        import android.content.Intent;
    

  4. Fill in the sendMessage method code:

    Add code to the sendMessage method to create the Intent. You need to move code from the done() method to this new method. The code that needs to be moved is the code that builds the string that the done() method displayed. This is found in the myView.setText(...) line.

    Create the intent:

        Intent intent = new Intent (this, DisplaySummaryActivity.class);
    
    Build the string:
       String summary = ("Summary..." ...);
    
    Add the key/value pair to the Intent:
        intent.putExtra(SUMMARY_INFO, summary);
    
    Start the new Activity:
    startActivity(intent);
    
    Note that the Intent constructor takes the target Activity class as a parameter - DisplaySummaryActivity.class in this case. When startActivity(intent) is called, this new Activity is created and started.

  5. Create the new Activity:

    In the Android Navigator window, right click on the app folder and select New→Activity→Empty Activity. This will bring up another window where you need to add the Activity Name (DisplaySummaryActivity) and then click the Finish button.

    This process creates a new skeleton class along with the layout file (activity_display_summary.xml). The manifest is changed to include the new Activity. You need to add two imports:

        import android.content.Intent;
        import android.widget.TextView;
    

  6. Add code to the onCreate() method

    This code needs to get the value of the string associated with the key included in the Intent, create a new TextView and populate it with the string, then add it to the layout for this activity and make it viewable. The following code can do this:

        protected void onCreate(Bundle savedInstanceState) {
           ...
           Intent intent = getIntent();
           String summaryInfo = intent.getStringExtra(main_screen.SUMMARY_INFO);
           TextView summText = new TextView(this);
           summText.setTextSize(12);
           summText.setText(summaryInfo);
    
           ViewGroup layout = (ViewGroup) findViewById(R.id.activity_display_summary);
           layout.addView(summText);
        }
    
    Make sure you import android.view.ViewGroup.

  7. Run the program.

4.3. Show the Instructors or TAs (10 points)

When you finish this part, show one of the instructors or TAs that you are able to run the app. These points will be entered in Canvas column DS8.

If you have time, add a Quit button to the second Activity layout to terminate the program. You will need to figure out how to do this. The developer tutorials are a good place to start. Look at the super class for Activities (AppCompatActivity) class and decide how to terminate the app and destroy the Activities.