1. Copyright© Jeffrey Jongko, Ateneo de Manila University Basic Views and Layouts

2. Overview  Views  Layouts  Passing data between Activities  via onActivityResult  via Application

3. Copyright© Jeffrey Jongko, Ateneo de Manila University Basic Views

4. Views  Basic Views  EditText  CheckBox  RadioButton

5. Graphical Editor  The graphical editor allows for drag-and-drop creation of static user- interfaces  All widgets and layouts described here are located under Form Widgets, TextFields, Layouts

6. EditText  EditText is simply a TextView that has been configured to be editable  Different types of pre-configured EditTexts are available in the TextFields group of the Graphical Editor  Plain Text  Password  Phone Number  etc

7. Using EditText  Pre-configured EditTexts handle their own validation internally  E.g. Phone numbers only accept numbers and select characters

8. Example  Here is an example of a Phone Number- style EditText  The keypad is set for number and phone-related characters like ‘+’

9. Example  In the XML file built-in validation is controlled by the android:inputType attribute <EditText android:id="@+id/editText1" android:layout_height="wrap_content" android:layout_width="match_parent" android:inputType="phone">

10. Extracting text  To retrieve contents of the EditText use  getText().toString()  Note: getText() itself does not return a String so you cannot just typecast the output final EditText edittext = (EditText) findViewById(R.id.edittext); String s = edittext.getText().toString();

11. CheckBox  CheckBoxes are used to indicate selection of a specific option  Boolean type state  Checkboxes are used for non- mutually exclusive states  You can select any, all or none of the options  The state of the CheckBox can be determined using isChecked()

