mobile programming lecture 2

Mobile ProgrammingLecture 2

Layouts, Widgets, Toasts, and Event Handling

Lecture 1 Review

• How to edit XML files in Eclipse?

• What holds all elements (Views) that appear to the user in an Activity?

• When should you make changes to R.java?

• Give an example of a View (something in Android that extends View)

• How to add a new XML Layout file?

Today's Agenda

• Widgetso TextView, EditText, Buttons, SeekBar, NumberPicker

• Layoutso LinearLayout, RelativeLayout, TableLayout

• Toasts

• Event Handling

Widgets - Finding available Widgets

• To see some of the available Widgets, open one of the XML files in res/layout

• View the XML file as Graphical Layout using the tabs at the bottom of the window

• Select a category in the left pane if necessary (e.g. Form Widgets)

Widgets

• All of these widgets are subclasses of the View class (i.e., View is the base class for widgets)

• Try to avoid modifying XML files directly if you cano use Forms or WYSIWYG "wizzy wig" instead

Widgets - Examples

• TextViewso displays text in your Activity

• EditTexto allows the user to enter some text

• Buttono Can be pressed by the user to perform an actiono CheckBoxo RadioGroupo ToggleButton

Widgets - id's

• Id's are not required for each widget

• R.java stores the id's for your widgets. How does the id's set and get?o Remember, don't edit the R.java file!

Widgets - id's

• 2 ways to add a widget and set its android:id value

• Using the Graphical Layout editoro Drag and drop a widget onto the canvaso Right click on the widget and select "Edit ID..."

• Using the XML editoro type the XML code needed for the widget that you

wanto add android:id="@+id/id_name“ to its attributes

Widgets - id's

Save your file, and the id will automatically be added R.java

• android:id="@+id/id_name"o @ tells the XML parser to expand the rest of the id

string and treat it as an ID resourceo + is what causes the id to be added to R.java

Widgets

As you may have noticed, you can do this for attributes other than the android:id attribute

You can explore your options by right clicking on anything on the canvas

Widgets - layout_height/width

Always set the android:layout_height and android:layout_width attributes in the XML file for your widgets.

• NOT doing so is an easy way to get Force close

• Drag and drop onto the canvas so that you don't have to worry about this

Widgets - layout_height/width

Values for android:layout_height and android:layout_width

• "wrap_content"o big enough to hold it's contents

• "match_parent"o make the specified dimension as big as its parent

• "fill_parent"o being deprecated, replaced by "match_parent"

Widgets - TextView

We will experiment with some of the attributes for the TextView widget

• android:texto e.g. "Hello World!"

• android:textSizeo e.g. "20dp"o android:textSize should be specified in dp (density-pixels), so that

phones with different pixels-per-inch can be supported• android:textStyle

o e.g. "italic"• android:textColor

o e.g. #FFFFFF

Widgets - EditText

Experimenting with the EditText widget. EditText is a subclass of TextView.

• android:hinto e.g. "Enter your name"

• android:inputTypeo textCapWordso textMultiLineo textPasswordo textNumber

• android:gravityo e.g. "right”, “center_vertical”, “top”

Widgets - Gravity• Android:gravity sets the gravity of the

content of the View its used on.

• Android:layout_gravity sets the gravity of the View or Layout in its parent.

Widgets - Button

Experimenting with the Button widget. Button is a subclass of TextView.

• android:inputType

• android:gravity

Widgets - CheckBox

Experimenting with the CheckBox widget. CheckBox is a subclass of Button

• android:texto e.g. "I agree to the terms and conditions"

• android:checkedo "true" or "false"o sets the default value of the CheckBox

Widgets - RadioGroup / RadioButton

• You usually want to drag a RadioGroup onto the canvas first

• It's easy to drag and drop or remove RadioButtons to the RadioGroup

Widgets - RadioButton

Experimenting with the RadioButton widget. RadioButton is a subclass of Button

• android:texto e.g. "Female"

• android:checkedo "true" or "false"o sets the default value of the RadioButton

Widgets - ToggleButton

Experimenting with the ToggleButton widget. ToggleButton is a subclass of Button

• android:textOno e.g. "GPS Enabled"o default value is "On"

• android:textOffo e.g. "GPS Disabled"o default value is "Off"

• android:checkedo "true" or "false"o sets the default value of the ToggleButton

Widgets - SeekBar

Experimenting with the SeekBar widget. • android:max

o e.g. "100"o you can't set the min, it's always 0

• android:progresso e.g. "50"o sets the current position of the slider on the SeekBar

Widgets - RatingBar

Experimenting with the RatingBar widget. • android:numStars

o e.g. "6"• android:rating

o e.g. "3"o sets the default rating

• android:stepSizeo e.g. "2"o rating is set in groups of stepSizeo default = "1"

Layouts

You can add multiple Layouts to the canvas!

Layouts

• LinearLayout

• RelativeLayout

• TableLayout

Layouts - LinearLayout Review

Only allows you to arrange widgets in a linear direction

• horizontally or vertically

• sometimes this is all you need!

Layouts - LinearLayout (Vertical)

