Month: September 2014

Exeception in layout preview screen in Android Studio

When using Android Studio today I came across an issue with the layout preview where after changing the default layout the preview is no longer rendered and the following message is displayed “Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V”

This is something to do with the API level that the renderer is using. API 20 causes the issue and 19 works. So my workaround at the moment is to change the API level in the top right hand corner of the preview toolbar. Click on button with the Android Icon and a number and change it to a lower API version.

Building robotium-maps jar for use with robotium

So today I thought I’ll have a look at getting the robotium-maps library integrated with Robotium and see how well it works. It turns out though that there isn’t a lot of documentation, or any for that matter that I could find on robotium-maps. The first challenge was I am using Android Studio which has a gradle build system not Maven and so integration is less clear.

To get the code to build I had to change the pom file from the checked out robotium-maps code to add the mvnrepository because I didn’t have one setup and changed the versions of robotium solo that was available.

Steps to build the code:

1) Download the robotium maps code
2) Download and install Maven
3) Set JAVA_HOME to your JDK folder
4) Add maven bin folder to your PATH
5) Install the maps.jar to your local maven repository.
6) Edit the pom.xml and then run the build and get the jar!

Download the robotium maps code
The code for robotium-maps can be found on their github site. You can either download it using git if it is installed, otherwise just download the zip and extract it.

Download and install Maven
Not everyone is familiar with maven. Head over to http://maven.apache.org/download.cgi and download the maven zip file. Extract it to C:\

Set JAVA_HOME to your JDK folder
In your system environment variables if it doesn’t exist already the create a variable called JAVA_HOME and set the path to your JDK install folder (not the bin folder)

Add maven bin folder to your PATH
In your system environment variables edit the PATH variable and add the maven bin folder to it, e.g. C:\apache-maven-3.2.3\bin

Install the maps.jar to your local maven repository
This is the instruction that is on the github site for robotium maps. This is to put the google maps jar into the local maven repository so that the build works. My version of maps had moved on so I ran the command C:\Users\Marc\AndroidStudioProjects\robotium-maps>mvn install:install-file -Dfile=”C:/android-studio/sdk/add-ons/addon-g
oogle_apis-google-19/libs/maps.jar” -DgroupId=com.google.android.maps -DartifactId=maps -Dversion= -Dpackaging=jar if you make sure that you run this command not in the folder where the robotium-maps project is because otherwise, it tries to build the robotium-maps library and will fail.

Edit the pom.xml and then run the build and get the jar
I had to change the robotium-maps pom.xml file slightly because my maven setup was clean and I didn’t have any other repositories configured. I added the following to the pom.xml at the bottom of the file inside

<repositories>
  <repository>
    <id>my-repo1</id> 
    <name>MVNRepository</name>
    <url>http://mvnrepository.com/</url>
  </repository>
</repositories>

I also needed to change the robotium versions to 3.3 because 3.3.1-SNAPSHOT didn’t exist on the http://mvnrepository.com repository.

Finally, running mvn install in the folder where the robotium-maps pom.xml file is, should build and create the jar. Go into the target folder and you will see robotium-maps-3.3.jar

To test it for now I am just going to put it into a lib folder in the project as I haven’t yet worked out how to add jars to local gradle repositories.

Tutorial – Developing your first Android app

This week I ran a training course to show the development team how to create an app in Android, how to create an AVD etc. It covered areas such as layouts, code structure, creating an Activity, calling one activity from another. It was to an audience containing some non Java developers and some with no development experience at all so it is very light on code and focussed only on creating a very simple calculator. Along with it were some slides produced in a very cool presentation tool called emaze. My slides can be found here, please use and share if you want. If you do all I ask is you let me know so I can see that people are benefiting from them.

You can find a word document of the tutorial available here: Creating a simple calculator.

The code for this session was based on this blog post.

Creating a simple calculator

System Requirements

• Intel Core i5 or better if you want to run the emulator. Core 2 Duos are fine at running Android Studio though.
• JDK 1.7 or higher
• Android Studio (This tutorial was based on version 0.8.6)
• Android SDK 4.4.2 (Although we aren’t using any of the specific 4.4.2 functionality)

Practical 1 – Create a new project
1. In Android Studio click File>New Project
Practical2-Step1a
2. Set Application Name to “Simple Calculator”. This will be the name displayed under the icon when installed on the device.
3. Set Company Domain to “example.com”. This will then become the package structure that the source code is stored under.
4. Keep the default project path and click Next.
Practical2-Step2
5. Notice that Android Studio helps with the SDK version to pick based on the percentage of devices running that version. Enabling the developer to support as many devices as possible if this is the priority.

Note from Google: The minimum SDK version determines the lowest level of Android device the app will run on.
You typically want to target as many users as possible, so you ideally want to support everyone. However, it has some disadvantages around new features that are available in the new versions.

