Android Apps Programming

User Interface Controls

Buttons and Similar Clickable Widgets

Buttons
A push button displaying text than can be pressed, or click by the user to perform an
action.

Image Button
A push button displaying an image

RadioButton
It has two states: either checked or unchecked

RadioGroup

Key XML attributes:

android:OnCheckedChangeListener
Assign to RadioGroup if we want to keep track of both current and previous
selections. We can also call getCheckedRadioButtonId, if we dont need to
respond immediately, but want to find selection later.

android:checkedButton
This is the id of child radio button that should be checked by default within this
radio group.

Checkbox
An on / off (checked / unchecked) switch that can be toggled by the user. Use
checkboxes when presenting users with a group of selectable options that are not
mutually exclusive.

ToggleButton
A button with two states (checked and unchecked). It hasvisual indicator to show
whether it is checked. In Java, use isChecked() to determine state. Use setChecked
to programmatically change the state. It has different text for each state.

Key XML attributes

android:disabledAlpha
This is the alpha to apply to the indicator when disabled.

android:textOff
This is the text for the button when it is not checked.

android:textOn
This is the text for the button when it is checked.

Text Controls

TextView
This control is used to display text to the user. Use it for small text like labels, or
really big text like the Image descriptions.

Lecture 5 User Interface Controls Page 1

Android Apps Programming

Key XML attributes:

android:capitalize
Specifies that this TextView has a textual input method and should automatically
capitalize what the user types.

Don't automatically capitalize anything - 0

Capitalize the first word of each sentence - 1
Capitalize the first letter of every word 2
Capitalize every character 3

android:cursorVisible
Makes the cursor visible or invisible.

android:editable
If set to true, specifies that this TextView has an input method.

android:fontFamily
Font family (named by string) for the text.

android:hint
Hint text to display when the text is empty.

android:inputType
The type of data being placed in a text field: Phone, Date, Time, Number,
Password

android:maxHeight
Makes the TextView be at most this many pixels tall.

android:maxWidth
Makes the TextView be at most this many pixels wide.

android:minHeight
Makes the TextView be at least this many pixels tall.

android:minWidth
Makes the TextView be at least this many pixels wide.
android:text
Text to display.

android:textAllCaps
Present the text in ALL CAPS. ( "true" or "false")

android:password
Whether the characters of the field are displayed as password dots instead of
themselves.

android:phoneNumber
Specifies that this TextView has a phone number input method. ( "true" or "false")

android:textColor
Text color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

android:textColorHint
Lecture 5 User Interface Controls Page 2
Android Apps Programming

Color of the hint text. in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

android:textIsSelectable
Indicates that the content of a non-editable text can be selected. (Boolean)

android:textSize
Size of the text. Recommended dimension type for text is "sp" for scaled-pixels

android:textStyle
We can use or more of the following values separated by '|'.
normal - 0
bold - 1
italic - 2

android:typeface
We can use or more of the following values separated by '|'.
normal - 0
sans - 1
serif - 2
monospace 3

EditText
It is a predefined subclass of TextView that includes rich editing capabilities.

Key XML attributes :

android:drawableBottom
This is the drawable to be drawn below the text

android:drawableRight
This is the drawable to be drawn to the right of the text.

android:editable
Specifies that this TextView has an input method.

android:background
This is a drawable to use as the background.

android:visibility
This controls the initial visibility of the view.

android:contentDescription
This defines text that briefly describes content of the view.

android:autoText
specifies that it has a textual input method and automatically corrects some
common spelling errors

AutoCompleteTextView
The AutoCompleteTextView is a view that is similar to EditText, except that it shows
a list of completion suggestions automatically while the user is typing. The list of
suggestions is displayed in drop down menu. The user can choose an item from
there to replace the content of edit box with.

Key XML attributes:

Lecture 5 User Interface Controls Page 3
Android Apps Programming

android:completionHint
Defines the hint displayed in the drop down menu.

android:completionHintView
Defines the hint view displayed in the drop down menu.

android:dropDownAnchor
This is the View to anchor the auto-complete dropdown to.

android:dropDownHeight
This specifies the basic height of the dropdown.