12. Example  Alternatively, you may wait for the box to be checked by using an View.OnClickListener like with a Button final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox); checkbox.setOnClickListener(new OnClickListener() { public void onClick(View v) { if (((CheckBox) v).isChecked()) { // check action } else { // unchecked action } } });

13. Alternative  If you don’t want to use an OnClickListener, you may also pullout the CheckBox from the form using findViewById(int id) and then use the isChecked() afterwards  Note: this will only be useful when you are about to finish() the current Activity final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox); if (checkbox.isChecked()) { // check action } else { // unchecked action }

14. RadioButton / RadioButtonGroup  RadioButtons unlike CheckBoxes are meant to be used on data where only a single selection is allowed from the list  RadioButtons are managed by a RadioButtonGroup  Controls the state of the radio buttons, if one is pressed, the group unsets the others in the group

15. Example  NOTE: the radio buttons must be in a radio group to function properly (only one selection)

16. Example  Alternatively, you may wait for the box to be checked by using an View.OnClickListener like with a Button or CheckBox final RadioButton rb = (RadioButton) findViewById(R.id.radio1); rb.setOnClickListener(new OnClickListener() { public void onClick(View v) { if (((RadioButton) v).isChecked()) { // check action } else { // unchecked action } } });

17. Note  You may also programmatically control radio button state  If you need to change the state yourself, use the setChecked(boolean) or toggle() method  You may also use the RadioButtonGroup to change state  check(int id)  Id is the id of the radio button  clearCheck()  Clears the whole group

18. Additional View Resources  file:///C:/android-sdk- windows/docs/resources/tutorials/views /hello-formstuff.html file:///C:/android-sdk- windows/docs/resources/tutorials/views /hello-formstuff.html

19. Copyright© Jeffrey Jongko, Ateneo de Manila University Layouts

20.  Android has several built-in Layouts  LinearLayout  Either vertically or horizontally placing Views one after another  RelativeLayout  Placing views relative to the position of another view

21. layout_width and layout_height  These View XML attributes are usually used in reference to the container layout  Both use one of the following values  match_parent / fill_parent (depending on OS version) – fills to match width of the layout  wrap_content – sizes according to the minimum required size of the content of the View

22. LinearLayout  LinearLayout is a ViewGroup that displays child View elements in a linear direction, either vertically or horizontally. LinearLayoutViewGroupView  You should be careful about over-using the LinearLayout. If you begin nesting multiple LinearLayouts, you may want to consider using a RelativeLayout insteadLinearLayout RelativeLayout

23. layout_gravity  In addition to the basic layout_height and layout_width, Widgets also have a layout_gravity attribute to indicate which side to align the widget within the space assigned to it  Takes values such as  top  bottom  left (default)  (see Eclipse auto-complete for others)

24. Example  NOTE: Use of gravity varies according to widget or layout  Sometimes it is ignored <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="RIGHT" android:gravity="right"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="LEFT" android:gravity="left"/>

25. layout_weight  LinearLayout also supports assigning a weight to individual children.  This attribute assigns an "importance" value to a view  allows it to expand to fill any remaining space in the parent view.  Widgets with the same weight will shared the extra space equally  Child views can specify an integer weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight.  Default weight is zero.

26. Example  With all weights left as default  With the weight of the second textbox set to 1 with all the others set to 0(default)

27. RelativeLayout  RelativeLayout is a ViewGroup that displays child View elements in relative positions. The position of a View can be specified asViewGroup  relative to sibling elements (such as to the left-of or below a given element)  in positions relative to the RelativeLayout area (such as aligned to the bottom, left of center).RelativeLayout  A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested ViewGroupsRelativeLayoutViewGroup

28. Example <Button android:layout_width="wrap_content“ android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok“ android:layout_alignTop="@id/ok" android:text="Cancel" />

29. RelativeLayout attributes  Some relative layout xml attributes:  android:layout_above - Positions the bottom edge of this view above the given anchor view ID. android:layout_above  android:layout_alignBaseline - Positions the baseline of this view on the baseline of the given anchor view ID. android:layout_alignBaseline  android:layout_alignBottom - Makes the bottom edge of this view match the bottom edge of the given anchor view ID. android:layout_alignBottom  android:layout_alignLeft - Makes the left edge of this view match the left edge of the given anchor view ID. android:layout_alignLeft  A complete list can be found in the /docs  file:///C:/android-sdk- windows/docs/reference/android/widget/RelativeLayout.LayoutPara ms.html file:///C:/android-sdk- windows/docs/reference/android/widget/RelativeLayout.LayoutPara ms.html

30. Nesting Layouts  Layouts can be nested within each other to form complicated groupings of widgets  This is normally required when you want to control the layouting of a group of widgets as a single entity

31. Additional Layout Resources  file:///C:/android-sdk- windows/docs/resources/tutorials/views /index.html file:///C:/android-sdk- windows/docs/resources/tutorials/views /index.html

32. Copyright© Jeffrey Jongko, Ateneo de Manila University Form Management

33.  When making forms/activities it is required that you remember certain things such as  If an activity may spawn one or more activities depending on the situation  How do you know which one just happened?  If data from the next activity is needed what do you do if the activity is canceled?  Either through a button or hitting the BACK button

34. onActivityResult()  onActivityResult(int requestCode, int resultCode, Intent data) method triggers when the just closed activity is meant to return data to the current activity  It contains all the information needed to identify  Which activity just closed  The state the activity was in when closed  The returned data itself

35. requestCode  When you call startActivityForResult(int requestCode, Intent intent)  requestCode is a arbitrary integer representing what the next activity is  0 could mean entering an activity to input a name  1 could mean entering an activity to input an address

36. resultCode  When you call setResult(int resultCode, Intent data)  resultCode is an arbitrary integer representing the exit state of the activity  0 could mean OK  1 could mean Cancel  This can be later used to determine later actions

37. Data Flow FORM TextView1 (Name) TextView2(PhoneNumber) BUTTON1 (Input Name) BUTTON2 (Input #) INPUT FORM TextView (Label) EditText (input field) BUTTON1 (Done) BUTTON2 (Cancel) requestCode = 0 requestCode = 1 resultCode = 0 resultCode = 1 onActivityResult(requestCode, resultCode, intent) NOTE: Ideally, you should use constants instead of hard- coded numbers to make sure your values are consistent

38. BACK behaviour  The pressing the BACK cause the Activity to finish()  This can be a problem if the previous activity is waiting for data  E.g. the intent return will not have anything  The onBackPressed() method can be overridden to change this default behaviour  i.e. allow adding of intent data, result info

39. Example public void onBackPressed() { EditText b = (EditText) findViewById(R.id.editText1); String text = b.getText().toString(); Intent data = getIntent(); data.putExtra("INPUT", text); setResult(0, data); super.onBackPressed(); }

40. Back-ing when expecting data  When you hit BACK on an activity that is supposed to return a result by default the result will be null  i.e. The intent received on the onActivityResult() is null