Building a Simple UserInterface

1. Building a Simple UserInterface Mock Lecture in Android Application Prepared by: Emily F. Sicat

2. LAYOUTS

3. Android Layouts Layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user.

4. You can declare your layout in two ways: Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts. Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

5. Write the XML The Android's XML vocabulary allows you to design UI layouts and screen elements they contain in the very same way you create web pages in HTML.

6. An example of XML layout that uses a vertical LinearLayout to hold a TextView and a Button:

7. Load the XML Resource You should load the layout resource from your application code, in your Activity.onCreate() callback implementation. Do so by calling setContentView(), passing it the reference to your layout resource in the form of: R.layout.layout_file_name

8. Attributes Various XML attributes are supported by View and ViewGroup object. • The ID Attribute • To uniquely identify the View within the tree, any View object may have an integer ID associated with it.

9. The syntax for an ID attribute, inside an XML tag is: • The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. • The plus-symbol (+) means that this is a new resource • name that must be created and added to our • resources (in the R.java file).

10. Creating Views/Widget and Referencing them from the Application Define a view/widget in the layout file and assign it a unique ID: 2. Create an instance of the view object and capture it from the layout (typically in the onCreate() method):

11. Layout Parameters XML layout attributes named layout_something define layout parameters for the View that are appropriate for the ViewGroup in which it resides. Every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams. This subclass contains property types that define the size and position for each child view, as appropriate for the view group.

12. Figure 1 shows the parent view group that defines layout parameters for each child view (including the child view group).

13. Layout Parameters Every LayoutParams subclass has its own syntax for setting values. Each child element must define LayoutParams that are appropriate for its parent, though it may also define different LayoutParams for its own children. Note that all view groups include a width and height (layout_width and layout_height), and each view is required to define them.

14. More often, you will use one of these constants to set the width or height : • wrap_content tells your view to size itself to the dimensions required by its content • fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow. Note: You can specify width and height with exact measurements, though you probably won't want to do this often.

15. Common Layouts Linear Layout Linear Layout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.

16. Layout Weight This attribute assigns an "importance" value to a view in terms of how much space is should occupy on the screen. Default weight is zero.

17. Example

18. Relative Layout Relative Layout is a view group that displays child views in relative positions.

19. A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.

20. Positioning Views

23. INPUT CONTROLS

24. Input Controls Input controls are the interactive components in your app's user interface. Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more.

25. Sample Input Controls

26. Common Controls

27. Buttons A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it.

28. Buttons

29. Responding to Click Events To define the click event handler for a button, add the android:onClick attribute to the <Button> element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

30. Button using android:onClick:

31. The method you declare in the android:onClick attribute must have the exactly same signature as declared.

32. Using an OnClickListener You can also declare the click event handler pragmatically rather than in an XML layout. This might be necessary if you instantiate the Button at runtime or you need to declare the click behavior in a Fragment subclass. To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling 2setOnClickListener(View.OnClickListener).

33. LEARNING ASSESSMENT TOOLS 1. GRADED RECITATION • An after-lecture computerized graded recitation will immediately commence after the lecture to assess the learning progress of the learner. 2. WRITTEN EXAMINATION • A written examination about the topic Building a Simple UserInteface will be given to the learner a day after the discussion. 3. PRACTICAL EXAMINATION • A practical examination on how to create a simple userinterface with at least a textfield and button on it will be administered to assess the learner’s practical ability to apply what has been learned in the lecture.

34. GRADED RECITATION • Students will be called one by one, and a computer application program will randomly display one particular question for the student to answer. The question will be displayed for five (5) seconds and a 10-second timer will start to tick, giving the student the chance to give the answer to the displayed question within the given timeframe. Students who will be able to answer correctly will earn points/percentage that will be computed as part of their grade in the recitation. • A video sample of the screenshots of the computerized graded recitation for the student is shown on the next slide

35. Sample Screen Layout of Computerized Exam

36. WRITTENEXAMINATION • Students will be a given an objective type written questionnaire to answer within a specified timeframe as part of the learning assessment. • Objective type of questions such as identification, matching type, modified True or False, programming, simulations and the like will be the content of the written examination.

37. PRACTICAL EXAMINATION • A Laboratory Manual/Handouts providing the step-by-step procedures in creating android apps will be provided to the students. • Students will be given a definite period of time to complete the given laboratory activity and will be graded according to the specific rubric intended for the evaluation of the said practical examination (click the link below to see the sample practical exam).

38. Sample Practical Examination Create an Android app that has a textfield and button. When the button is clicked it will display the text typed on a panel. Follow the given layout below

39. Video on How to Create a Simple Layout http://thenewboston.org/watch.php?cat=6&number=6 http://thenewboston.org/watch.php?cat=6&number=7 http://thenewboston.org/watch.php?cat=6&number=8 http://thenewboston.org/watch.php?cat=6&number=9

40. Thank you…