ANDROID: TP1 !

GITM-MASTERS-P2013-VERDIER

Android: Session One

Part1: Conguring Eclipse First step: Installing Eclipse and ADT
First you need to install an IDE. The one we are going to use, and also the one Google recommends, is Eclipse. Here are the softwares you need to install:
Eclipse (>= 4.2) SDK starter package (>= r20) ADT plugin (>= 20.0)

If you are not familiar with the procedure, follow the instructions in the link below: http://developer.android.com/sdk/index.html

PAGE 1 OF 14!

ANDROID: TP1 !

GITM-MASTERS-P2013-VERDIER

Second step: Choosing an SDK

Eclipse is in charge of the ADT (Android Development Tools) extension, which let you access all the tools; one of those tools is the Android SDK Manager, which let you manage the SDK you want to use (and the related optional packages). You can access the SDK manager via Eclipse menu [Window->Android SDK Manager]. Since we will be working with the 2.3 SDK, you only need to have the following packages installed:

PAGE 2 OF 14!

ANDROID: TP1 !

GITM-MASTERS-P2013-VERDIER

Third step: Setting up a Virtual Device

You cannot select on the y the environment you want to run you application in, rst you have to create a virtual device in the Android Virtual Device Manager. You can access it in Eclipse via [Window->AVD Manager]. You dont have to input all of the values, just enter the name, select the target and click on Create AVD.

PAGE 3 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Part2: HelloClick
We are going to make a simple HelloWorld application that can also count how many times you click on a button (such an amazing functionality).

First step: Creating the project

Create a new HelloWorld android project [File->New->Project...->Android->Android Application Project] with android SDK 2.3.3 as a build target, fr.epita for the package name. Then click Next.

For the other screens you can leave the default values and just click Next until you reach the Finish button.

PAGE 4 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

PAGE 5 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Second step: UI customization

Go take a look at your res/layout/activity_main.xml le. The template uses a Relative Layout which is a more advanced way to create a user interface a the regular Linear Layout, so we are going to convert it. In the outline panel, right click on the Relative Layout node and select Change Layout. Then select LinearLayout and validate.

The UI should now look like this:

We are going to customize the labels that are displayed. Switch from graphical editor to the XML editor. As you can see, your activity_main.xml does not uses a static string, but instead a link to a string resource.
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" tools:context=".MainActivity" />

That is because Android uses XML resource les for internationalization, thats why you should never use static string in your activity_main.xml, but instead reference a string resource from the res/ values/string.xml le. Lets change the application name to MyHelloWorld and the greeting message to Hello Word, how are you doing ?.

PAGE 6 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Third step: Create your UI

We want to keep thing simple so we are going to create our interface inside the standard LinearLayout node. Here is a screenshot of the interface and the corresponding XML code. You should drag and drop your widget in the WYSIWYG editor and then change the few properties that need to in the XML editor. Remember that you will have warning if you use a static string instead of a resource, so be sure to create new string resources either by modifying your code directly in the strings.xml le or by using the graphical assistant. Again, the XML code is there only for reference, you dont have to type it !
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" tools:context=".MainActivity" /> <Button android:id="@+id/buttonIncrement" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/defaultMargin" android:text="@string/buttonIncrementText" /> <Button android:id="@+id/buttonReset" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/defaultMargin" android:text="@string/buttonResetText" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/defaultMargin" android:text="0" android:textAppearance="?android:attr/ textAppearanceLarge" /> </LinearLayout>

Dont forget to create the corresponding string resources in the string.xml le.

PAGE 7 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Fourth step: Catch your click

To catch the click on our buttons, we have to set an event listener on them, but rst things rst, you need to get a reference to the button that is inside your activity_main.xml. The method findViewById let you nd the instance of a widget based on its id. The R le contains the id of all the widget whose id property you lled; its automatically generated without you having to rebuild your project. Once you have your button you can set the ClickListener. To do so you have to let the Activity extend the android.view.View.OnClickListener interface and you have to implement the onClick() method. Add the missing code in your class.
public class MainActivity extends Activity implements OnClickListener { ! private static final String! TAG! ! = "HelloWorldActivity"; ! ! ! ! ! ! ! ! ! ! ! ! ! ! } Button! ! ! ! incrementButton;

/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { ! super.onCreate(savedInstanceState); ! setContentView(R.layout.main); ! ! } incrementButton = (Button) findViewById(R.id.buttonIncrement); incrementButton.setOnClickListener(this);

public void onClick(View v) { ! Log.d(TAG, "button click"); }

To be sure we get the event, we want to display a message on the console. Use the Log.d method to display a debug message. It takes 2 strings: the rst one is a tag you can lter afterward, and the second one is the message you want to log. You can display all the message from your application with the LogCat utility [Window->Show view>other...->Android->LogCat]

PAGE 8 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Now here is your todo list to get the application to do its work:
declare the clearButton and the countTextView get the button and textView view from their id set the clearButton ClickListener make the incrementButton increment the counter make the clearButton reset the counter

PAGE 9 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Part3: Improved UI First step: Improve your layout

Tweak your UI to make it look like this (and its corresponding XML tree):

Here is a list of all the changes you have to do:

1.

for the buttons

nest them inside a linear layout distribute their weight evenly

2.

for the Count textView, change the following properties

layout_width (fixed it to 80dp) layout_gravity (indicate left to place the widget from its parent) layout_margin gravity background textColor padding

(you can use RGB value directly in the XML; for example #FFF is white)

Finally, using the Toast.makeText() method, display notication when the user reset the counter.

PAGE 10 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Second step: Option menu

In this step well add a Reset button in the option menu. To display this menu, youll have to click on the menu button in the emulator. We need the following things to have a menu: 1. Create a new XML resource le for the menu 2.Create the option menu in our activity 3. Handle the click on the item

PAGE 11 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Resource le The resource le for the menu is already part of the template so we dont need to add. Just remember that if you have to add a menu to another activity, youll have to add an android XML resource to your project. [File!New!Other ...!Android XML File]. Select the menu for the resource type. Display the activity_main.xml menu le located in res/menu folder. Than add a new item by click on Add ... then select Item. You have to set the following parameters:
Id: so you can reference your menu item and access it afterwards Title: the title of your menu item (create a new string in your strings.xml and reference it) Icon: the icon to display for your menu item (use a reference to an existing image resource)

Menu creation Your menu is already loaded in your MainActivity in the onCreateOptionsMenu method. This method is called the rst time the menu button is pressed by the user.
PAGE 12 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Event handling Finally, you have to handle the event that is red when the user clicks on the menu item by overriding another method. Use the onOptionsItemSelected method to clear the counter and display a toast message to the user.
@Override public boolean onOptionsItemSelected(MenuItem item) { ! switch (item.getItemId()) ! { ! ! case R.id.menu_reset: ! ! ! //TODO: clear the counter and display a toast ! ! ! break; ! ! default: ! ! ! break; ! } ! return true; }

Reverse mode Remove the Settings menu item and add a new Reverse ! menu item to switch between increase and decrease when you click on the click me button. You can use the @android:drawable/ ic_menu_revert icon.

PAGE 13 OF 14!

ANDROID: SESSION-1 !

GITM-MASTERS-P2013-VERDIER

Part4: Granularity
We want to be able to choose how much we add or subtract to the counter. Add 2 buttons, the Normal has to set the step to one and the Big has to set the step to ten.

PAGE 14 OF 14!