Unit 4

Designing UI
with View
View
 The View class is the basic user interface building block within Android.

 It is fundamental element used to create User Interface (UI) Components.

 Views represents area of the screen and can display content or respond to user interactions.

 The View class serves as the base class for nearly all the user interface controls and layouts within
the Android SDK.
TextView
 A TextView displays text to user but does not allow editing.

 You create TextView with help of XML or programmatically.

Using Java Programmatically

Import android.widget.TextView
TextView

Using XML
TextView
Attributes of TextView

XML Attribute Description

android:id ID which is uniquely identifies the control
android:text Sets Text to be displayed
android:textSize Defines size of text in sp (recommended dimension type for text)
android:textColor Sets the color to text. A color value in the form of “#rgb”, “#argb”,
“#rrggbb”, “#aarrggbb”
android:textStyle Style of text like bold, italic, bolditalic for text
android:typeface Typeface (normal, sans, serif, monospace)for the text
android:textAllCaps Present text in ALL CAPs, possible value is true or false
android:gravity Specifies how to align the text by the view’s X and Y axis
android:autoLink Controls whether links such as email,web are automatically found and
converted to clickable links
EditText

 A user interface element for entering and modifying text.

 It is the predefined subclass of TextView that includes rich editing capabilities.

 When you define an edit text widget, you must specify the inputType attribute.

 For example, for plain text input set inputType to "text“

for password input set inputType to “textPassword”

 if you want to accept a secret number, like a unique pin or serial number, you can set
inputType to "numericPassword".

 An inputType of "numericPassword" results in an edit text that accepts numbers only,

shows a numeric keyboard when focused, and masks the text that is entered for
privacy.
EditText
Button
 A Button is a user interface that is used to perform some action when clicked or
tapped.

 It is a very common widget in Android and developers often use it.

XML Attributes

XML Attributes Description XML Attributes Description

Used to specify the id of the Used to set the background of

android:id android:background
view. the view.

Used to the display text of the Used to set the padding of the
android:text android:padding
button. view.

Used to the display color of Used to set the visibility of the

android:textColor android:visibility
the text. view.
Used to the display size of the Used to specify the gravity of
android:textSize
text. android:gravity the view like center, top,
bottom, etc
Used to the display style of
android:textStyle
the text like Bold, Italic, etc.

Used to display text in Capital

android:textAllCaps
letters.
Respond to click events

 When the user taps a button, the Button object receives an on-click event.

 To declare the event handler programmatically, create an View.OnClickListener object and assign it
to the button by calling setOnClickListener(View.OnClickListener), as in the following example:

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

button.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {

Log.d("BUTTONS", "User tapped the Submit button");

}

});
ImageButton
 Displays a button with an image (instead of text) that can be pressed or clicked by the user.

 By default, an ImageButton looks like a regular Button, with the standard button background that
changes color during different button states.

 The image on the surface of the button is defined either by the android:src attribute in the
<ImageButton> XML element or by the ImageView.setImageResource(int) method.
Respond to click events
Toggle Button

 Android Toggle Button can be used to display

checked/unchecked (On/Off) state on the button.

 It is beneficial if user have to change the setting between two

states.

 It can be used to On/Off Sound, Wifi, Bluetooth etc.

 Since Android 4.0, there is another type of toggle button called

switch that provides slider control.

 Android ToggleButton and Switch both are the subclasses of

CompoundButton class.
Toggle Button
Respond to click events
Radio Button & Radio Group

 A Radio Button widget in Android is a control that allows a user to select one option from a set of
options.

 Radio Buttons are used when only one item can be selected from a list.

 To create each radio button option, create a RadioButton in your layout, because radio buttons are
mutually exclusive, group them inside a RadioGroup.

 The System ensures that only one radio button within a group can be selected at a time.
Radio Button & Radio Group
Respond to click events
 When user selects the radio button, the corresponding RadioButton
object receives an On-click event.
Check Box
 Checkboxes let the user select one or more options from a set. Typically, you present checkboxes
options in a vertical list.

 To create each checkbox option, create a CheckBox in your layout.

 A set of checkbox options lets the user select multiple items, each checkbox is managed separately, and
you must register a click listener for each one.
Check Box
Check Box
Check Box
Respond to click events
Check Box Respond to click events
Progress Bar
 A user interface element that indicates the progress of an operation.

 Progress bar supports two modes to represent progress:

1. Indeterminate Progress
2. Determinate Progress
Progress Bar
1. Indeterminate Progress

 Use indeterminate mode for the progress bar when you do not know how long an operation will
