1 / 18

Android Layouts

Android Layouts. Layouts. Define the user interface for an activity Layouts are defined in .xml files within /res/layout folder different layout can be designed for lanscape view placed within /res/layout-land folder Handful of layouts to choose from

mariel
Download Presentation

Android Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Android Layouts

  2. Layouts • Define the user interface for an activity • Layouts are defined in .xml files • within /res/layout folder • different layout can be designed for lanscape view • placed within /res/layout-land folder • Handful of layouts to choose from • All derived from the class:android.view.ViewGroup

  3. View class • Any widget or ViewGroup placed as part of interface on an Activity is a View • 11 direct subclasses • 62 indirect subclasses • LinearLayout • TableLayout • EditText • Button • Others http://developer.android.com/reference/android/view/View.html

  4. View attributes • Apply to any instance of a View • syntax: android:layout_attribute_name=“value” • layout_height and layout_width • values: match_parent or wrap_content • fill_parent deprecated (renamed to match_parent as of 2.2) • layout_margin • extra space on all sides of item • layout_marginX (i.e. X= Top, Bottom, Right, Left) • layout_gravity • gravity • text (for labels, buttons, etc.)

  5. Sizing options • preferred units • dp or dip – device independent pixels • scales size according to screen density • 1 dp is equivalent to 1 pixel on 160 dpi screen • sp – scale-independent pixels • scales fonts according to user’s font size • other options • px • actual pixels • mm and in – millimeters and inches • pt – points (1/72”)

  6. Layouts • Available layouts • AbsoluteLayout • Deprecated as of 1.5 - allowed specific x, y coordinates • Common Layouts • LinearLayout • Default • Allows child items to be placed in a single row or column • TableLayout • Allows child items to be placed in multiple rows and columns • More sophisticated/specialized layouts • RelativeLayout • Allows child items to be placed relative to each other • FrameLayout • Allows child items to be stacked on one another

  7. LinearLayout • Child items placed in single row or column • Important attributes for LinearLayout • orientation • applies to parent • “vertical” = single column • “horizontal” = single row • layout_width and layout_height • decide if the layout should take up: • the entire width (height) of the screen • minimum width (height) needed • specific width (height) desired

  8. Sample .xml file <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width=“match_parent“ android:layout_height=“match_parent“ > <TextView android:layout_width=“match_parent" android:layout_height="wrap_content“ android:layout_margin="2dp“ android:text="View me" /> <Button android:layout_width=“match_parent" android:layout_height="wrap_content" android:layout_margin=“2dp" android:text="Push me" /> </LinearLayout>

  9. TableLayout • Places items in rows and columns • Important attributes • collapseColumns (hides columns) • =“*”, =“1”, =“0,3”, etc. • stretchColumns (displays columns) • layout_span • allows child to span multiple columns

  10. Sample .xml file <?xml version="1.0" encoding="utf-8"?> <TableLayoutxmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=“match_parent“ android:layout_height=“match_parent" android:stretchColumns=“*" > <TableRow> <Button android:text="Cell 1,1“/> <Button android:text="Cell 1,2”/> </TableRow> <TableRow> <Button android:text="Cell 2,1”/> <Button android:text="Cell 2,2”/> </TableRow> </TableLayout>

  11. RelativeLayout • Currently the default layout supplied in Eclipse • Tends to work the best with the visual editor • Where child items are in relation to: • parent • each other • Sometimes allows for one layout to be used instead of layouts within layouts • Many attributes • See documentation on RelativeLayout.LayoutParams class

  12. RelativeLayout • Important attributes • layout_X where X is: • centerInParent • centerHorizontal (or Vertical) • alignParentTop (or Bottom or Left or Right) • alignRight (or Left or Top or Bottom) • (=“@+id/childIdName”) • aligns specified edge of each child • often causes overlap • above (or below or toLeftOf or toRightOf) • (=“@+id/childIdName”) • aligns children relatively to each other accordingly

  13. Sample .xml file <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=“match_parent“ android:layout_height="match_parent“ > <TextView android:id="@+id/tv1“ android:layout_width="wrap_content" android:layout_height="wrap_content“ android:layout_centerInParent="true“ android:text="View me“ /> <Button android:layout_width="wrap_content“ android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@+id/tv1" android:text="Push me" /> </RelativeLayout>

  14. FrameLayout • Places items on top of each other <?xml version="1.0" encoding="utf-8"?> <FrameLayoutxmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width="match_parent“ android:layout_height="match_parent“ > <TextView android:layout_width="wrap_content“ android:layout_height="wrap_content“ android:text="This is big text!“ android:textSize="20pt“ /> <TextView android:layout_width="wrap_content“ android:layout_height="wrap_content“ android:text="I am small...“ android:textSize="8pt" /> </FrameLayout>

  15. Layout Orientations • Portrait • Default view • Landscape • When device is rotated 90° • To set specific layouts for each • \res\layout\main.xml for portrait layout • layout folder is provided • \res\layout-land\main.xml for landscape layout • layout-land folder must be created • file name and variable names within file must match • not restricted to main.xml

  16. Layout Orientations • Orientation can be locked • screenOrientation attribute of Activity • android:screenOrientation="portrait" • Each Activity handled separately • can do any combination of locked and unlocked Activities • can lock all, but must do each individually

  17. Common Views • User-interface views placed within layouts • TextView • EditText • Button • CheckBox • RadioButton • Spinner • Many others

  18. Determining a given View’s .xml attributes • Use Android reference to find class • Example: Button • View XML attributes of the class • Button does not have any listed • View XML attributes of the Ancestor classes • In this case, TextView and View • Use eclipse pop-up help in .xml file

More Related