Android App Development Lloyd Hasson 2015 CONTENTS. Web-Based Method: Codenvy. Sponsored by. Android App. Development

Transcription

1 Android App Lloyd Hasson 2015 Web-Based Method: Codenvy This tutorial goes through the basics of Android app development, using web-based technology and basic coding as well as deploying the app to a virtual Android phone in the browser. A lot of this tutorial is similar to the other Android Studio tutorial. The presentation was proudly sponsored by Opus International Consultants. CONTENTS Setting up Codenvy... 2 Creating your first app... 6 Testing the app on a virtual Android phone P a g e

2 Setting up Codenvy First, you need to sign up to Codenvy using an address. Normally, you would use your personal address, but for this class session we ll use a temporary one to save time. We need to use the Chrome, Firefox or Safari browsers. Codenvy doesn t work with Internet Explorer. Go to Press the button. Leave this tab open, and open a new tab in your browser. Go to Paste into the field For Workspace Name, type in your name and four random numbers (this workspace name has to be unique). Click Sign Up. Go back to the Fake Mail Generator tab. You ll see you have a new . Scroll down and click the Let s Go button: 2 P a g e

3 A new tab should open for you to choose a password. Choose your own password (remember it) or just type pass1234. You ll see your Codenvy dashboard: This is where you can create a new project. Click Create New Project 3 P a g e

4 Scroll down the left panel and choose Android under SAMPLES HELLO WORLD For the Name field, type FirstApp. For the Description field, type My first app. Press Create You ll now see your development environment. It s similar to the environment of Android Studio. 4 P a g e

5 Build button Here are all the files that you can edit with code to customize your app. The files are nested inside folders. 5 P a g e

6 Unfortunately, unlike Android Studio, there is no panel that shows you what the app will look like. You cannot drag and drop things like buttons onto the phone, so we have to use code to do such things. Let s create a basic app again. Creating your first app Just like in Android Studio, we can edit the appearance of the app by editing the activity_main.xml file. You ll find this in the Project Explorer panel under res and layout. Double-click on this file. The contents will look very similar to those in Android Studio. This code controls the layout and appearance of the activity. You can edit this code manually to change the appearance of the activity. Colours can be set in code using the hexadecimal format. For example, the colour red is defined as #ff0000 in hexadecimal. In Android Studio, we were able to drag and drop a button onto the phone s screen, but here in Codenvy we have to write code to make a button. First, remove the code associated with the simple text: 6 P a g e

7 To make the button, insert the following code where the code you just deleted was. <Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="press me" android:background="#ff0000" android:layout_centerhorizontal="true" android:layout_margintop="131dp" /> This creates a red button that says Press me You can change the text inside the button. Change this to read Push me instead. You can figure out how to do this. We ve changed the appearance of the button. Now we want something to happen when we click this button. We need to write some code to do this. In the Project Explorer panel, expand the structure of the src folder and its sub-folders by clicking the triangle. Eventually you will unhide a file called HelloAndroidActivity. This is the same as the MainActivity file you would see in Android Studio. Double-click to open. You ll see a class called HelloAndroidActivity. A class is code inside a file that performs actions. You ll notice that the program has already written some code for you: 7 P a g e

8 Just ignore the red underlines and crosses for now. Again, this code is very similar to that of Android Studio, with a few things named differently. This may look very complicated at first. The code is written in Java. You re looking at a Java class, where we interact with the interface and perform actions using code. At the top of the file is the keyword package followed by package com.codenvy.template.android. This identifies this class as belonging to the com.codenvy.template.android package (a grouping of files containing code that can talk to each other). After the package line are the imports. This code is used to get the outside source code needed for your activity. The public class line of code begins the Activity class and declares that this class is referred to as HelloAndroidActivity and that it is a subclass of the Activity class. Within the class are two methods, oncreate, oncreateoptionsmenu. The last method is used for creating an options menu at the bottom of the screen, but we won t deal with them in this tutorial: 8 P a g e

9 Let s look at the oncreate method in detail: The method can be public, private or protected. o Public methods allow any other class in the package use this method. o Private methods are hidden from other classes. o Protected methods can be used by sub-classes, but are hidden from other classes. The void means that this method doesn t give back anything after it s finished. Sometimes methods calculate something like adding two numbers together, and therefore will give back or return a number for another method to use. oncreate is the name of the method. It is the first method that is carried out by the activity when the app runs. This method has parameters. This means it takes something when it is run, and can do something with it. So if you had a method that adds two numbers together, you can give the method, or pass the method the two numbers as parameters. Then it can perform the calculation. For example: private int addnumbers(int a, int b) { return (a + b); } So the method addnumbers has two parameters: a and b. The int means integer, which is a number. These two numbers a and b can be any number. It is private which means other 9 P a g e

