Lecture 5 Layout

1. EE575, GCT523 Lecture 5 Layout Sept. 22,2011

2. View • The basic building block for user interface components • Drawing and event handling • Base class for widgets • Widgets: create interactive UI components (buttons, text fields, etc.) • java.lang.Object • android.view.View • android.widget.TextView • android.widget.Button, android.widget.EditText • android.widget.ImageView

3. ViewGroup • The base class for layouts • Layouts: invisible containers that hold other Views (or other ViewGroups) and define their layout properties • java.lang.Object • android.view.View • android.view.ViewGroup • android.widget.LinearLayout • android.widget.RelativeLayout • android.widget.FrameLayout

4. android:id The XML attributes of View • an integer id • assigned in the layout XML files • used to find specific views within the view tree • A common pattern is to: • Define a Button in the layout file • <Button android:id = “@+id/my_button”/> • From an Activity, find the Button • Button myButton = (Button) findViewById(R.id.my_button);

5. layout_width, layout_height [The XML attributes of ViewGroup.LayoutParams] • The size of a view Start Start Start Start android:layout_width android:layout_height WRAP_CONTENT WRAP_CONTENT MATCH_PARENT WRAP_CONTENT WRAP_CONTENT MATCH_PARENT MATCH_PARENT MATCH_PARENT

6. android:background The XML attributes of View • A drawable to use as the background • Full drawable resource • @[+][package:]type:name • A theme attribute • ?[package:][type:]name • <item name=“panelForegroundColor”>#FF000000</item> • <item name=“panelTextColor”>?panelForegroundColor</item> • A solid color such as “#ff000000” (black) • #rgb, #argb, #rrggbb, #aarrggbb • #ff0000 – red, #0000ff - blue • a - alpha

7. android:padding The XML attributes of View • Space between the edges of the view and the view’s content • paddingBottom, paddingLeft, paddingRight, paddingTop Start margin

8. visibility, clickable, longClickable, focusable The XML attributes of View • android:visibility • visible (visible on screen), invisible (not displayed, but space is left for it), gone(completely hidden) • android:clickable • true or false, whether this view reacts to click events • android:longClickable • true/false, whether thiw view reacts to long click events • android:focusable • true/false, whether a view can take focus

9. TextView • Displays text to the user • The XML Attributes of TextView • android:text • Text to display

10. textColor, textSize The XML attributes of TextView • android:textColor • #rrggbb, #aarrggbb • android:textSize • sp: scaled pixels based on preferred font size, recommended dimension type • px: pixels • dp: density-independent pixels • 1dp: 160dpi – 1px, 320dpi – 2px • in: inches • mm: millimeters

11. textStyle, typeFace The XML attributes of TextView • android:textStyle • Default text typeface style • normal, bold, italic, bold|italic, … • android:typeFace • Default text typeface • normal, sans, serif, monospace

12. TextView Test • <TextViewandroid:text=“Hello”android:textColor=“#ff0000”android:textSize=“20pt”android:textStyle=“italic”/> • <TextViewandroid:text=“안녕하세요”android:textSize=“20sp”android:background=“#0000ff”/> • <TextViewandroid:text=“Good Morning”android:textColor=“#8000ff00”android:textSize=“5mm”android:typeface=“serif”/>

13. ImageView • Displays an arbitrary image, such as an icon • The XML Attributes of ImageView • src • Sets a drawable as the content of this ImageView • A reference to another resource - @[+][package:]type:name • A theme attribute in the form - ?[package:][type:]name • A Color value - #rgb, #argb, #rrggbb, #aarrggbb

14. res/drawable • Three folders according to the resolution • from SDK 1.6 • Resolution – hdpi(high), ldpi(low), mdpi(middle) • Image format – jpg, gif, png(recommended) • File name – all lower case letters

15. tint, maxHeight, maxWidth The XML attributes of ImageView • android:tint • Set a tinting color for the image • Usually transparent colors • android:maxHeight • A maximum height for this view • android:maxWidth • A maximum width for this view • android:adjustViewBounds • true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable

16. ImageView Test • <ImageViewandroid:src=“@drawable/pride”/> • <ImageViewandroid:src=“@drawable/pride”android:maxHeight=“70px”android:maxWidth=“120px”android:adjustViewBounds=“true”/> • <ImageViewandroid:src=“@drawable/dog”android:tint=“#4000ff00”/>

17. EditText, Button

18. LinearLayout • Arranges its children in a single column or a single row • The XML Attributes of LinearLayout • android:orientation • vertical, horizontal Btn1 Btn1 Btn2 Btn3 Btn2 Btn3

19. android:gravity The XML attributes of LinearLayout • Specifies how to place the contents • one or more (separated by |) of the following:

20. android:gravity (cont) The XML attributes of LinearLayout • default=“left|top” top fill_vertical fill_horizontal center_vertical center center_vertical|right left center_horizontal right bottom

21. android:baselineAligned The XML attributes of LinearLayout • align its children’s baselines • true or false. The default value is true. baselineAligned=true baselineAligned=false

22. layout_weight The XML attributes of LinearLayout.LayoutParams • android:layout_weight • stretched in proportion to values among all views 1:3:1 1:2:3

23. layout_margin, padding • android:layout_margin • specifies extra space outside the view’s bounds • android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop layout_margin = “10px” layout_margin = “10px” padding = “10px”

24. RelativeLayout • the positions of the children • relative to each other or to the parent • The XML attributes of RelativeLayout.LayoutParams • layout_above, layout_below, layout_toLeftOf, layout_toRightOf, alignLeft, alignTop, alignRight, alignBottom, alignParentLeft, alignParentTop, alignParentRight, alignParentBottom, … A A layout_alignTop=“@id/a” layout_below=“@id/a”

25. AbsoluteLayout • specify exact locations of its children

26. FrameLayout • all children are pegged to the top left of the screen • The most recently added child on top

27. TableLayout • arranges its children into rows and columns

28. Nested Layout • <LinearLayout … android:orientation=“vertical” ><TextView… /> <TableLayout … > <TableRow> … </TableRow> <TableRow> … </TableRow> </TableLayout> <LinearLayout …android:orientation=“horizontal”> <TextView …/> <TextView …/> <TextView …/> </LinearLayout></LinearLayout>

29. Change Attributes in Runtime • android:orientation • public void setOrientation (int orientation) • android:gravity • public void setGravity (int gravity) • http://developer.android.com/reference

30. Layout parameters • layout_something • layout_weight (only for LinearLayout, not for widget) • text (for TextView widget), src (for ImageView widget)

31. Layout Parameters

32. References • http://developer.android.com/reference/packages.html • http://developer.android.com/guide/topics/ui/declaring-layout.html • http://developer.android.com/guide/topics/ui/index.html • 아이러브 안드로이드 프로그래밍, 서윤정, 황연주 공저, INFINITY BOOKS • 안드로이드 프로그래밍 정복, 김상형 저, 한빛미디어