UI Components

Lecture 6
1
Wobetu Shiferaw ([email protected])
2 TextView

 A user interface element that displays text to the user.

 Displays a read only text, just similar to a label in other
languages
 Can be created either with XML or with java code at run
time
3 TextView

 Example:
 With XML
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/hello" />
</LinearLayout>
4 TextView

Modifying its content with java code:

public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView helloTextView = (TextView)
findViewById(R.id.text_view_id);
helloTextView.setText(R.string.user_greeting);
}
}
5 Attribute

 Some XML attributes of TextView

 android:autoLink
 Controls whether links such as urls and email addresses are
automatically found and converted to clickable links.
 android:autoSizeMaxTextSize
 The maximum text size constraint to be used when auto-sizing text.
 android:autoSizeMinTextSize
 The minimum text size constraint to be used when auto-sizing text.
 android:autoSizePresetSizes
 Resource array of dimensions to be used in conjunction
with autoSizeTextType set to uniform.
6 Attribute

 Some XML attributes of TextView

 android:inputType
 The type of data being placed in a text field, used to help an input
method decide how to let the user enter text.
 android:letterSpacing
 Text letter-spacing.
 android:maxHeight
 Makes the TextView be at most this many pixels tall.
 android:maxLength
 Set an input filter to constrain the text length to the specified number.
7 Attribute

 Some XML attributes of TextView

 android:fontFamily
 Font family (named by string) for the text.
 android:gravity
 Specifies how to align the text by the view's x- and/or y-axis when the
text is smaller than the view.

 android:height
 Makes the TextView be exactly this tall.

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

 Some XML attributes of TextView

 android:inputType
 The type of data being placed in a text field, used to help an input
method decide how to let the user enter text.

 android:textColor
 Text color.

android:textAppearance
 Base text color, typeface, size, and style.

android:typeface
 Typeface (normal, sans, serif, monospace) for the text.
9 EditText

 A user interface element for entering and modifying text.

 When you define an edit text widget, you must specify the
TextView_inputType attribute
 For example, for plain text input set inputType to "text":

<EditText
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"/>
10 EditText

 Choosing the input type configures the keyboard type

that is shown
 acceptable characters, and appearance of the edit text.
 Allows to make suitable keyboard configuration specifically for our
purpose.
 EditText does not support auto-sizing text.
11 EditText: Attributes

Most of its attributes are similar to TextView

12 EditText: Methods

 getAccessibilityClassName()
 Return the class name of this object to be used for accessibility
purposes.
 getFreezesText()
 Return whether this text view is including its entire text contents in frozen
icicles.
 getText()
 Return the text that EditText is displaying
 selectAll()
13 Buttons
 A user interface element the user can tap or click to
perform an action.
 To display a button in an activity, add a button to the
activity's layout XML file:

<Button
android:id="@+id/button_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/self_destruct" />
14 Buttons
 To specify an action when the button is pressed, set a click listener
on the button object in the corresponding activity code:
public class MyActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.content_layout_id);

final Button button = findViewById(R.id.button_id);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Code here executes on main thread after user presses button
}
});
}
}
15 Buttons
 A button consists of text or an icon (or both text and an
icon) that communicates what action occurs when the
user touches it.
16 Buttons

 Depending on whether you want a button with text, an icon, or

both, you can create the button in your layout in three ways:

With text, using the Button class:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
... />
17 Buttons

With an Icon, using ImageButton class

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/button_icon"
... />
:

18 Buttons

With text and icon

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:drawableLeft="@drawable/button_icon"
... />
19 Responding to Click Events
 When a user clicks a button, the Button object receives
an on-click event
 To define the click event handler for a button, add
the android:onClick attribute to the <Button> element in
your XML layout.
 The value for this attribute must be the name of the
method you want to call in response to a click event.
 The Activity hosting the layout must then implement the
corresponding method.
20 Responding to Click Events
<?xml version="1.0" encoding="utf-8"?>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage" />
21 Responding to Click Events

 With the Activity that hosts this layout, the ff method

handles this event

/** Called when the user touches the button */

public void sendMessage(View view) {
// Do something in response to button click
}
22 Responding to Click Events

 The method you declare in the android:onClick attribute must