A

Layouts - LinearLayout (Vertical)

AB

Layouts - LinearLayout (Vertical)

ABC

Layouts - LinearLayout (Vertical)

ABCD

Layouts - LinearLayout (Vertical)

ABCDE

Layouts - LinearLayout

• Nesting LinearLayouts can degrade performance

• http://developer.android.com/training/improving-layouts/optimizing-layout.html

• For your homeworks and projects, only use LinearLayout when you have good reason to do so

Layouts

• Try not to waste too much time on editing the Layout in the XML editor

• If you want to switch from LinearLayout to another Layouto Right click canvaso Change Layout...o Select a different Layout

Layouts

• Want to add an entirely new UI?

• Right click your project > New > Android XML Fileo Resource Type: Layouto File: xml_file_name.xmlo Root Element: e.g. RelativeLayouto This stores the new XML file in res/layout

• Allows you to specify the position of one view B relative to another view A

Layouts - RelativeLayout

Layouts - RelativeLayout

A

Layouts - RelativeLayout

AB

Layouts - RelativeLayout

A B

Layouts - RelativeLayout

BA

Layouts - RelativeLayout

B A

Layouts - RelativeLayout

A

B

Many possibilities! Unlike LinearLayout

Layouts - RelativeLayout

A

BMany possibilities! Unlike

LinearLayout

Layouts - RelativeLayout

A

B

Many possibilities! Unlike LinearLayout

Layouts - RelativeLayout

• Many more possibilities for arranging your widgets, unlike LinearLayout.

• RelativeLayout > LinearLayout

• http://developer.android.com/guide/topics/ui/layout/relative.html

Layouts - TableLayout

• Displays widgets in rows and columns similar to HTML tables

• Your TableLayout usually consists of TableRows, which lay their children out horizontally

• layout_width attribute of TableLayout's children are forced to be match_parent (even if you set it yourself)

• Likewise, layout_height of a TableRow is forced to be wrap_content

Layouts - TableLayout

AD

BTableRowTableRow

CTableRow

Layouts - Oversized Layouts

• If you have some widgets that aren't being displayed on the screen, it could be because there isn't enough space on the screen to show them all

• You won't be able to scroll by default

Layouts - ScrollView

To solve this:

• Add a ScrollView view to the root of your root layout (can be LinearLayout)

• Move your main Layout to root of the ScrollView (e.g. RelativeLayout)

Toast

• Finally, Java code

• Before looking at Toasts ... let's look the autogenerated Java code.

public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}

Toast

• Finally, Java code

• Before looking at Toasts ... let's look the autogenerated Java code.

public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}

Main point of entry into your code. Called when the Activity is created.

Toast

• Finally, Java code

• Before looking at Toasts ... let's look the autogenerated Java code.

public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}

Android needs to do who knows what before you can do anything.

Toast

• Finally, Java code

• Before looking at Toasts ... let's look the autogenerated Java code.

public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}

Set the layout that you want to use. This one corresponds to res/layout/main.xml

Toast

• A notification message that pops up on the screen for a few seconds

• Add this to your code:Toast.makeText(this, "Message", Toast.LENGTH_SHORT).show();

Toast

• There are several reasons why your Toast won't show up on the screen

• One reason is that you probably forgot the .show() part of the Toast code.

Events - Event driven programming

• Android is event-driven

• The flow of code depends on events, unlike programs you normally write in C++

• If you've written JavaScript code before then you've probably done event-driven programming

Events - examples events

• Call a method when the usero clicks a buttono checks a checkboxo pulls back on and lets go of slingshot in Angry Birds

• Call a method when the systemo receives an SMSo receives a phone callo completely loads a web page in the browser

Events - View

• Every View can react to the onClick event

• Layouts are also Views!

• Let's react to a Button click event.

• Add a button to the canvas, and add the code in bold below to the button

<Button android:text="Submit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="myEventHandler" />

Events - Button Click

• Let's react to a Button click event.

• Add a button to the canvas, and add the code in bold below to the button

<Button android:text="Submit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="myEventHandler" />

Events - Button Click

This says to launch the myEvent method when this button is clicked

• Let's react to a Button click event.

• Add the method below to your Java codepublic void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

• Let's react to a Button click event.

• Add the method below to your Java code

public void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

Name of the method must match the android:onClick attribute in the XML file

• Let's react to a Button click event.

• Add the method below to your Java code

public void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

Has to be public to be able to work. private may give you a Force close.

• Let's react to a Button click event.

• Add the method below to your Java code

public void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

void for onClick. Not all event-handlers should return void, however. We'll see this soon

• Let's react to a Button click event.

• Add the method below to your Java code

public void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

View parameter is required. You may use myEventHandler to handle multiple events.

• Let's react to a Button click event.

• Add the method below to your Java code

