Ch4.

Designing user interface with view

Chapter 4 – Designing user interface with view

Fig: Inheritance hierarchy of designing UI with View

Text View:
A standard read only text label that supports string formatting, multiline display, and
automatic word wrapping. TextView displays text to the user and optionally allows them to edit it
programmatically.
Attributes of TextView
1. Id: id is an attribute used to uniquely identify a text view
2. gravity: The gravity attribute is an optional attribute which is used to control the alignment
of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc
3. text: text attribute is used to set the text in a text view. We can set the text in xml as well
as in the java class.
4. textColor: textColor attribute is used to set the text color of a text view. Color value is in
the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.
5. textSize: textSize attribute is used to set the size of text of a text view. We can set the text
size in sp(scale independent pixel) or dp(density pixel).
6. textStyle: textStyle attribute is used to set the text style of a text view. The possible text
styles are bold, italic and normal. If we need to use two or more styles for a text view then
“|” operator is used for that.
7. background: background attribute is used to set the background of a text view.
8. padding: padding attribute is used to set the padding from left, right, top or bottom.
 Ch4. Designing user interface with view
9. capitalize- If set, specifies that this TextView has a textual input method and should
automatically capitalize what the user types.
10. cursorVisible-Makes the cursor visible (the default) or invisible. Default is false.
11. editable- If set to true, specifies that this TextView has an input method.
12. hint - Hint text to display when the text is empty.
13. inputType- The type of data being placed in a text field. Phone, Date, Time, Number,
Password etc.
14. password- Whether the characters of the field are displayed as password dots instead of
themselves. Possible value either "true" or "false".
15. phoneNumber- If set, specifies that this TextView has a phone number input method.
Possible value either "true" or "false".
16. textAllCaps- Present the text in ALL CAPS. Possible value either "true" or "false".
Properties of Text View
1. Alpha: it is value between 0(transparent) to 1 (opaque)
2. Auto link: controls links such as url and email address and converts them to clickable links
3. Background: reference or color to use as background
4. Buffer type: minimum type of getText() will return (enum)
5. Clickable: defines if text view reacts to click events
6. Cursor visible: makes the cursor visible or invisible
7. Digits: specifies that text view has numeric input
8. On click: name of method in this view’s context to invoke when view is clicked
Edit Text
EditText is a standard entry widget in android apps. EditText is a subclass
of TextView with text editing operations. We often use EditText in our applications in order to
provide an input or text field, especially in forms.
Attributes of Edit Text
1. id: id is an attribute used to uniquely identify a text EditText.
2. gravity: The gravity attribute is an optional attribute which is used to control the alignment
of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.
3. text: text attribute is used to set the text in a EditText. We can set the text in xml as well
as in the java class.
4. hint: hint is an attribute used to set the hint i.e. what you want user to enter in this edit text.
Whenever user start to type in edit text the hint will automatically disappear.
5. textColor: textColor attribute is used to set the text color of a text edit text. Color value is
in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”
6. textColorHint: textColorHint is an attribute used to set the color of displayed hint.
7. textSize: textSize attribute is used to set the size of text of a edit text. We can set the text
size in sp(scale independent pixel) or dp(density pixel).
8. textStyle: textStyle attribute is used to set the text style of a edit text. The possible text
styles are bold, italic and normal. If we need to use two or more styles for a edit text then
“|” operator is used for that.
 Ch4. Designing user interface with view
9. textStyle: textStyle attribute is used to set the text style of a edit text. The possible text
styles are bold, italic and normal. If we need to use two or more styles for a edit text then
“|” operator is used for that.
10. padding: padding attribute is used to set the padding from left, right, top or bottom. In
above example code of background we also set the 10dp padding from all the side’s of edit
text.
11. autoText:If set, specifies that this TextView has a textual input method and automatically
corrects some common spelling errors.
Properties of Edit Text
1. Auto link: controls links such as url and email address and converts them to clickable links
2. Background: reference or color to use as background
3. Clickable: defines if text view reacts to click events
4. Cursor visible: makes the cursor visible or invisible
5. Digits: specifies that text view has numeric input
6. On click: name of method in this view’s context to invoke when view is clicked
AutoCompleteTextView
AutoCompleteTextView completes the word based on the reserved words, so no need to
write all the characters of the word. Android AutoCompleteTextView is a editable text field, it
displays a list of suggestions in a drop down menu from which user can select only one suggestion
or value.
Attributes of AutoCompleteTextView
1. Id: id is an attribute used to uniquely identify a auto complete text view
2. gravity: The gravity attribute is an optional attribute which is used to control the
alignment of the text like left, right, center, top, bottom, center_vertical,
center_horizontal etc
3. text: text attribute is used to set the text in a auto complete text view. We can set the text
in xml as well as in the java class.
4. textColor: textColor attribute is used to set the text color of a auto complete text view.
Color value is in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.
5. textSize: textSize attribute is used to set the size of text of a auto complete text view. We
can set the text size in sp(scale independent pixel) or dp(density pixel).
6. textStyle: textStyle attribute is used to set the text style of a auto complete text view. The
possible text styles are bold, italic and normal. If we need to use two or more styles for a
auto complete text view then “|” operator is used for that.
7. background: background attribute is used to set the background of a auto complete text
view.
8. padding: padding attribute is used to set the padding from left, right, top or bottom.
Button
Button represents a push button. A Push buttons can be clicked, or pressed by the user to
perform an action. Button is a subclass of TextView class and compound button is the subclass of
Button class
 Ch4. Designing user interface with view