6. There are other options available that won’t be covered around wearables, project glass and TV based applications.
7. Select the minimum SDK that you’ll application will support (4.0). Click Next.
Practical2-Step3
8. There are a number of options on this screen enabling you to create your first activity tailored to what you want to do. However, it doesn’t tie you to only be able to do that single thing in the activity. For example, there is a navigation drawer and a Google Maps activity. These can be merged together after choosing one of these from the wizard. They are just a starting point.
9. Select Blank Activity and click Next.
Practical2-Step4
10. Change the Activity Name to CalculatorActivity just to make this activity name suit what we are going to be doing with it.
11. You can change the title to something like Simple Calculator. This will be displayed at the top of the activity.
12. Click Finish.
Practical2-NewProjectCompleted
13. You’ll now have a basic application that you can run.
14. If you have a device connected to your machine, you can run it by clicking on the Debug App toolbar icon (One that looks like an insect) and select your device, otherwise you will need to go through practical 2 first to create an emulator before you can run it. (There is another way of launching the AVD Manager when running the application but I’ll go with the instructions below for now)

Practical 2 – Creating your Android Virtual Device

An Android Virtual Device or AVD is essentially Android running on an Emulator on your desktop. It does have its limitations in that it’s not mobile, doesn’t have a SIM card, access to a GPS, Accelerometers, and other sensors. However, for some apps it is perfectly fine to use. That said you can mock locations and get the emulator to use your laptops camera for its camera but nothing beats just developing on a real device. Since we don’t have that many real devices kicking around we’ll be using the emulator.

Quick note: Connecting and debugging apps on a real device is pretty much just plugging in the device via USB. The only additional step you may need to do is to enable the developer menu in the settings.

1. Start Android Studio.
2. Click on the AVD Manager toolbar button at the top near the right.
3. Click on the Device Definitions tab.
Practical1-AVD
4. Select Nexus 4 from the list and click Create AVD.
Practical1-CreateAVD
5. Give you AVD a name or keep the existing name.
6. Set Target to “Select API Level 17”
7. CPU “Intel Atom” or “ARM” (Doesn’t really matter for this tutorial)
8. Set Skin to “No Skin”
9. Tick Use Host GPU in Emulator Options.
10. Click OK
11. You should now see it in your list in the Android Virtual Devices tab.
12. Select it and click the Start button & you should now have a working Nexus 4 emulator! (Might take a while though depending on your hardware)

Practical 3 – Adding controls to the layout

In this session you will be creating a new layout (the view that is displayed in the calculator activity). We’ll be adding a couple of EditText controls, 4 buttons and a TextView.

We could do this in a couple of ways using either LinearLayout or RelativeLayout, for now we’ll go with LinearLayout.

1. Find your Activities layout file, it should be called activity_calculator.xml which will be located in app->src->main->res->layout. Double click on it to open it.
2. You have two ways of editing the layouts, using either the GUI builder or XML. Sometimes the GUI builder throws errors so for this tutorial we’ll use XML I’m afraid.
3. Click on the Text tab at the bottom of the preview window for the layout to view the XML.
4. Select all of the text and replace it with

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

</LinearLayout>

5. This provides the initial layout structure for the whole screen. The android:orientation=”vertical” tells the system that the controls will be laid out on beneath the previous one, i.e. in rows. If you want the controls in columns then change the value to horizontal.
6. The next step is to add two text fields that will take the two numbers that the calculator will operate on. To add these we need to insert an additional linear layout. For clarity I have included android:orientation=”horizontal” that adds the included controls in columns. This isn’t necessary by default because if there is no orientation it is horizontal.
7. The mark up below should be inserted as the content of the LinearLayout markup added above. To ensure you’ve done it right your file should end with two closing tags </LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout1"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="3dp">
<EditText
android:id="@+id/etNumber1"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:inputType="numberDecimal">
</EditText>
<EditText
android:id="@+id/etNumber2"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:inputType="numberDecimal">
</EditText>
</LinearLayout>

The other fields of interest are android:id which is just a unique id that allows the Java code to get hold of the control to get, set values and manipulate the control.
android:inputType allows the developer to restrict the values that are entered or displayed. There are about 30 different options available from phone numbers, email addresses passwords etc.