public void myEventHandler(View v){Toast.makeText(

this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - Button Click

How do you know which view has been clicked?

• So far we've done most of our development using XML. Now we're going to really start looking at Java code.

• We need to be able to reference our views (specified in the XML file) using Java

In the Graphical Layout, right click the Button and choose Edit Id...

o set the ID to "submitButton"

Events - How do we know which view has been clicked?

• Add an EditText to the canvas

• Set the ID to "firstname"

• Set android:onClick="myEventHandler"

Events - How do we know which view has been clicked?

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

Add local fields for the corresponding widgets to reference them later

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

Set the widgets. Remember we set the unique IDs for these widgets previously.

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

Cast it to the correct View subclass, since findViewById returns a View.

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

Now that you can reference the views in Java, take a look at the method for the views

public class HelloWorldActivity extends Activity {

Button mSubmitButton; EditText mFirstName;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

Events - How do we know which view has been clicked?

e.g. mSubmitButton.setText("submit");mSubmitButton.getText();This is important!

public void myEventHandler(View v){

Toast.makeText(this, "You pressed a button!", Toast.LENGTH_LONG).show();

}

Events - How do we know which view has been clicked?

How do you know which view has been clicked?

public void myEventHandler(View v){

if(v == mSubmitButton) { /* submitButton clicked */ }else if(v == mFirstName) { /* first name clicked */ }

}

Events - How do we know which view has been clicked?

public void myEventHandler(View v){

if(v == mSubmitButton) { /* submitButton clicked */ }else if(v == mFirstName) { /* first name clicked */ }

}

Events - How do we know which view has been clicked?

Add this method to your class

You can also create a different method to handle events for different views if you want to.

Events

Events - Handling EventsThere are 3 ways to incorporate EventListeners:

1. Specify the name of the method to handle the event in XML. We just did this.

2. Have your Activity implement an EventListener

3. Create an anonymous implementation of the EventListener

Events - Handling EventsThere are 3 ways to incorporate EventListeners:

1. Specify the name of the method to handle the event in XML. We just did this.

2. Have your Activity implement an EventListener

3. Create an anonymous implementation of the EventListener

Events - Implement EventListenerpublic class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

}}

You should remove the android:onClick attribute from the submitButton in the XML file

Events - Implement EventListenerpublic class HelloWorldActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName);

mSubmitButton.setOnClickListener(this); }

public void onClick(View v) {...

}}

Events - Implement EventListenerpublic class HelloWorldActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); mSubmitButton.setOnClickListener(this);

}

public void onClick(View v) {...

}}

What if I remove this? Try it.

Events - Handling EventsThere are 3 ways to incorporate EventListeners:

1. Specify the name of the method to handle the event in XML. We just did this.

2. Have your Activity implement an EventListener

3. Create an anonymous implementation of the EventListener

Events - Anonymous Listenerpublic class HelloWorldActivity extends Activity{

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);Button mSubmitButton = (Button) findViewById(R.id.submitButton);EditText mFirstName = (EditText) findViewById(R.id.firstName);

}

Events - Anonymous Listenerpublic class HelloWorldActivity extends Activity{

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);Button mSubmitButton = (Button) findViewById(R.id.submitButton);EditText mFirstName = (EditText) findViewById(R.id.firstName);

}

Doesn't need to implement OnClickListener this time!

Events - Anonymous Listenerpublic class HelloWorldActivity extends Activity{

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);Button mSubmitButton = (Button) findViewById(R.id.submitButton);EditText mFirstName = (EditText) findViewById(R.id.firstName);

mSubmitButton.setOnClickListener( new OnClickListener() {public void onClick(View v) {

/* submitButton clicked */}

}); }}

Events - Anonymous Listener

A fast way to set the onClickListener:

after typing “mSubmitButton.” (including the dot)choose the “setOnClickListener” method from the list1. in the parentheses, type “new “ (including the whitespace)2. press Ctrl+Spacebar3. select View.OnClickListener from the list4. You may have to press Ctrl + o to import any missing packages5. add a semicolon at the end of the autogenerated code6. add your code to the auto-generated methods

Widgets - NumberPicker

• NumberPicker is in HoneyComb or later (Android 3.0)

• You may get Force close if you try to manipulate it in an earlier version

Widgets - NumberPicker

For some reason, it doesn't seem like NumberPicker attributes can be set in XML ...

Widgets - NumberPickerAfter adding NumberPicker with android:id="@+id/agePicker" to the XML file

NumberPicker mAgePicker;

public class HelloWorldActivity extends Activity{@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);mAgePicker = (NumberPicker) findViewById(R.id.agePicker);mAgePicker.setMaxValue(120);mAgePicker.setMinValue(5);

}

Widgets

Most of a widget's XML attributes can be set and get programmatically

Example widget XML attribute set method get method

EditText android:text setText(String) getText()

Button android:onClick setOnClickListener(OnClickListener) -

CheckBox android:checked setChecked() isChecked()

SeekBar android:progress setProgress() getProgress()

SeekBar android:max setmax() getMax()

Homework 2

• Homework 2 is posted on my website: http://ww2.cs.fsu.edu/~tian/mobileProgramming.php

• It is due on May 24th, next Friday, in class.

• Please just demo to me.

References

• The Busy Coder's Guide to Android Development - Mark Murphy

• Android Developers

• The Mobile Lab at Florida State University