Upon completion of the second part of the lab the students will have:

Transcription

1 ETSN05, Fall 2017, Version 2.0 Software Development of Large Systems Lab 2 1. INTRODUCTION The goal of lab 2 is to introduce students to the basics of Android development and help them to create a starting point for the projects. The lab is divided two parts. After the first part of the lab the students will be able to: Create a bare minimum Android project Run an Android app on an emulator Version the project using git Upon completion of the second part of the lab the students will have: Cloned a project from git Performed an HTTP request from the Network project Experience and knowledge on: Creating a simple user interface Creating new Android Activity Using ListView Using AsyncTasks Using action listeners Proper XML layout practices 2. APP SKELETON In this part the students will create a skeleton for their projects, run it an emulator and version it using git. 2.1 Creating the skeleton A. Create a new Android project following the instruction on the page (adhere to the rules below to avoid problems caused by permission restrictions on the school computers): a. In step 2 in the link above, change the project location to C:\Users\your_username\AndroidProjects. If you don t see the Users directory in the dialog, click on the Show hidden files and directories button, marked in the figure below:

2 B. After step 6, there will be errors in the project due to the lab computers not having ConstraintLayout installed. To fix them do the following: In the file explorer (left part of the Android Studio interface), open the file build.gradle(marked 1 in the figure above) In the file, remove the line: compile 'com.android.support.constraint:constraint-layout:+' Open file activity_main.xml and remove lines associated with ContraintLayout so that the code looks like this:

3 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.elt13wch.myapplication.mainactivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello World!" /> </LinearLayout> i. Make the project (Ctrl + F9) to get rid of the rest of the errors C. Make sure to read the descriptions of the most important files generated in part A. Try to locate them in the using the Android Studio GUI. 2.2 Running the app on an emulator A. Go to scroll down to section titled Run on the Emulator and follow the instructions in order to create a virtual device. You might have problems installing new devices and system images on the lab computers. In that case pick from the already installed ones. B. Run the app on the emulator as described in the previous link. C. Demonstrate to the lab leader that you successfully ran the app. 2.3 Versioning the app with git A. Click on the VCS menu and choose Enable Version Control Integration. This will automatically create a local git repository and ignore files that shouldn t be versioned. B. Go to directory C:\Users\<Your username>\androidprojects\<your app name>\, right-click anywhere and choose Git Bash Here. This will open a Git Bash console. C. Set your and username using the following commands git config user. your@ .com git config user.name your_name D. Create an initial commit using command the following commands git add * git add.gitignore.idea/ git commit -m Initial commit

4 E. Create a remote repository on either GitHub, BitBucket or GitLab. In this lab manual BitBucket will be used. F. Copy the repository address (It s not the URL in the address bar, the repository address should be written somewhere on the repository web page). Make sure you select the HTTPS option if you don t have SSH setup for your BitBucket account. G. Back in the Git Bash Console, run the following commands to add your remote git remote add origin t_name>.git git push -u origin master H. Enter your BitBucket credentials to push your changes to remote repository I. If you have done everything correctly, your project code should now be visible on your remote repository. J. Demonstrate to the lab leader that you successfully pushed your initial commit to the remote repository. 3. ANDROID DEVELOPMENT In this part of the lab, you will clone a project from git and use it to practice Android programming. If you don t know how to do one of the exercises below, refer to the lab preparation document. 3.1 Clone the network app A. Close the skeleton app project in Android Studio IDE if you haven t already by clicking (File Close Project).

5 B. Click Check out project from Version Control and choose Git from the dropdown menu. C. In the Git Repository URL type network.git D. In the parent directory, choose directory C:\Users\your_username\AndroidProjects. Follow the instructions from 2.1 Aa if you have trouble navigating to that directory. E. Press the Clone button and wait for the repository to be cloned. F. Launch the app on a virtual device to make sure the cloning was successful. 3.2 Basic UI work A. Add a Button to the starting Activity s layout. You can find the Button s text in the strings.xml resource file. You can do this both using the Android Studio layout editor or in the XML code. Don t forget to give it an ID that you can use in the next step. B. Register an onclicklistener for the newly created button. This will be used later. 3.3 Creating a new Activity A. In this example the other Activity s skeleton is already created, as well as its layout resource. To finish, add the activity to the manifest using the following code: <activity android:name=".listdevicesactivity" /> B. Back in the actionlistener from the previous step, get the current value of the EditText field, and pass it to the new Activity when starting it. C. In the ListDevicesActivity s oncreate method, get the value that has been passed to it and store it in a variable. D. Run the app and make sure that a new Activity is started. 3.4 Creating a layout from scratch A. Add a TextView and a ListView to the ListDevicesActivity s layout. Don t forget to give them both ID s. B. Initialise the listview and adapter members of ListDevicesActivity. Use android.r.layout.simple_list_item_1 built-in item layout when constructing the adapter. Set adapter as listview s adapter. C. In the ListDevicesActivity s oncreate method, set the TextView s text to the message that has been passed to the Activity. You already have this message after exercise 3.3 C. D. Run the app and make sure that the message is passed and displayed properly.

6 3.5 Updating the list A. Override Activity s lifecycle method onresume. Create a new GetDevicesTask object and implement its abstract method, presentresults so that it adds all the devices contained in the argument results to the adapter. To make it easier, first write new GetDevicesTask().execute(); then click somewhere on the erroneous line, press Alt+Enter choose Implement methods. Then press okay. B. Before the request to the backend can be performed, the app has to declare that it uses internet in order to gain permissions. Add the following permission to the app s manifest, above the application tag: <uses-permission android:name="android.permission.internet" /> C. Run the app to test if it works as intended. Try starting the ListDevicesActivity, then pressing the home button and then getting back to the app through the recent apps button. Is the list still correct? D. Try to understand how the GetDevicesTask class works E. Answer the following questions: a. Which files contain code that defines how the user interface of the two Activities is going to look like? b. Could the UI definitions be written directly in the Java code? Why/why not? c. Why does the GetDevicesTask need to extend AsyncTask? Why can t it be run in the onresume method directly? d. What are lifecycle methods and how are they useful? F. Demonstrate to the lab leader that your app works and that you answered the questions. 3.6 [OPTIONAL] Making the list presentable A. In order to make the device list pleasant to look at, create a new class called DeviceAdapter that extends ArrayAdapter<DeviceBean>. B. After making your DeviceAdapter extend ArrayAdapter<DeviceBean>, Android Studio will complain. Resolve the error by creating a constructor that matches super. You can do this automatically by left-clicking on the erroneous line, pressing Alt+Enter and choosing the desired solution. C. Remove the resource parameter from the constructor. As a parameter to the superconstructor, use R.layout.item_device. Also save context in a member variable inside the class DeviceAdapter. D. Override the getview method and add the following lines to it: LayoutInflater inflater = (LayoutInflater) context.getsystemservice(context.layout_inflater_service);

7 E. The above lines will create a view that contains UI components of a better list item. Inspect what the list items look like in layout/item_device.xml F. Fill the UI components with their proper data. If you re having trouble with this exercise, the essential parts of it are used as an example in the preparation documents for the lab. G. Back in ListDevicesActivity, replace ArrayAdapter<DeviceBean> with DeviceAdapter in the oncreate method. You might need to modify the presentresults method to work with the new Adapter. H. Run the app and see if it works.