User Interface Screen Elements Chapter 4

Android Views android.view.View Java package with multiple interfaces and classes to draw on the screen View class is the basic user interface building block within Android Base class for nearly all user interface controls and layouts within Android SDK

Basic Views TextView – used to display text to the user EditText – allows user to edit the text displayed Button – represents a push-button widget ImageButton – push-button widget that displays an image CheckBox – button with two states: checked or unchecked ToggleButton – displays checked/unchecked using a light indicator RadioButton – two states: checked or unchecked RadioGroup – used to group together one or more RadioButton views, thereby allowing only on RadioButton to be checked within the group

Android Controls android.widget Controls typically refer to a class with this package Classes to draw most common objects including ImageView, EditText, and Button classes Controls used to build layout resource file To access controls programmatically, must use unique identifier specified using android:id attribute Access control with the findViewById( ) method TextView tv = (TextView)findViewById(R.id.TextView01);

TextView Used to draw fixed text strings or labels Within the android.widget package May use standard attributes such as width, height, padding, and visibility Android:text property can display either a raw text string or reference a string resource Display a TextView on the screen happens when setContentView( ) method is called with the layout resource identifier Change the text displayed by calling setText( ) method Retrieve text using getText( ) method

TextView Can set TextView to be a single line high and a fixed width If you put a long string of text that doesn’t fit, the text truncates abruptly Control width of TextView using ems measurements rather than pixels em term from typography that defined the point size of a particular font Provided better control over how much text is viewed can use maxEms or minEms attributes to set width

TextView Height of a TextView can be set in terms of lines of text lines attribute sets the number of lines that the TextView can display maxLines and minLines control height ellipsize attribute can be used to replace the last couple characters with an ellipsis (…) so the user knows that not all text is displayed autoLink attribute may be used if your text contains references to: web email phone map all none

TextView <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/longText" android:lines="2" android:ems="12" android:autoLink="email" />

EditText Used to collect text input from users Derived from TextView class hint attribute puts some text in the edit box that goes away when the user starts entering text lines attribute defines how many lines tall the input box is If this is not set, the entry field grows as the user enters text Setting a size allows the user to scroll with a fixed sized to edit the text

EditText User can perform a long press to bring up a context menu Provides user with basic copy, cut, past operations Change the input method Add a word to the user’s dictionary of frequently used words You don’t have to provide coding for this behavior Read text from field using getText( ) method Set text in the field using setText( ) method

EditText Validate input from EditText using the InputFilter object Enforce rules like: Only uppercase text Limit the length of the text entered Example: two-letter state abbreviation: final EditText text_filtered = (EditText) findViewById(R.id.input_filtered); text_filtered.setFilters(new InputFilter[ ] { new InputFilter.AllCaps( ); new InputFilter.LengthFilter(2); });

Autocompletion There are two forms of autocomplete User begins typing a string that matches a word in a developer-provided list. User can choose to complete the word with just a tap. AutoCompleteTextView control User enters a list of items each of which has autocomplete functionality Items must be separated in some way by providing a Tokenizer to the MultiAutoCompleteTextView object A common Tokenizer implementation is provided for comma-separated lists – CommaTokenizer object

Autocompletion <AutoCompleteTextView android:id="@+id/autoComplete" android:layout_width="match_parent" android:layout_height="wrap_content" android:completionHint="Pick a color or type your own" android:completionThreshold="1" />

Autocompletion Developer determines when the completion drop-down list shows by filling in a value for the completionThreshold attribute Default value is two characters of typing before displays Develop can set some text in the completionHint attribute Displays at the bottom of the drop-down list to help users Drop-down list is sized to the TextView

Autocompletion import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; final String[] COLORS = {"red", "green", "orange", "blue", "purple", "black", "yellow“, "cyan", "magenta"}; ArrayAdapter<String> adapter = new ArrayAdapter<String> (this, android.R.layout.simple_dropdown_item_1line, COLORS); AutoCompleteTextView text = (AutoCompleteTextView)findViewById(R.id.autoComplete); text.setAdapter(adapter);

Spinner Control Limit the choices available for user to type Define XML layout definition When user selects control, a pop-up shows the prompt text followed by a list of possible choices Only an item from the list may be selected, then pop-up goes away entries attribute points to the value of a string array resource prompt attribute is displayed when Spinner control is opened and all selections are displayed

Spinner Control <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:entries="@array/colors" android:prompt="@string/spinner_prompt" />

Spinner Control <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Lab 4</string> <string name="action_settings">Settings</string> <string name="longText">You can eMail me at jxs121@psu.edu </string> <string name="spinner_prompt">Pick a color:</string> <string-array name="colors"> <item>red</item> <item>blue</item> <item>green</item> <item>yellow</item> <item>magenta</item> <item>cyan</item> <item>purple</item> </string-array> </resources>

Spinner Control Spinner control is not a TextView, but a list of TextView objects Can’t directly request the selected text from it Have to retrieve the specific selection option and extract the text directly from it final Spinner spin = (Spinner)findViewById(R.id.spinner); TextView text_selected = (TextView)spin.getSelectedView(); String selected_text = text_selected.getText().toString();

Basic Buttons android.widget.Button Provides basic button implementation Use the Button element in the XML layout resources Need to provide code to handle the click event Can create a button-like control with primary label as an image as an ImageButton Click actions are handled in the same way

CheckBox Often used in lists of items where the user can select multiple items <CheckBox android:id="@+id/checkBox" android:layout_width="30dp" android:layout_height="30dp" android:checked="false" /> <TextView android:id="@+id/txtCheckBox" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/checkBoxText" />

ToggleButton Similar to a check box in behavior Used to show the “on” or “off” state of something Has two text fields First attribute is textOn which is text that display on the button when its checked state is on Second attribut is textOff which is text that displays on the button when its checked state is off Default text if “ON” and “OFF”

RadioGroup RadioButtons are usually used to present multiple options to the user When a RadioButton in a RadioGroup is selected, all other RadioButtons are automatically unselected RadioButtons may be displayed with orientation Vertical Horizontal