Android Session1

Android: Session OnePart1: Configuring 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

ANDROID: TP1 GITM-MASTERS-P2013-VERDIER

PAGE 1 OF 14



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

Third step: Setting up a Virtual Device

You cannot select on the fly the environment you want to run you application in, first you have to create a virtual device in the “Android Virtual Device Manager”. You can access it in Eclipse via [Window->AVD Manager].

You don’t have to input all of the values, just enter the name, select the target and click on “Create AVD”.


PAGE 3 OF 14

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.

ANDROID: SESSION-1 GITM-MASTERS-P2013-VERDIER

PAGE 4 OF 14


PAGE 5 OF 14

Second step: UI customization

Go take a look at your “res/layout/activity_main.xml” file.

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.

That is because Android uses XML resource files for internationalization, that’s why you should never use static string in your “activity_main.xml”, but instead reference a string resource from the “res/values/string.xml” file.

Let’s change the application name to “MyHelloWorld” and the greeting message to “Hello Word, how are you doing ?”.

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" tools:context=".MainActivity" />


PAGE 6 OF 14

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 file or by using the graphical assistant.

Again, the XML code is there only for reference, you don’t have to type it !

Don’t forget to create the corresponding string resources in the “string.xml” file.

<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>


PAGE 7 OF 14

http://schemas.android.com/apk/res/android




http://schemas.android.com/tools

http://schemas.android.com/tools

Fourth step: Catch your click

To catch the click on our buttons, we have to set an event listener on them, but first things first, you need to get a reference to the button that is inside your “activity_main.xml“.

The method ”findViewById“ let you find the instance of a widget based on its id. The “R file” contains the id of all the widget whose “id” property you filled; it’s 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 on”Click()” method.

Add the missing code in your class.

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 first one is a tag you can filter 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]

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"); }}


PAGE 8 OF 14

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

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 (you can use RGB value directly in the XML; for example “#FFF” is white)

• textColor

• padding

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


PAGE 10 OF 14

Second step: Option menu

In this step we’ll add a “Reset” button in the option menu. To display this menu, you’ll 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 file for the menu

2.Create the option menu in our activity

3. Handle the click on the item


PAGE 11 OF 14

Resource file

The resource file for the menu is already part of the template so we don’t need to add.

Just remember that if you have to add a menu to another activity, you’ll 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 file 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 first time the “menu button” is pressed by the user.


PAGE 12 OF 14

Event handling

Finally, you have to handle the event that is fired 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.

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.

@Overridepublic 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;}


PAGE 13 OF 14

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

Android Session1

Documents

Transcript of Android Session1