Developing Android Apps: Components & Layout
1 / 27

Developing Android Apps: Components & Layout - PowerPoint PPT Presentation

  • Uploaded on

Developing Android Apps: Components & Layout. 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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Developing Android Apps: Components & Layout' - ariane

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


  • 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

Why xml layout
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

The xml file
The XML File

  • Each activity will have its own XML

  • Root element must declare Android XML namespace

    • xmlns:android=

  • This should appear automatically

Wendi Jollymore, ACES

Element ids
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(

Wendi Jollymore, ACES


  • 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


  • 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


  • 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


  • Check Boxes

    • CheckBox class/element

    • Suclassed from TextView via CompoundButton

    • Some useful Java methods:

      • isChecked()

      • setChecked()

      • toggle()

Wendi Jollymore, ACES


  • 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


  • 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(;

      • clearCheck() – clears radio button selection

      • getCheckedRadioButtonId() – returns ID of currently selected button

        • Returns -1 if none selected

Wendi Jollymore, ACES

Other properties
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

Other properties1
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

Layout linearlayout
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

Linearlayout orientation
LinearLayout: Orientation

  • Defines if layout is a row or column

  • android:orientation

    • horizontal or vertical

Wendi Jollymore, ACES

Linearlayout fill model
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

Linearlayout weight
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

Linearlayout gravity
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

Linearlayout margins
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


  • Label with text field, and two buttons

Wendi Jollymore, ACES

Layout relativelayout
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


  • 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


  • 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


  • 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


  • 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


  • 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


  • Do the same example as before, using RelativeLayout containers

Wendi Jollymore, ACES