PROG Mobile Java Application Development PROG Mobile Java Application Development Developing Android Apps: Components & Layout

9/8/2015Wendi Jollymore, ACES2 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

9/8/2015Wendi Jollymore, ACES3 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

9/8/2015Wendi Jollymore, ACES4 The XML File Each activity will have its own XML Root element must declare Android XML namespace xmlns:android= d.com/apk/res/androidhttp://schemas.androi d.com/apk/res/android This should appear automatically

9/8/2015Wendi Jollymore, ACES5 Element IDs Each view (container, component) is assigned an ID android:id attribute Value should be We’ll talk later To reference an object in code: findViewById(R.id.componentName)

9/8/2015Wendi Jollymore, ACES6 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

9/8/2015Wendi Jollymore, ACES7 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!

9/8/2015Wendi Jollymore, ACES8 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))

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

9/8/2015Wendi Jollymore, ACES10 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

9/8/2015Wendi Jollymore, ACES11 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

9/8/2015Wendi Jollymore, ACES12 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

9/8/2015Wendi Jollymore, ACES13 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 tag in HTML

9/8/2015Wendi Jollymore, ACES14 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

9/8/2015Wendi Jollymore, ACES15 LinearLayout: Orientation Defines if layout is a row or column android:orientation horizontal or vertical

9/8/2015Wendi Jollymore, ACES16 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

9/8/2015Wendi Jollymore, ACES17 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

9/8/2015Wendi Jollymore, ACES18 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

9/8/2015Wendi Jollymore, ACES19 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

9/8/2015Wendi Jollymore, ACES20 Example Label with text field, and two buttons

9/8/2015Wendi Jollymore, ACES21 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 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

9/8/2015Wendi Jollymore, ACES22 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

9/8/2015Wendi Jollymore, ACES23 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)

9/8/2015Wendi Jollymore, ACES24 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

9/8/2015Wendi Jollymore, ACES25 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

9/8/2015Wendi Jollymore, ACES26 RelativeLayout Continued… android:layout_alignBaseline widget's baseline should be aligned with baseline of referenced widget useful for aligning fields and their prompts

9/8/2015Wendi Jollymore, ACES27 Example Do the same example as before, using RelativeLayout containers