10 classes cannot use it. It returns or gives back an integer which will be the sum of the two parameters. The curly braces or brackets { } show where the method s actions begin and end. The return means it will give back whatever is after this word. It will return the sum of the number a and the number b. Back to our app, the oncreate method has one parameter. It is a bundle called savedinstancestate. A bundle is like a bunch of data. Here it refers to information about the activity the last time it was opened. The curly brace { shows that the actions of the method will follow. The line super.oncreate(savedinstancestate); will restore any information in the bundle about the activity the last time it was opened. The line setcontentview(r.layout.activity_main); tells the activity to use the activity_main.xml file as the layout to be displayed when the activity is running. This is the file we edited earlier to change the way the activity appears. At the moment, if you tap the button we made, nothing will happen. Let s add some code to make a small message pop up. In Android, this message is called a Toast. Go back to the activity_main.xml file that we edited earlier. We want to tell the app what to do if the button is clicked. We can do this by adding the following code to the button parameters. Copy and paste this inside the button s code: android:onclick="pushbuttonclicked" Make sure the /> stays at the end. Your code should look like this: This code means that when a user clicks the button, the Android system calls the activity's pushbuttonclicked method. We haven t created this method yet, so let s create it inside the HelloAndroidActivity class that we were looking at earlier. Under the closing curly brace } of the oncreate method copy and paste the code below: 10 P a g e

11 public void pushbuttonclicked(view v) { } Toast.makeText(getApplicationContext(), "Hello yourname", Toast.LENGTH_LONG).show(); Change the word yourname to your first name, e.g. John. Let s look at this code in more detail. Again we have public void which means this method can be used by other classes and it doesn t return anything at the end of the method. The name of the method is pushbuttonclicked the same name we gave when we edited the activity_main.xml file. So when the button is clicked, this method will be run. It has one parameter called v which is a View. A View is an object that you can put on the screen. Here it refers to the button we put on the activity. The second line makes the Toast or message appear. Toast.makeText creates the toast and it takes three parameters. The first parameter getapplicationcontext() is needed to tell the toast where to show itself. The second parameter "Hello yourname" tells the toast what to show when it appears. The third parameter Toast.LENGTH_LONG describes the type of toast to show. Here it will be a toast that appears for a long period of time. The.show() part tells the toast to show up. You ll notice a few more red bars on the left-hand-side of the screen: These are errors. You ll see a lot of these during your programming of Android apps. Sometimes you forgot a semicolon ; at the end of a line of code, or you spelled something wrong. In this case, we are missing some imports. We import external packages into our class that we need to access. If these packages are missing, the Java code doesn t know what we are referring to. In this case, it doesn t know what a View is, or what a Toast is, so we need to import packages that contain information about these classes. 11 P a g e

12 In Android Studio you could quickly import the necessary packages by clicking inside the Java code, and pressing the ALT key and the ENTER key at the same time. But here we have to type the imports in manually. Under the last import at the top of the file, copy and paste in the necessary imports: import android.view.view; import android.widget.toast; The two red errors should disappear as we have now told our app to import the correct packages. Don t worry about the remaining two errors. They aren t actually errors just a bug in Codenvy. We are ready to test our first app on a virtual Android phone! Testing the app on a virtual Android phone We will use a virtual phone, also called an emulator, to test our app. We can use an online emulator to do this but first we must prepare our app. We need to build the app, which means it will be checked for errors and prepared for deploying to a phone or emulator. Push the button at the top right of the window. It will say Build project when you hover over it. If you are prompted to save, press OK. A lot of text will appear and hopefully you will see that the app was successfully built. In the Builder panel, you should see a blue link that says target. If you can t see this, you may need to open the Builder panel: Click the target link and a new tab should open. You should see a lot of links on a white page: 12 P a g e

13 Click the download link next to the link that says mobile-android-java-basic.apk Open the folder in file explorer where the file downloaded to. This is usually in your Downloads folder. Remember where this file is located. This file is an apk file or an Android application package file and it is the format of installable files on the Android platform. Open a new tab and go to or just Google appetize and go click on UPLOAD in the homepage menu. You should see a page to upload your apk file and enter your address. Press the blue Select file button and find the apk file you downloaded earlier. Select it and you should see a green File successfully uploaded message. Now enter your address. In this class tutorial, use the temporary address you created earlier by going to the Fake Mail Generator tab and clicking Copy. Paste this address into the field: 13 P a g e

14 Click the blue Generate button. Check your in the Fake Mail Generator tab and you should have a new from Appetize.io 14 P a g e

15 Click the link under the text Your app is ready to go at A new window should open with a virtual phone to play with. Press Tap to Play Click your red Push me button and see what happens! 15 P a g e

16 Hopefully a toast will appear saying Hello and your name. Congratulations, you ve just created and tested your first Android app! Special thanks to Jürgen Brandstetter for help with Codenvy. Additional links for help and resources: 1. Program Flappy Bird without coding: 2. Create an app using drag and drop no coding: 3. Official Google documentation for building Android apps: 16 P a g e