android:dropDownHorizontalOffset
The amount of pixels by which the drop down should be offset horizontally.

android:completionThreshold
Defines the number of characters that the user must type before completion
suggestions are displayed in a drop down menu.
android:dropDownSelector
This is the selector in a drop down list.

android:dropDownVerticalOffset
The amount of pixels by which the drop down should be offset vertically.

android:dropDownWidth
Specifies the basic width of the dropdown.

android:popupBackground
Sets the background.

Other Controls

ProgressBar
The ProgressBar view provides visual feedback about some ongoing tasks. It is a
utility that shows a modal progress pop-up with customized information for your app.

Example:
ProgressDialog dialog = ProgressDialog.show(this, Loading,
Loading the image of the Day);
dialog.dismiss();

TimePicker
The TimePicker view enables users to select a time of the day, in either 24-hour
mode or AM/PM mode.

DatePicker
The DatePicker view enables users to select a date of the day.
Spinner
The Spinner control is basically the Android platforms version of a dropdown list. It
looks much like a dropdown when closed but when the control is activated, it
displays a chooser window instead of drawing the dropdown on the main screen.

Lecture 5 User Interface Controls Page 4

Android Apps Programming

Listening for Spinner Selection Events

spinner.setOnItemSelectedListener(
newAdapterView.OnItemSelectedListener() {
public void onItemSelected(
AdapterView<?> parent, View itemSelected,
intselectedItemPosition,
longselectedId) {

}
// ... Other required overrides
});

Main Listener types

AdapterView.OnItemSelectedListener
AdapterView.OnItemClickedListener

onItemSelected
Invoked when an entry is selected. Invoked once when Spinner is first displayed,
then again for each time the user selects something.

Arguments:
AdapterViewthe Spinner itself
View the row of the Spinner that was selected
intthe index of the selection.
Pass this to the Spinners getItemAtPosition method to get the text of the
selection.
long: The row id of the selected item

onNothingSelected
Invoked when there is now nothing displayed. This cannot happen due to normal
user interaction, but only when we programmatically remove an entry.

Key XML attributes:

android:prompt
The text shown at the top of Spinner when user clicks to open it.
android:entries
An XML entry defining an array of choices. Can be in strings.xml or a separate
file

Example:
<string-array name=some_name>
<item> choice 1 </item>
<item> choice 2 </item>

</string-array>

Configurng Spinner Controls

<Spinner

android:entries="string array">
</Spinner>

Approach 1: Choices Specified in XML

Lecture 5 User Interface Controls Page 5

Android Apps Programming

xml: <Spinner
android:id="@+id/spinner1"
android:prompt="@string/spinner1_prompt"
android:entries="@array/spinner1_entries"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

java: public class MainActivity extends Activity {

private String mItemSelectedMessageTemplate;
Spinner spin;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spin=(Spinner)findViewById(R.id.spinner1);
spin.setOnItemSelectedListener(new listener());
...
}
@Override
publicbooleanonCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public class listener implements OnItemSelectedListener{
booleanisFirst=true;
@Override
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
//TODO Auto-generated method stub
if (isFirst){
isFirst=false;
}
else{
String s =parent.getItemAtPosition(position).toString();
Toast.makeText(getApplicationContext(), s,
Toast.LENGTH_SHORT).show();
}
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub
}
}
}
}

Approach 2: Choices Specified in JAVA

public class MainActivity extends Activity {

Spinner spin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spin=(Spinner)findViewById(R.id.spinner1);

Lecture 5 User Interface Controls Page 6

Android Apps Programming

spin.setOnItemSelectedListener(new listener());
String[ ] list={"ONE","TWO","THREE","FOUR"};
List<String> list2=Arrays.asList(list);
Collections.shuffle(list2);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
this,android.R.layout.simple_spinner_item, list);
adapter.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
spin.setAdapter(adapter);
spin.setOnItemSelectedListener(new listener());
}

@Override
publicbooleanonCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

public class listener implements OnItemSelectedListener{

booleanisFirst=true;
@Override
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
// TODO Auto-generated method stub if (isFirst){
isFirst=false;
}else{
switch(position){

}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub
}
}
}

Lecture 5 User Interface Controls Page 7