1. User Interface Screen Elements
Chapter 4

2. 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

3. 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

4. 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);

5. 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

6. 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

7. 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
phone
map
all
none

8. TextView <TextView android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="2"
android:ems="12"
android:autoLink=" " />

9. 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

10. 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

11. 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);
});

12. 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

13. 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" />

14. 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

15. 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);

16. 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

17. Spinner Control <Spinner android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

18. 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 me at </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>

19. 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();

20. 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

21. CheckBox
Often used in lists of items where the user can select multiple items
<CheckBox
android:layout_width="30dp"
android:layout_height="30dp"
android:checked="false" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

22. 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”

23. 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