Høgskolen i Telemark Telemark University College Department of Electrical Engineering, Information Technology and Cybernetics Android Programming Cuong Nguyen, 2013.06.19 Android App Faculty of Technology, Postboks 203, Kjølnes ring 56, N-3901 Porsgrunn, Norway. Tel: +47 35 57 50 00 Fax: +47 35 57 54 01
Table of Contents Introduction... 3 1 Technical Implementation... 4 1.1 CreateAndroid WebService client... 4 1.2 Android programming... 6 1.3 Execute and run the app... 14 1.4 Comments & explainations... 15 2
1 Introduction This tutorial will focus on how to create a to exchange data with a Web Service. The Web Service which was created earlier to broad cast temperature data, here we will create an Android Native application to present the published data in an appropriate manner on Android device. In able to complete this tutorial you should already have a deployed Web Service running to test the creating Android Web Service client. If you do not have a Web Service yet, it is recommended to go through the WebService tutorial to create a Web Service on your system. Additionally, in able to develop an Android application you must first of all set-up the Android development environment. Kindly study Android_Startup tutorial to set-up an Android system. Objective: Create Native Android client to present data from a Web Service. Figure 1-1: WS data displayed by web browser. Android WS client: Type WS address Start new screen Pull data & present Figure 1-2: Android Web Service client. 3
2 Technical Implementation 2.1 CreateAndroid WebService Client Make sure the Android developing interface (JAVA-ADT) is set-up on your computer, If not go through the Android_Startup tutorial. Create a new Android application project and give a name (WebService) to the project. File New Android Application Project give name to the project and basically just click on NEXT until finish. INFO: More details on how to create a new project is described in Android_Startup. The Android development environment should be as shown in Figure 2-1. We will modify this application (Hello world!) into a Web Service client. Figure 2-1: Development environment with project (WebService). We would like to create additional xml and java files as seen in Figure 2-2. Package Explorer WebService src SensorValue.java 4
5 Technical Implementation Package Explorer WebService layout activity_sensort_value.xml Figure 2-2: Additional needed files. To create additional java files. File New Class Name: XXX (in this case Name: SensorValue) NOTE!! The SensorValue.java file should be under src folder as shown in Figure 2-2. To create additional xml files. ClicK: icon (Left top corner) Android Android XML File Next Resource Type: Layout File: activity_sensor_value.xml Root Element: TableLayout Finish. (See details in Figure 2-3) INFO: an activity_sensor_value.xml file should appear under layout.
6 Technical Implementation Figure 2-3: Creating "activity_sensor_value.xml" file 2.2 Android Programming Now we would like to modify and fill in xml and java files with codes. We will first of all focus on to filling android codes to the correct files. Once we finish with this process then we will execute and run the application on an Android Virtual Device and also on a real Android device. Comments on all the codes and programming structures are listed at the end of this tutorial. The following files will be modified or/and filled in with codes: MainActivity.java, SensorValue.java, activity_sensor_value.xml, strings.xml, AndroidManifest.xml, main.xml. Note!! main.xml in your case is activity_main.xml Fill in files with codes We will start to fill in codes in strings.xml. Double click: strings.xml Fill in codes in the strings.xml file
7 Technical Implementation Strings.xml codes: Figure 2-4: Opening a file for editing. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">web Service</string> <string name="action_settings">settings</string> <string name="hello_world">hello world!</string> <string name="get_button">get</string> <string name="enter_address">enter Web Service address</string> <string name="text_view">textview</string> <string name="hint_text"></string> <string name="start_button">start</string> <string name="title_activity_sensor_value">sensor Value</string> <string name="value_textview"></string> <string name="tvrow1column1"></string> <string name="name_textview"></string> </resources> Activity_main.xml codes: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tablelayout" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchcolumns="*" android:background="#fff" android:padding="5dp"> <!-- tablerow0 --> <TableRow android:id="@+id/tablerow0"
8 Technical Implementation android:layout_height="wrap_content" android:layout_width="match_parent" > <EditText android:id="@+id/edit_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/enter_address" android:layout_span="4" /> </TableRow> <!-- tablerow1 --> <TableRow android:id="@+id/tablerow1" android:layout_height="wrap_content" android:layout_width="match_parent" > <TextView android:id="@+id/tvrow1column1" android:layout_gravity="center_vertical" android:layout_height="wrap_content" android:layout_span="3" android:text="@string/tvrow1column1" /> <Button android:id="@+id/get_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/get_button" android:layout_gravity="center_vertical" android:onclick="sendmessage" /> </TableRow> </TableLayout> Activity_sensor_value.xml codes: <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/tablelayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" android:stretchcolumns="*" android:background="@android:color/white" tools:context=".sensorvalue"> <!-- tablerow0 --> <TableRow android:id="@+id/tablerow0" android:layout_height="wrap_content" android:layout_width="match_parent">" <Button android:id="@+id/start_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="@string/start_button" /> </TableRow>
9 Technical Implementation <!-- tablerow1 --> <TableRow android:id="@+id/tablerow1" android:layout_height="wrap_content" android:layout_width="match_parent" > <TextView android:id="@+id/nametextview" android:layout_gravity="center_horizontal" android:textsize="46dp" android:text="@string/name_textview" android:padding="5dp"/> </TableRow> <!-- tablerow2 --> <TableRow android:id="@+id/tablerow2" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" > <TextView android:id="@+id/valuetextview" android:layout_gravity="center_horizontal" android:textsize="36dp" android:text="@string/value_textview" android:padding="5dp"/> </TableRow> </TableLayout> SensorValue.java codes: package no.hit.webservice; import java.io.ioexception; import java.io.inputstream; import java.io.stringreader; import javax.xml.parsers.documentbuilder; import javax.xml.parsers.documentbuilderfactory; import org.apache.http.httpentity; import org.apache.http.httpresponse; import org.apache.http.client.httpclient; import org.apache.http.client.methods.httpget; import org.apache.http.impl.client.defaulthttpclient; import org.apache.http.protocol.basichttpcontext; import org.apache.http.protocol.httpcontext; import org.w3c.dom.document;
10 Technical Implementation import org.w3c.dom.element; import org.w3c.dom.node; import org.w3c.dom.nodelist; import org.xml.sax.inputsource; import android.annotation.suppresslint; import android.app.activity; import android.content.intent; import android.graphics.color; import android.os.asynctask; import android.os.bundle; import android.os.handler; import android.support.v4.app.navutils; import android.view.menu; import android.view.menuitem; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.textview; public class SensorValue extends Activity implements OnClickListener private Handler h = new Handler(); private Runnable myrunnable = new Runnable() public void run() //do stuff new LongRunningGetIO().execute(); //run again in one second h.postdelayed(myrunnable, 1000); ; @SuppressLint("NewApi") @Override protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_sensor_value); findviewbyid(r.id.start_button).setonclicklistener(this); @Override public void onclick(view arg0) Button b = (Button)findViewById(R.id.start_button); b.setclickable(false); new LongRunningGetIO().execute(); h.postdelayed(myrunnable, 1000); private class LongRunningGetIO extends AsyncTask <Void, Void, String>
11 Technical Implementation protected String getasciicontentfromentity(httpentity entity) throws IllegalStateException, IOException InputStream in = entity.getcontent(); StringBuffer out = new StringBuffer(); int n = 1; while (n>0) byte[] b = new byte[4096]; n = in.read(b); if (n>0) out.append(new String(b, 0, n)); return out.tostring(); @Override protected String doinbackground(void... params) // Get the message from the intent Intent intent = getintent(); String message = intent.getstringextra(mainactivity.extra_message); HttpClient httpclient = new DefaultHttpClient(); HttpContext localcontext = new BasicHttpContext(); HttpGet httpget = new HttpGet("http://"+ message); String webservicexml = null; try HttpResponse response = httpclient.execute(httpget, localcontext); HttpEntity entity = response.getentity(); webservicexml = getasciicontentfromentity(entity); catch (Exception e) return e.getlocalizedmessage(); return webservicexml; protected void onpostexecute(string webservicexml) String namedata=""; String valuedata=""; if (webservicexml!=null) // parse try DocumentBuilderFactory dbfactory = DocumentBuilderFactory.newInstance(); DocumentBuilder dbuilder = dbfactory.newdocumentbuilder(); InputSource s = new InputSource(new StringReader(webServiceXML));
12 Technical Implementation Document doc = dbuilder.parse(s); doc.getdocumentelement().normalize(); NodeList nlist = doc.getelementsbytagname("terminal"); for (int temp = 0; temp < nlist.getlength(); temp++) Node nnode = nlist.item(temp); if (nnode.getnodetype() == Node.ELEMENT_NODE) Element eelement = (Element) nnode; namedata = eelement.getelementsbytagname("name").item(0).gettextcontent(); valuedata = eelement.getelementsbytagname("value").item(0).gettextcontent(); catch (Exception e) e.printstacktrace(); TextView name = (TextView) findviewbyid(r.id.nametextview); name.settextcolor(color.parsecolor("#0147fa")); name.settext(namedata); TextView value = (TextView) findviewbyid(r.id.valuetextview); value.settextcolor(color.parsecolor("#0147fa")); value.settext(valuedata + " " +(char) 0x00B0 + "C"); Button button = (Button)findViewById(R.id.start_button); button.setclickable(true); @Override public boolean oncreateoptionsmenu(menu menu) // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.sensor_value, menu); return true; MainActivity.java codes: package no.hit.webservice; import android.app.activity; import android.content.intent; import android.os.bundle; import android.view.view;
13 Technical Implementation import android.widget.edittext; public class MainActivity extends Activity public final static String EXTRA_MESSAGE = "no.hit.webservice.message"; @Override protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.main); /** Called when the user clicks the Send button */ public void sendmessage(view view) Intent intent = new Intent(this, SensorValue.class); EditText edittext = (EditText) findviewbyid(r.id.edit_message); String message = edittext.gettext().tostring(); intent.putextra(extra_message, message); startactivity(intent); AndroidManifest.xml codes: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="no.hit.webservice" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="8" android:targetsdkversion="17" /> <uses-permission android:name="android.permission.internet"/> <application android:allowbackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/apptheme" > <activity android:name="no.hit.webservice.mainactivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name="no.hit.webservice.sensorvalue" android:label="@string/title_activity_sensor_value" android:parentactivityname="no.hit.webservice.mainactivity" > <meta-data android:name="android.support.parent_activity"
14 Technical Implementation android:value="no.hit.webservice.mainactivity" /> </activity> </application> </manifest> 2.3 Execute and Run the App We are now finishing with Android programming phase (All the files are loaded with codes). Next we will execute and run the Android WebService client. Run on Android Virtual Device (AVD) Simulate an application in a Virtual Device File Save to save all the changes Click: WebService Project Clean Click: WebService Run Run as 1 Android Application Recommend: Repeat all the three steps above every time you run your app. NOTE!! Important to click on WebService. Wait approximately a few minutes for your computer to load the Virtual Device (AVD). In case a window is pop-up as seen in Figure 2-5, just click Yes OK to continue. INFO: unlike other programming languages, to compile and run codes on Android is a very slow process, due to the reason the required time to launch AVD. Once AVD appears unlock Wait. Figure 2-5: Enable logcat service. Your new created WebService is running on Android Virtual Device by the given name MyDevice. Enter: address of the WebService Get Start Data extracted from the Web Service should display on AVD.
15 Technical Implementation Run on a real Android Device Figure 2-6: Android "WebService" application. All the written codes are compressed in a apk file, in this case the file name is WebService.apk. This specific file has to be downloaded (transferred) and installed on the real device. The file can be passed to the android device throug Bluetooth technology or simply by using a cable. Location of apk file: workspace WebService bin folder WebService.apk INFO: In my case the whole path to the WebService.apk is located in C:/User/levo/workspace/ WebService /bin/ WebService.apk Note!! Levo is my user name, so it is different name in your computer. 2.4 Comments & Explainations This section will focus on functionalities of different files (java and xml) and comments on all the codes containing in these files. Furthermore, src, values and layout folders are folders that developers mostly interact with, will also be given discussions. Layout XML code all the codes written in the xml files within layout folder specifies the layout of the screen. In this case we have two different xml files, activity_sensor_value.xml and activity_main.xml, these are located in the layout folder. Since the Web Service client (application) consists of two different screens and each separate screen needs their own xml file to control the layout. Activity_main. xml or main.xml controls the layout of the first screen. Here we refer the first screen as the first page appears on the device when the application starts up. In these case we enter the address of the Web Service on the first screen. activity_sensor_value.xml controls the layout of the second screen. In this case we display data published from the Web Service on the second screen.
16 Technical Implementation Figure 2-7: App consists of two screens. Java source code The Java code is what drives everything, where the main duty is to deliver the job given based on input from the screen, in other words commands given by the user. Java code executes and runs the application. MainActivity.java and SensorValue.java are the two files that contain Java codes. Each java files controls, executes and delivers the job based on the command given as input from layout screen. Java code can be considered as unseen engine spinning behind the current screen, always listening for a command from the user, where its mission is to deliver the job once a command is detected. MainActivity.java file deliver the job based on input from the first screen, while SensorValue.java file also has the same function but listens to the input from the second screen instead. The Java file operation in our case can be simplified as below: First screen Get (Input,Command) MainActivity.java Result (copy the WS address, send to the second activity (SensorValue.java) and open the second screen. Second screen Start (Input,Command) SensorValue.java Result (get the WS address from the first activity, get and update data from WS every second, display data on second screen). The whole process is illustrated in Figure 2-8.
17 Technical Implementation Figure 2-8: Chart flow of WebService app. Values folder This folder contains xml files as resources (dimensions, strings, styles), from which other files can pull data resources to fulfill various functions. All the text strings are stored in the strings.xml as text resource from which other files, methods, activity are able to utilize. A word string is stored in an xml file as seen below. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello_world">hello world!</string> </resources> AndroidManifest.xml The manifest file glues everything together, this specific file describes what the application consists of, what all its main building blocks are, what permissions it requires and etc. A Manifest file fills automatically codes by it selves while we are developing the app. The code of line below has to be written by the developer him selves to allow the application to access to the internet. <uses-permission android:name= android.permission.internet /> Activity_main.xml or main.xml Since this file is located in the layout folder so the codes containing in the main.xml file are mostly EditText, TextView and buttons of various type. The codes in this file control where on the screen these features should be placed and their characteristics. Main.xml file controls the layout of the first screen in the created WS client, from which there are two features; EditText and a Get button. EditText: is needed for users to be able to type input to the system, here the input is referred to a WebService address.
18 Technical Implementation Get button: when user press this button, a command is detected by codes written in a java and process until the result is delivered. Layout of first screen We set the screen as TableLayout type, we split the table up to two rows of which the first row (Android define first row as row 0) is reserved for TextEdit while the second row (row 1) is occupied by the Get button. Additionally the table is split in to three columns where one of the columns is reserved by Get button. A thickness of 5dp is surrounding along the whole table to the outer edge. The rest of the codes in the activity_main.xml are logical and easy to understand. Layout of second screen Figure 2-9: Layout design of first screen. We set the second screen also as TableLayout type, we split the table up to three rows of which the first row (Android define first row as row 0) is reserved for a Start button while the second and third rows (row 1 and row 2) are occupied by two TextViews with different properties. Additionally, a thickness of 5dp is surrounding along the whole table to the outer edge. The rest of the codes in the activity_main.xml are logical and easy to understand. Hence, Temperature and 26,7 C are dynamic TextViews, meaning they are displayed corresponding to changes in data broad casted from the WebService.
19 Technical Implementation Java files Figure 2-10: Layout design of second screen. The actual hardcore programming taken place in the java files, the java code is what drives everything. This Web Service client application consists of two java files; MainActivity.java reacts to the input from the first screen (main.xml) while SensorValue.java deliver the work based on the command from the second screen (activity_sensor_value.xml). MainActivity.java The method sendmessage will reacts based on the users interaction to the Get button in main_xml file. Once the button is pressed the method will start to process and the final result to the work is totally depending on what code is specified for this method. In this case the missions of the sendmessage method are; First of all create a new intent object by the name intent. Intent is a service in Android which mostly used to start a new activity. Since we are currently in MainActivity.java, intent will start SensorValue.java as new activity. Define the EditText (id: edit_message) as edittext in this java file copy the entered address in the EditText to the message. Example, if you have typed in <<128.39.35.239:8080/WebService/Temp_value>> the message contains the whole string that was just typed in. message = 128.39.35.239:8080/WebService/Temp_value When intent is activated and start another activity, the content of the message will also be sent to the new started activity, which in our case is SensorValue.java. public void sendmessage(view view)
20 Technical Implementation Intent intent = new Intent(this, SensorValue.class); EditText edittext = (EditText) findviewbyid(r.id.edit_message); String message = edittext.gettext().tostring(); intent.putextra(extra_message, message); startactivity(intent); SensorValue.java myrunnable method will put the system into sleep for a certain time period, in this case it is set one second. We use this method to get data from the WebService once in a second. private Runnable myrunnable = new Runnable() public void run() new LongRunningGetIO().execute(); ; //run again in one second h.postdelayed(myrunnable, 1000); onclick method calls for other method to perform a certain task. public void onclick(view arg0) Button b = (Button)findViewById(R.id.start_button); b.setclickable(false); new LongRunningGetIO().execute(); h.postdelayed(myrunnable, 1000); This part of code runs in the background of the system, its tasks are to; get the message (Entered in the EditText) passed over from the first activity then start internet connection with the WebService, where the address is contained in the message. protected String doinbackground(void... params) // Get the message from the intent Intent intent = getintent(); String message = intent.getstringextra(mainactivity.extra_message);
21 Technical Implementation HttpClient httpclient = new DefaultHttpClient(); HttpContext localcontext = new BasicHttpContext(); HttpGet httpget = new HttpGet("http://"+ message); String webservicexml = null; try HttpResponse response = httpclient.execute(httpget, localcontext); HttpEntity entity = response.getentity(); webservicexml = getasciicontentfromentity(entity); catch (Exception e) return e.getlocalizedmessage(); return webservicexml; With this code we only extract (parse data from WS to Android) the data of interest from the WebService (Temperature and 26,7 C) then we give properties to these data. All the mentioned actions will be activated once the Start_button is pressed. protected void onpostexecute(string webservicexml) String namedata=""; String valuedata=""; if (webservicexml!=null) // parse try DocumentBuilderFactory dbfactory = DocumentBuilderFactory.newInstance(); DocumentBuilder dbuilder=dbfactory.newdocumentbuilder(); InputSource s = new InputSource(new StringReader(webServiceXML)); Document doc = dbuilder.parse(s); doc.getdocumentelement().normalize(); NodeList nlist = doc.getelementsbytagname("terminal"); for (int temp = 0; temp < nlist.getlength(); temp++) Node nnode = nlist.item(temp); if (nnode.getnodetype() == Node.ELEMENT_NODE) Element eelement = (Element) nnode; namedata = eelement.getelementsbytagname("name").item(0).gettextcontent(); valuedata = eelement.getelementsbytagname("value").item(0).gettextcontent();
22 Technical Implementation catch (Exception e) e.printstacktrace(); // Temperature TextView properties TextView name = (TextView) findviewbyid(r.id.nametextview); name.settextcolor(color.parsecolor("#0147fa")); name.settext(namedata); // Temperature value TextView properties TextView value = (TextView) findviewbyid(r.id.valuetextview); value.settextcolor(color.parsecolor("#0147fa")); value.settext(valuedata + " " +(char) 0x00B0 + "C"); Button button = (Button)findViewById(R.id.start_button); button.setclickable(true); Note!! When programming in java files we need to import many different libraries to support the code. In Android we do not need to put much focused on this problem. While you are programming every now and then just click: Ctrl + Shift + O Android will import all necessary libraries to support the written codes. As the second options is to right click texts with underlines, then choose import. At this moment you should be able to execute and run the Web Service client on an emulator (AVD) and also on the real physical Android device. But most important of it all is that you understand the programming structure in Android and have an idea over the functional of the codes in different xml and java files.
Høgskolen i Telemark Telemark University College Department of Electrical Engineering, Information Technology and Cybernetics Telemark University College Faculty of Technology Kjølnes Ring 56 N-3918 Porsgrunn, Norway www.hit.no Faculty of Technology, Postboks 203, Kjølnes ring 56, N-3901 Porsgrunn, Norway. Tel: +47 35 57 50 00 Fax: +47 35 57 54 01