have a signature exactly as shown above. Specifically, the
method must:
 Be public
 Return void
 Define a View as its only parameter (this will be the View that will
be clicked)
23 Using an OnClickListener

 You can also declare the click event handler

programmatically rather than in an XML layout.

 This might be necessary if you instantiate the Button at

runtime or you need to declare the click behavior in
a Fragment subclass.
24 Using an OnClickListener

Button button = (Button) findViewById(R.id.button_send);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Do something in response to button click
}
});
25 Styling Your Button

 You can control exactly how your controls are styled using a theme
that you apply to your entire application.
 For instance, to ensure that all devices running Android 4.0 and
higher use the Holo theme in your app,
declare android:theme="@android:style/Theme.Holo" in your
manifest's <application> element.
 To customize individual buttons with a different background, specify
the android:background attribute with a drawable or color
resource.
26 Styling Your Button

 Alternatively, you can apply a style for the button, which works in a
manner similar to HTML styles to define multiple style properties such
as the background, font, size, and others.
27 Borderless button

 One design that can be useful is a "borderless" button.

 Borderless buttons resemble basic buttons except that
they have no borders or background but still change
appearance during different states, such as when
clicked.

style="?android:attr/borderlessButtonStyle"
28 ToggleButton

 Displays checked/unchecked states as a button with a "light"

indicator and by default accompanied with the text "ON" or "OFF".

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="OFF Me"
android:textOff="ON Me"/>
29 Attributes
30 Public Methods
 getAccessibilityClassName()

 CharSequence getAccessibilityClassName ()
 Return the class name of this object to be used for accessibility
purposes.
 getTextOff()
 Returns the text for when the button is not in the checked state.
 Returns text
 getTextOff()
 Returns the text for when the button is in the checked state.
 Returns text
31 Public Methods

 setBackground(drawable)
 Sets background image for the ToggleButton object
 setChecked()
 void setChecked (boolean checked)
 Changes the checked state of this button.
32 Public Methods
 setTextOff()
 Sets the text for when the button is not in the checked state.

 setTextOn()
 Sets the text for when the button is in the checked state.
33 CheckBox
 A specific type of two-states button that can be either checked or
unchecked.
 Can be utilized as:

public class MyActivity extends Activity {

protected void onCreate(Bundle icicle) {
super.onCreate(icicle);

setContentView(R.layout.content_layout_id);

final CheckBox checkBox = (CheckBox) findViewById(R.id.checkbox_id);

if (checkBox.isChecked()) {
checkBox.setChecked(false);
}
}
}
34 CheckBox

 Checkboxes allow the user to select one or more options from a set.
 Typically, you should present each checkbox option in a vertical list.
35 CheckBox

 To create each checkbox option, create a CheckBox in

your layout.
 Because a set of checkbox options allows the user to
select multiple items, each checkbox is managed
separately and you must register a click listener for each
one.
 Responding to Click Events
 onClick=“methodName” />
36 CheckBox
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<CheckBox android:id="@+id/checkbox_meat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/meat"
android:onClick="onCheckboxClicked"/>
<CheckBox android:id="@+id/checkbox_cheese"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cheese"
android:onClick="onCheckboxClicked"/>
</LinearLayout>
37

 Within the Activity that hosts this layout, the following method handles the click
event for both checkboxes:
 public void onCheckboxClicked(View view) {
// Is the view now checked?
boolean checked = ((CheckBox) view).isChecked();
38
// Check which checkbox was clicked
switch(view.getId()) {
case R.id.checkbox_meat:
if (checked)
// Put some meat on the sandwich
else
// Remove the meat
break;
case R.id.checkbox_cheese:
if (checked)
// Cheese me
else
// I'm lactose intolerant
break;
// TODO: Veggie sandwich
}
}
39 Radio Buttons

 Radio buttons allow the user to select one option from a set.
 You should use radio buttons for optional sets that are mutually
exclusive if you think that the user needs to see all available options
side-by-side.
40 Radio Buttons

 To create each radio button option, create a RadioButton in your layout.

 However, because radio buttons are mutually exclusive, you must group
them together inside a RadioGroup
 By grouping them together, the system ensures that only one radio button
can be selected at a time
 Respoding to click events

 android:onClick="onRadioButtonClicked"/>
