Views Presentation

Views Presentation

Agenda

  • Use layouts to organize the placement of views
  • Most important view controls

Layouts

  • The layout element is responsible for laying out its child elements
    • Determines width and height of each child element, and how to position them in relation to one another. Different layout classes uses different attributes and rules when performing this operation.
  • Layout classes are derived from the common base class ViewGroup
  • Layout rules are specified as attributes on child elements with prefix "layout_"

Layouts in this course

  • RelativeLayout
    • Default layout in project template
    • Child elements are layed out relative to the layout itself, or other child elements
    • Not very good for proportional layouts
  • LinearLayout
    • Easy to use, fewer rules and attributes to learn
    • Very good at handling percentages for laying out children proportionally
    • Used in course for simplicity reasons

LinearLayout attributes

  • android:orientation
    • horizontal = views are displayed next to each other
    • vertical = views are displayed below each other
  • Nesting
    • Create LinearLayout inside of a LinearLayout
    • Switch between horizontal/vertical orientation
    • Not recommended for performance reasons

LinearLayout attributes on children

  • android:layout_width
    • wrap_content = content of view determines size
    • match_parent = extend size to size of parent
  • android:layout_height
    • Works the same as layout_width but for height/vertical size
  • android:layout_gravity
    • Alignment of child inside parent
    • Only when wrap_content is used
  • android:layout_margin
    • Added empty space between parent and child edge

Proportional sizes

  • Purpose
    • Extend views proportionally to have a collection of views fill out a space
  • android:layout_width="0px"
    • Specify zero width or height to start with equal size among children
  • android:layout_weight
    • Specify a number that determines how much child will expand in relation to other children layout_weight:s
    • Expand all equally by using the same number

View controls

  • Specified as xml elements in layout xml file
  • TextView
    • Static text / labels
  • Button
    • Clickable button, optional text/icon
  • EditText
    • Input field for text, numbers etc
  • CheckBox
    • Check mark that can be on or off
  • Spinner
    • Drop down list of options

Accessing views from Java

  • Create a unique identifier for the view in xml, will be generated as a Java constant in R.id.
    <TextView android:id="@+id/myname" />
  • Declare class member with same class as xml element
    TextView _myname;
  • Assign class member in onCreate after setContentView
    _myname = (TextView)findViewById(R.id.myname);

Modifying views from Java

  • Attribute in xml is only the initial value
  • Attributes can be modified from Java
    • Most attributes like "text" have a corresponding setText and getText
    • Some attributes requires more code than is needed in xml
  • Change the text
    _myname.setText("Mike");

TextView

  • android:text
    • The text that is displayed in the view
  • android:gravity
    • Specify how to align the text, if view larger than text

Button

  • android:text
    • The text that is displayed in the button
  • android:onClick
    • Name of class member to call when button is clicked

EditText

  • android:text
    • Optional text to begin with
  • android:inputType
    • Defines what type of content can be typed in the field
    • text, textMultiLine, textPassword, number, phone
    • textAutoCorrect, textNoSuggestions
  • Read/write current value in Java
    String value = _textView.getText().toString();
    _textView.setText(value);
    

CheckBox

  • android:text
    • Text to display to the right of the check box
  • android:checked
    • The default value of the field, true or false
  • Read/write current value in Java
    if (_checkBox.isChecked())
      _checkBox.setChecked(false);
    
  • CheckedTextView
    • Can be used instead of CheckBox if you want the check mark to the right of the text

Spinner

  • android:entries="@array/countries"
    • An array xml resource identifier. The xml resource file will contain all strings in the list.
  • /res/values/array.xml
    <resources>
      <string-array name="countries">
        <item>Sweden</item>
    
  • android:prompt
    • Title of dialog popup when such is shown for choosing one of the options
  • android:spinnerMode
    • Force popup dialog on newer versions using value "dialog"

Spinner from Java

  • Get the position of the selected item
    int selected = _spinner.getSelectedItemPosition();
    
  • Set which item is selected
    int selected = 0;
    _spinner.setSelection(selected);
    

View

  • Rectangular box with specfied color
  • Does not have any content, but will paint a background
  • Can also be useful when padding/extending empty areas in a user interface
  • Or to simluate lines/dividers in the user interface
  • Create custom class derived from View for pixel level control

Many more views

  • RadioButton
    • Two or more options shown next to each other
  • ToggleButton
    • A single button with a colored bar for being "on"
  • Switch
    • A button with two different texts that switches on each click
  • ImageView
    • Show an image
    • Will be described in Resources chapter

Adding views from Java

  • Create a new object of corresponding class
    TextView myname = new TextView(this);
  • Add it to a layout container
    _layout.addView(myname);
  • Setting layout attributes require some extra code
    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(
      LinearLayout.LayoutParams.MATCH_PARENT, 
      LinearLayout.LayoutParams.WRAP_CONTENT);
    myname.setLayoutParams(p);