Attributes of Button
1. Id: id is an attribute used to uniquely identify a button
2. gravity: The gravity attribute is an optional attribute which is used to control the alignment
of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc
3. text: text attribute is used to set the text in a button. We can set the text in xml as well as
in the java class.
4. textColor: textColor attribute is used to set the text color of a button. Color value is in the
form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.
5. textSize: textSize attribute is used to set the size of text of a button. We can set the text
size in sp(scale independent pixel) or dp(density pixel).
6. textStyle: textStyle attribute is used to set the text style of a button. The possible text styles
are bold, italic and normal. If we need to use two or more styles for a button then “|”
operator is used for that.
7. background: background attribute is used to set the background of a button.
8. padding: padding attribute is used to set the padding from left, right, top or bottom.
9. drawableBottom: drawableBottom is the drawable to be drawn to the below of the text
10. drawableTop, drawableRight and drawableLeft: Just like the above attribute we can
draw drawable to the left, right or top of text.
Properties of Button
1. Auto link: controls links such as url and email address and converts them to clickable links
2. Background: reference or color to use as background
3. Buffer type: minimum type of getText() will return (enum)
4. Clickable: defines if text view reacts to click events
5. Cursor visible: makes the cursor visible or invisible
6. On click: name of method in this view’s context to invoke when view is clicked
Image Button

ImageButton is used to display a normal button with a custom image in

a button. ImageButton is a button with an image that can be pressed or clicked by the users.
Attributes of Image Button

1. Id: id is an attribute used to uniquely identify a image button

2. Src: src is an attribute used to set a source file of image
3. Background: background attribute is used to set the background of an image button.
4. padding: padding attribute is used to set the padding from left, right, top or bottom of the
ImageButton.
5. adjustViewBounds- Set this to true if you want the ImageView to adjust its bounds to
preserve the aspect ratio of its drawable.
6. baseline- This is the offset of the baseline within this view.
7. baselineAlignBottom-If true, the image view will be baseline aligned with based on its
bottom edge.
8. cropToPadding-If true, the image will be cropped to fit within its padding.
 Ch4. Designing user interface with view
Properties of Image Button
1. Clickable: defines if text view reacts to click events
2. Scale type: controls how image should be resized or moved to match the size of
ImageView
3. Text: text to be displayed
4. On click: name of method in this View’s context to invoke when the view is clicked
5. Max height: maximum height for this view
6. Min height: minimum height for this view
Toggle Button
ToggleButton is used to display checked and unchecked state of
a button. ToggleButton basically an off/on button with a light indicator which indicate the current
state of toggle button.
Attributes of Toggle Button(other attributes same as above components)
1. Id
2. checked: checked is an attribute of toggle button used to set the current state of a toggle
button. The default value of checked attribute is false.
3. Gravity
4. textOn And textOff: textOn attribute is used to set the text when toggle button is in
checked/on state
5. textColor
6. textSize
7. textStyle
8. Background
9. Padding
10. drawableBottom, drawableTop, drawableRight And drawableLeft
Properties of Toggle Button
1. Aplha
2. Background
3. Buffer type
4. Links
5. Clickable
6. Cursor visible
7. Digits
8. Text
9. On click
Radio Button & Radio Group
RadioButton are mainly used together in a RadioGroup. In RadioGroup checking the one
radio button out of several radio button added in it will automatically unchecked all the others. It
means at one time we can checked only one radio button from a group of radio buttons which
belong to same radio group.
 Ch4. Designing user interface with view
Attributes of Radio Button & Radio Group(same as above components)
1. Id
2. checked- checked attribute in radio button is used to set the current state of a radio
button. We can set it either true or false where true shows the checked state and false
shows unchecked state of a radio button.
3. Text
4. Gravity
5. textColor
6. textSize
7. textStyle
8. Background
9. Padding
10. drawableBottom, drawableTop, drawableLeft And drawableRight
Properties of Radio Button & Radio Group
Checkbox
Attributes of Checkbox
Properties of Checkbox
Progress bar
Attributes of Progress bar
Properties of Progress bar