Pixels and Screen issues Other attributes like heights, widths etc. use sizes that have different dimensions available shown below. The two important dimensions are dp (density independent pixels) and sp (scale independent pixels). The dp allows the developer to specify sizes as if they were pixels, however, it handles issues around screen densities so the developer doesn’t have to be as concerned around handling differently a cheap screen with a low pixel density and a better device with a higher pixel density. (Like Non-retina and retina to you Apple folk out there ) DP – Abstract unit based on the physical density of the screen. SP – Like DP but the font is resized also based on the users font size preference. PT – 1/72 inch of the physical screen size. PX – Based on the actual pixels on the screen (This isn’t a recommended) IN – Size in inches based on the physical screen size of the device. MM - Size in mm based on the physical screen size of the device.
8. With these controls added you should see in the preview two text fields side by side. (You can run this in the emulator if you want but all you’ll see is an app with two text fields that you can enter only decimals into or if running on a real device will bring the numeric keyboard up when you tap on the control) 9. Next we want to add the buttons to perform the operations on the two numbers. This should go below the XML you pasted in the previous step. This will create a new row of controls below the text fields and are laid out in columns. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout2" android:orientation="horizontal" android:layout_marginTop="3dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"> <Button android:id="@+id/btnAdd" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:text="+" android:textSize="8sp"> </Button> <Button android:id="@+id/btnSubtract" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:text="-" android:textSize="8sp"> </Button> <Button android:id="@+id/btnMultiply" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:text="*" android:textSize="8sp"> </Button> <Button android:id="@+id/btnDivide" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:text="/" android:textSize="8sp"> </Button> </LinearLayout> 10. The code above introduces a new control (Button) with the android:text tag containing the text displayed in the button. There is also a tag android:layout_weight which is uses to determine how much space it should consume in the layout compared to it’s siblings. In this case they are all 1 so they are evenly spaced. 11. The final bit to add is a TextView control to display the answer in. Add this in between the two </LinearLayout> tags at the end of the file. <TextView android:id="@+id/tvResult" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:textSize="12sp" android:layout_marginTop="3dp" android:gravity="center_horizontal"> </TextView>

12. Some points of interest for this control are android:width and android:gravity. The width attribute is in this case is set to match_parent which means that it’s width will be the same size as the parent container. In this situation it will be the width of the screen (minus any padding).
The android:gravity attribute specifies where the control should sit in it’s container, e.g. left, right, center-horizontal, center-vertical, top, bottom etc.
13. Running the app now in your simulator you should see the following:
Practical2-RunningSimulator

Practical 4 – Adding the code to support the front end
So we’ve build the UI for our calculator activity the next step is to add some code to the Java Activity that will get hold of the controls, setup listeners for events fired by the buttons and perform the required operation to then present the result back to the user.

1. First let’s find your Activity file, double click on your Java file called CalculatorActivity. This can be found in app->src->main->java->com.example.simplecalculator.
2. We will now add member variables to the class that are Java representations of the controls that you have added in the layout file in the previous practical. At the top of the file on a new line after extends Activity {

private EditText etNumber1;
private EditText etNumber2;

private Button btnAdd;
private Button btnSubtract;
private Button btnMultply;
private Button btnDivide;

private TextView tvResult;

3. When you copy this text into the class the IDE will (hopefully) prompt you to import the classes into the file. All this is, is just a declaration to say that you want to use another class in this class. To import the class when it highlights the issue you’ll need to click on the red underlined name and click on the red lightbulb and select import class or use Alt-Enter (Option-Enter on Macs). (You can configure the IDE to auto-import which helps speed up development).

4. Next we will add code to the onCreate method. This is the method that is called by Android whenever the activity is first created. We will use it to initialise the controls specified above using the findViewById method.

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_calculator);

  // Find the elements and assign them to the member variables
  etNumber1 = (EditText) findViewById(R.id.etNumber1);
  etNumber2 = (EditText) findViewById(R.id.etNumber2);

  btnAdd = (Button) findViewById(R.id.btnAdd);
  btnSubtract = (Button) findViewById(R.id.btnSubtract);
  btnMultply = (Button) findViewById(R.id.btnMultiply);
  btnDivide = (Button) findViewById(R.id.btnDivide);

  tvResult = (TextView) findViewById(R.id.tvResult);

  // Configure this class to be the listener for all the buttons
  btnAdd.setOnClickListener(this);
  btnSubtract.setOnClickListener(this);
  btnMultply.setOnClickListener(this);
  btnDivide.setOnClickListener(this);
}

The setContentView is used to connect this activity with the layout file that you updated earlier. The R class is a special auto-generated class that contains constants of resources in the application, from images, layouts to strings and custom dimensions.
For each control we setup we need to make sure that we cast the object returned by findViewById to the correct type.
The final lines are to set the onclick event listener for the buttons to be this class. This will highlight an error in the editor, to fix this complete the next step.

5. Near the top of the file after the words extends Activity copy implements View.OnClickListener
6. This will result in another error/warning because a new method needs to be added that implements the OnClickListener interface.
Practical4-ImplementMethod
7. Click on the red underlined text and you should get a red light bulb, click on that and select Implement Methods. Click OK in the dialog that then pops up.
8. Now we need to fill in the behaviour for the onClick handler. Copy the code below into the public void onClick(View v) method.