take.

 Indeterminate mode is the default for progress bar and shows a cyclic animation without a
specific amount of progress indicated.

 The following example shows an indeterminate progress bar:

Progress Bar
2. Determinate Progress

 Use determinate mode for the progress bar when you want to show that a specific quantity of
progress has occurred.

 For example,

 The percent remaining of a file being retrieved.

 The amount records in a batch written to database.
 The percent remaining of an audio file that is playing.
Progress Bar

2. Determinate Progress

 To indicate determinate progress, you set the style of the progress

bar to R.style.Widget_ProgressBar_Horizontal and set the
amount of progress.

 The following example shows a determinate progress bar that is

63% complete:
Progress Bar
2. Determinate Progress

Other progress bar styles provided by the system include:

 Widget.ProgressBar.Horizontal
 Widget.ProgressBar.Small
 Widget.ProgressBar.Large
 Widget.ProgressBar.Inverse
 Widget.ProgressBar.Small.Inverse
 Widget.ProgressBar.Large.Inverse

You can update the percentage of progress displayed by using the

setProgress(int) method, or by calling

incrementProgressBy(int) to increase the current progress

completed by a specified amount.
List View
 Displays a vertically-scrollable collection of views, where each
view is positioned immediately below the previous view in the
list.

 To display a list, you can include a list view in your layout XML file:
List View
List View

 Using an adapter, items are inserted into the list from an array or database efficiently.

 For displaying the items in the list method setAdaptor() is used.

 The setAdaptor() method binds the adapter with the ListView.

 The main purpose of the adapter is to retrieve data from an array or database and dynamically
insert each item into the list for the desired result.
List View
Grid View
 A view that shows items in two-dimensional scrolling grid.
 Items are inserted into this grid layout from a database or from an array.
 The adapter is used for displaying this data, setAdapter() method is used to join the adapter with
GridView.
 The main function of the adapter in GridView is to fetch data from a database or array and
insert each piece of data in an appropriate item that will be displayed in GridView.
Grid View
Grid View
Scroll View

 A view group that allows the view hierarchy placed within it to be scrolled.

 Scroll view 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.
Scroll View
Toast Alerts

 A toast provides simple feedback about an operation in a small

popup.

 It only fills the amount of space required for the message and the
current activity remains visible and interactive.

 Toasts automatically disappear after a timeout.

 For example, clicking Send on an email triggers a "Sending

message..." toast, as shown in the following screen capture:
Toast Alerts
Instantiate a Toast object

Use the makeText() method, which takes the following parameters:

1. The activity Context.

2. The text that should appear to the user.
3. The duration that the toast should remain on the screen.

The makeText() method returns a properly initialized Toast object.

Toast Alerts
Show the toast

• To display the toast, call the show() method, as demonstrated in the following
example:
Toast Alerts
Chain your toast method calls

• You can chain your methods to avoid holding on to the Toast object, as shown in
the following code snippet:

Constants of Toast class

public static final int LENGTH_LONG Displays view for the long duration of time.

public static final int LENGTH_SHORT Displays view for the short duration of time.
Toast Alerts
Methods of Toast class

public static Toast makeText(Context

context, CharSequence text, int Makes the toast containing text and duration.
duration)
public void show() Displays toast.
Toast Alerts
Positioning Toast on the Screen

• By default, Toast message appears at the center on the bottom of the screen.

• If you want to display it at other positions, you can use the method setGravity(int gravity, int x, int y)
which has the following parameters:
Toast Alerts
Positioning Toast on the Screen

int gravity: You can use the Gravity class to use the predefined values like Gravity.RIGHT,
Gravity.TOP or you can also use more than one values by using pipe( | ) symbol.

For example, Gravity.LEFT | Gravity.BOTTOM

int x: You can use this to set the horizontal distance. From where this distance will be measured
depends upon the int gravity parameter you have set.

int y: You can use this to set the vertical distance. Again, from where this distance will be measured
depends upon the int gravity parameter you have set.
Time and Date Picker

• Android provides controls for the user to pick a time or date as

ready-to-use dialogs.

• These pickers provide controls for selecting each part of the time
(hour, minute, AM/PM) or date (month, day, year).

• Using these pickers helps ensure that your users can pick a
time or date that is valid, formatted correctly, and adjusted
to the user's locale.

Figure 1. Hour selection in a mobile calendar

picker.
Time Picker
Time Picker
Time Picker
Time Picker Dialog
Time Picker Dialog
Time Picker Dialog
Date Picker
Date Picker
Date Picker Dialog
Date Picker Dialog
Date Picker Dialog
Thank You