Developing Android Apps: Components & Layout

1. Developing Android Apps: Components & Layout

2. Review • Component definition and layout is done in xml file • res/layout/main.xml • setContentView(R.layout.main); • Each container or widget is an element • Each element has attributes • Define how the widget/container appears and behaves Wendi Jollymore, ACES

3. Why XML Layout? • Easier • Java code is a bit more complicated • Text based and structured • Easier for a GUI builder to auto-gen code • Vice versa: easier for Java code to be converted to XML • Keeps UI code separate • Your app code won’t get messed up by auto-gen code Wendi Jollymore, ACES

4. The XML File • Each activity will have its own XML • Root element must declare Android XML namespace • xmlns:android=http://schemas.android.com/apk/res/android • This should appear automatically Wendi Jollymore, ACES

5. Element IDs • Each view (container, component) is assigned an ID • android:id attribute • Value should be “@+id/componentName” • We’ll talk about @+id later • To reference an object in code: • findViewById(R.id.componentName) Wendi Jollymore, ACES

6. Widgets • Actual UI components are in android.widgets package • Labels: • TextView class/element • android:text – sets the text • android:typeface – sets the type face • normal, sans, serif, monospace • android:textStyle – bold, italic, bold_italic • android:layout_width and android:layout_height • How the component should resize • We’ll use this for all components Wendi Jollymore, ACES

7. Widgets • Buttons • Button class/element • Subclassed from TextView • Therefore, you can use the same attributes we mentioned earlier • Quick note about event handling • Use android:onClick attribute • Give it the name of any method in your code • It will execute that method when clicked! Wendi Jollymore, ACES

8. Widgets • Text Fields • EditText class/element, subclass of TextView • Some extra attributes you can use: • android:captialize - if the field should automatically capitalize the first letter of text entered • none, sentences, words, characters • android:digits - if the field should only accept certain digits • give it a string of digits allowed • android:singleLine - single line input or multi-line input • press Enter moves to the next widget (true) or makes a new line (false)) Wendi Jollymore, ACES

9. Widgets • Check Boxes • CheckBox class/element • Suclassed from TextView via CompoundButton • Some useful Java methods: • isChecked() • setChecked() • toggle() Wendi Jollymore, ACES

10. Widgets • Radio Buttons • RadioButton class/element • Also inherits from CompountButton / TextView • Supports same Java methods • As we know, radio buttons work in groups • Set of radio buttons can be nested inside parent RadioGroup element Wendi Jollymore, ACES

11. Widgets • RadioGroup • Giving it an ID allows you to access entire group in code • android:orientation – vertical or horizontal • Useful Java methods: • check() – checks a specific button by ID • group.check(R.id.optButton); • clearCheck() – clears radio button selection • getCheckedRadioButtonId() – returns ID of currently selected button • Returns -1 if none selected Wendi Jollymore, ACES

12. Other Properties • Padding • Widgets/containers have a preferred size • You can add padding inside the component to increase size • Between contents of component and inner border of component • android:padding will set all four sides • android:paddingLeft, android:paddingRight, android:paddingTop, android:paddingBottom • Measure in px, dip, mm Wendi Jollymore, ACES

13. Other Properties • android:visibility • Can be visible, invisible, gone • Invisible leaves space in layout, gone doesn’t • android:contentDescription • String value • Used by accessibility tools for visually challenged • Similar to alt attribute in <img /> tag in HTML Wendi Jollymore, ACES

14. Layout: LinearLayout • Box model layout • widgets/containers are lined up in a column or a row • Similar to FlowLayout in Java • You have 5 areas of control: • Orientation • Fill Model • Weight • Gravity • Margins Wendi Jollymore, ACES

15. LinearLayout: Orientation • Defines if layout is a row or column • android:orientation • horizontal or vertical Wendi Jollymore, ACES

16. LinearLayout: Fill Model • Defines how the component fills its container • How they should resize, if at all • android:layout_width, android:layout_height • You can use specific sizes • This doesn’t work well – various screen sizes, adjusting size, etc • wrap_content – widget takes its preferred size, will wrap if too big • match_parent – will resize to parent Wendi Jollymore, ACES

17. LinearLayout: Weight • Defines how widgets share available space in a container • Works best when fill model is set to match_parent • android:layout_weight – give it a proportional value • E.g. if you give a component a weight of 1 and another component a weight of 2 • Second component takes up twice as much space as first component • E.g. use percentages: set all layout_widths to 0, then assign percentages that add up to 100 Wendi Jollymore, ACES

18. LinearLayout: Gravity • Defines how components are aligned in the container • Default is top-left • android:layout_gravity • left, right, center_vertical, center_horizontal, and others • See LinearLayout.LayoutParams class Wendi Jollymore, ACES

19. LinearLayout: Margins • Defines how much space goes between components • Outside component borders • Remember padding is inside borders • android:layout_margin sets all 4 sides • android:layout_marginTop, android:layout_marginBottom, android:layout_marginRight, android:layout_marginLeft • Same measurements as padding Wendi Jollymore, ACES

20. Example • Label with text field, and two buttons Wendi Jollymore, ACES

21. Layout: RelativeLayout • Lays out components relative to each other and their containers • Requires you to reference other components • E.g. layout component A to the left of component B • We’ve used @+id/name for I.D.s • You only need the + the first time you reference a component • Even if the first time you reference is in another component’s attributes Wendi Jollymore, ACES

22. RelativeLayout • Attributes that postion relative to the container: • android:layout_alignParentTop • aligns widget's top with top of container • android:layout_alignParentBottom • aligns widget's bottom with bottom of container • android:layout_alignParentLeft • aligns widget's left side with container left side • android:layout_alignParentRight • aligns widget's right side with container left side Wendi Jollymore, ACES

23. RelativeLayout • Continued… • android:layout_centerHorizontal • positions widget horizontally at centre of container • android:layout_centerVertical • positions widget vertically at centre of container • android:layout_centerInParent • positions widget vertically and horizontally centred in the container • each takes true or false • padding is taken into account - based on widget's overall space (preferred size plus padding) Wendi Jollymore, ACES

24. RelativeLayout • Attributes that postion relative to other widgets: • android:layout_above • widget should be placed above the referenced widget • android:layout_below • widget should be placed below the referenced widget • android:layout_toLeftOf • widget should be placed to the left of referenced widget • android:layout_toRightOf • widget should be placed to the right of referenced widget Wendi Jollymore, ACES

25. RelativeLayout • Continued… • android:layout_alignTop • widget’s top should be aligned with top of referenced widget • android:layout_alignBottom • widget's bottom should be aligned with bottom of referenced widget • android:layout_alignLeft • widget's left side should be aligned with left of referenced widget • android:layout_alignRight • widget's right side should be aligned with right of referenced widget Wendi Jollymore, ACES

26. RelativeLayout • Continued… • android:layout_alignBaseline • widget's baseline should be aligned with baseline of referenced widget • useful for aligning fields and their prompts Wendi Jollymore, ACES

27. Example • Do the same example as before, using RelativeLayout containers Wendi Jollymore, ACES