String operation = "";
float number1;
float number2;
float result = 0;

// check if the fields are empty
if (TextUtils.isEmpty(etNumber1.getText().toString())
  || TextUtils.isEmpty(etNumber2.getText().toString())) {
  return;
}

// read EditText and fill variables with numbers
number1 = Float.parseFloat(etNumber1.getText().toString());
number2 = Float.parseFloat(etNumber2.getText().toString());

// defines the button that has been clicked and performs the corresponding operation
// write operation into operation, we will use it later for output
switch (v.getId()) {
  case R.id.btnAdd:
    operation = "+";
    result = number1 + number2;
  break;
  case R.id.btnSubtract:
    operation = "-";
    result = number1 - number2;
    break;
  case R.id.btnMultiply:
    operation = "*";
    result = number1 * number2;
    break;
  case R.id.btnDivide:
    operation = "/";
    result = number1 / number2;
    break;
  default:
    break;
}

// form the output line
tvResult.setText(number1 + " " + operation + " " + number2 + " = " + result);

9. You’ll need to import TextView by clicking on the red underlined name and click on the red lightbulb and select import class or use Alt-Enter (Option-Enter on Macs)
10. You should now be ready to run the code and have a play. Click on the play button or the bug button to debug. Practical4-Play-Debug

Practical 5 – Add Permission and show a video

In this practical we will take the existing app that we have produced and tag on a random feature but it is really just to show the ease in which a video could be displayed using an existing Intent in the system.

1. First we need to open AndroidManifest.xml and add the new permission to use the Internet.
Copy
<uses-permission android:name=”android.permission.INTERNET” />
and paste it in the bottom of the AndroidManifest.xml file just before the </manifest> tag.
2. Right Click on java in the project structure panel and select New->Activity->Blank Activity
3. Change the Activity Name to “Video Activity”
4. Update it’s hierarchical parent activity to be the CalculatorActivity. This will ensure that if using the back button or the navigation menu functionality that it knows where the activity needs to go back to.
5. Next we need to add a new button to the new layout file. Find your activity_video.xml file in app->src->main->res->layout.
6. Add the following code to the layout before the </RelativeLayout> tag.

<Button
android:id="@+id/btnVideo"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Launch Video"
android:textSize="12sp"
android:onClick="launchVideo">
</Button>

7. Note this time we have specified the attribute android:onClick the value is “launchVideo” this is the name of the method in the Java Activity that needs to be created that will handle the onClick event.
8. You should now see the preview of the button on the right hand side of the IDE.
9. Find and open your VideoActivity.java file and add the following new method:

public void launchVideo(View view) {
Toast.makeText(this, "Launch Video", Toast.LENGTH_LONG).show();
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse("http://techslides.com/demos/sample-videos/small.mp4"), "video/mp4");
startActivity(intent);
}

10. There are a couple of things worth talking about here: The Toast method call is what is used in Android for on screen notifications. All you need to do to add a notification is provide the context in the first paramter which is the current activity, the text you want to display and how long you want to display it for.
The rest of the code is there to launch an Activity available in the system that is capable of displaying the data provided. This code will end up launching a video player on the device to play the video from this site. (The success of this demo is entirely based on our Internet connection speed!)
You can have multiple apps on your device that support these Intents and that is why on Android if you request a particular Intent Android sometimes prompts the user asking which app they want to use to handle it.
11. The part that we are still missing is to connect the CalculatorActivity to the VideoActivity. We will do this by hijacking the existing Settings menu. (Rather than do this properly as I think we’ll be short on time we will just rename the text for now but keep the settings ID)
12. Open strings.xml in app->src->main->res->values. This is where internationalise text is kept (Could have a whole lesson on this but for now I’ll just say this is the default language and to create other translations we need to create new string.xml files with the locale appended)
13. Find the word Settings and replace it with Video. This will replace the text that is defined in the menu file calculator.xml so when the menu button is pressed we should see the menu item “Video”
14. Now go to CalculatorActivity.java so that we can launch our new activity from the selected menu item. Find the method onOptionsItemSelected and in the if block where id == R.id.action_settings add the following code:

Intent video = new Intent(this, VideoActivity.class);
startActivity(video);

15. You are now ready to start your app. Click on the play or debug button.
Practical5-Menu
16. When it is started you can click on the menu button (on a phone it could be hardware or 3 dots on the screen) and select Video. This will launch the new activity and you should see the button “Launch Video”.
Practical5-LaunchVideo Screen
17. Note that the action bar at the top of the application has changed slightly and there is an < arrow allowing you to go back. Because you selected the parent hierarchy earlier this functionality comes for free, you can tap this or the back button to go back to the calculator activity, if you want.

18. When you do tap on the Launch Video button you should see eventually the video player display and play the video click that is streaming from the Internet.