41 Radio Buttons: Example
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_pirates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/pirates"
android:onClick="onRadioButtonClicked"/>
<RadioButton android:id="@+id/radio_ninjas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ninjas"
android:onClick="onRadioButtonClicked"/>
</RadioGroup>
42 Radio Buttons: Example

 Within the Activity that hosts this layout, the following method handles
the click event for both radio buttons:
 public void onRadioButtonClicked(View view) {
43 // Is the button now checked?
boolean checked = ((RadioButton) view).isChecked();

// Check which radio button was clicked

switch(view.getId()) {
case R.id.radio_pirates:
if (checked)
// Pirates are the best
break;
case R.id.radio_ninjas:
if (checked)
// Ninjas rule
break;
}
}
44 Spinners
 Spinners provide a quick way to select one value from a
set.
 In the default state, a spinner shows its currently selected
value.
 Touching the spinner displays a dropdown menu with all
other available values, from which the user can select a
new one.
45 Spinners
46

 You can add a spinner to your layout with the Spinner object. You should
usually do so in your XML layout with a <Spinner> element. For example:

<Spinner
android:id="@+id/planets_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
47

 To populate the spinner with a list of choices, you then need

to specify a SpinnerAdapter in your Activity or Fragment source
code.
48 Populate the Spinner with User Choices

 The choices you provide for the spinner can come from
any source,
 but must be provided through an SpinnerAdapter, such as
an ArrayAdapter if the choices are available in an array
 or a CursorAdapter if the choices are available from a
database query.
49 Populate the Spinner with User Choices

<?xml version="1.0" encoding="utf-8"?>

<resources>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
<item>Earth</item>
<item>Mars</item>
<item>Jupiter</item>
<item>Saturn</item>
<item>Uranus</item>
<item>Neptune</item>
</string-array>
</resources>
50 Populate the Spinner with User Choices

 With an array such as this one, you can use the following code in
your Activity or Fragment to supply the spinner with the array using an instance
of ArrayAdapter:

Spinner spinner = (Spinner) findViewById(R.id.spinner);

// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.planets_array, android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);
51 Populate the Spinner with User Choices

 The createFromResource() method allows you to create

an ArrayAdapter from the string array.
 The third argument for this method is a layout resource that defines
how the selected choice appears in the spinner control.
 The simple_spinner_item layout is provided by the platform and is the
default layout you should use unless you'd like to define your own layout
for the spinner's appearance.
52 Populate the Spinner with User Choices

 You should then call setDropDownViewResource(int) to specify the

layout the adapter should use to display the list of spinner choices
(simple_spinner_dropdown_item is another standard layout defined by
the platform).
 Call setAdapter() to apply the adapter to your Spinner.
53 Responding to User Selections

 When the user selects an item from the drop-down,

the Spinner object receives an on-item-selected event.
 To define the selection event handler for a spinner,
implement the AdapterView.OnItemSelectedListener interface
and the corresponding onItemSelected() callback method.
 For example, here's an implementation of the interface
in an Activity:
 54 Responding to User Selections

public class SpinnerActivity extends Activity implements OnItemSelectedListener {

...

public void onItemSelected(AdapterView<?> parent, View view,

int pos, long id) {
// An item was selected. You can retrieve the selected item using
// parent.getItemAtPosition(pos)
}

public void onNothingSelected(AdapterView<?> parent) {

// Another interface callback
}
}
55 Responding to User Selections

 Then you need to specify the interface implementation by

calling setOnItemSelectedListener():

Spinner spinner = (Spinner) findViewById(R.id.spinner);

spinner.setOnItemSelectedListener(this);
56 Responding to User Selections

If you implement

the AdapterView.OnItemSelectedListener interface
with your Activity or Fragment (such as in the
example above), you can pass this as the interface
instance.
57 ListView

 is a view group that displays a list of scrollable

ListView

items.
 The list items are automatically inserted to the list using
an Adapter
 From array or
 From database query
58 ScrollView

 A view group that allows the view hierarchy placed within

it to be scrolled.
 It may have only one direct child placed within it.
 To add multiple views within the scroll view, make the
direct child you add a view group, for
example LinearLayout, and place additional views within
that LinearLayout.
 Scroll view supports vertical scrolling only. For horizontal
scrolling, use HorizontalScrollView instead.
 59

Explore https://developer.android.com/training for more information

60