Mobile Programming Lecture 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 Widgets o TextView, EditText, Buttons, SeekBar, NumberPicker Layouts o LinearLayout, RelativeLayout, TableLayout LinearLayoutRelativeLayoutTableLayout 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 can o use Forms or WYSIWYG "wizzy wig" instead

Widgets - Examples TextViews o displays text in your Activity EditText o allows the user to enter some text Button o Can be pressed by the user to perform an action o CheckBox o RadioGroup o 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 editor o Drag and drop a widget onto the canvas o Right click on the widget and select "Edit ID..." Using the XML editor o type the XML code needed for the widget that you want o add to its attributes

Widgets - id's Save your file, and the id will automatically be added R.java tells the XML parser to expand the rest of the id string and treat it as an ID resource o + 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:text o e.g. "Hello World!" android:textSize o 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:hint o e.g. "Enter your name" android:inputType o textCapWords o textMultiLine o textPassword o textNumber android:gravity o 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:text o e.g. "I agree to the terms and conditions" android:checked o "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:text o e.g. "Female" android:checked o "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:textOn o e.g. "GPS Enabled" o default value is "On" android:textOff o e.g. "GPS Disabled" o default value is "Off" android:checked o "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:progress o 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:stepSize o e.g. "2" o rating is set in groups of stepSize o 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

A B

A B C

A B C D

A B C D E

Layouts - LinearLayout Nesting LinearLayouts can degrade performance Nesting LinearLayouts can degrade performance ng-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 Layout o Right click canvas o Change Layout... o Select a different Layout

Layouts Want to add an entirely new UI? Right click your project > New > Android XML File o Resource Type: Layout o File: xml_file_name.xml o Root Element: e.g. RelativeLayout o 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

A

A B

AB

B A

BA

A B Many possibilities! Unlike LinearLayout

Layouts - RelativeLayout A B Many possibilities! Unlike LinearLayout

Layouts - RelativeLayout A B Many possibilities! Unlike LinearLayout

Layouts - RelativeLayout Many more possibilities for arranging your widgets, unlike LinearLayout. RelativeLayout > LinearLayout ayout/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 A D B TableRow C

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 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 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 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 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 user o clicks a button o checks a checkbox o pulls back on and lets go of slingshot in Angry Birds Call a method when the system o receives an SMS o receives a phone call o 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 code public 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 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 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 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 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 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 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 Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

Events - Handling Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

Events - Implement EventListener public class HelloWorldActivity extends 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 EventListener public class HelloWorldActivity extends Activity implements OnClickListener 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 EventListener public class HelloWorldActivity extends Activity implements OnClickListener 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 Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

Events - Anonymous Listener public class HelloWorldActivity extends 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 - Anonymous Listener public class HelloWorldActivity extends 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); } Doesn't need to implement OnClickListener this time!

Events - Anonymous Listener public class HelloWorldActivity extends 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( 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 list 1.in the parentheses, type “new “ (including the whitespace) 2.press Ctrl+Spacebar 3.select View.OnClickListener from the list 4.You may have to press Ctrl + o to import any missing packages 5.add a semicolon at the end of the autogenerated code 6.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 - NumberPicker After adding NumberPicker with to the XML file NumberPicker mAgePicker; public class HelloWorldActivity extends public 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 widgetXML attributeset methodget method EditTextandroid:textsetText(String)getText() Buttonandroid:onClick setOnClickListener(On ClickListener) - CheckBoxandroid:checkedsetChecked()isChecked() SeekBarandroid:progresssetProgress()getProgress() SeekBarandroid:maxsetmax()getMax()

Homework 2 Homework 2 is posted on my website: It is due on May 24 th, next Friday, in class. Please just demo to me.

References The Busy Coder's Guide to Android Development - Mark Murphy The Busy Coder's Guide to Android Development - Mark Murphy Android Developers The Mobile Lab at Florida State University