Android Development
CSE89D
VIEWS and VIEWGROUP
• All the interaction of a user
with the Android
application is through the
user interface(UI), hence it
is very important to
understand the basics
about the User Interface of
an android application.
Amandeep Kaur Sandhu
• Views
• View is the basic building block of UI(User Interface) in android.
View refers to the android.view.
• View class, which is the super class for all the GUI components
like TextView, ImageView, Button etc.
• View can be considered as a rectangle on the screen that
shows some type of content. It can be an image, a piece of text,
a button or anything that an android application can display. The
rectangle here is actually invisible, but every view occupies a
rectangle shape.
Amandeep Kaur Sandhu
SIZE of Rectange
• match_parent means it will occupy the complete space
available on the display of the device.
• Whereas, wrap_content means it will occupy only that much
space as required for its content to display.
Amandeep Kaur Sandhu
XML syntax for creating a View
Mandatory attributes for ever view:
▪ android:layout_height
▪ android:layout_width.
Amandeep Kaur Sandhu
Commonly used Views in Android
▪ TextView
▪ EditText
▪ Button
▪ ImageView
▪ ImageButton
▪ CheckBox
▪ RadioButton
▪ ListView
▪ GridView
▪ DatePicker
▪ Spinner, etc.
Amandeep Kaur Sandhu
TextView
• TextView is the most widely used view used to show pre-
defined text on display screen.
Amandeep Kaur Sandhu
Attributes of TextView
• android:id ::This is the ID which uniquely identifies the control.
• android:capitalize
• If set, 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
Amandeep Kaur Sandhu
• android:cursorVisible ::Makes the cursor visible (the default) or
invisible. Default is false.
• 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: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: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 etc.
• android:maxHeight ::Makes the TextView be at most this many
pixels tall.
• android:maxWidth ::Makes the TextView be at most this many
pixels wide.
Amandeep Kaur Sandhu
• 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:password ::Whether the characters of the field are
displayed as password dots instead of themselves. Possible
value either "true" or "false".
• android:phoneNumber ::If set, specifies that this TextView has
a phone number input method. Possible value either "true" or
"false".
• android:text ::Text to display.
• android:textAllCaps ::Present the text in ALL CAPS. Possible
value either "true" or "false".
Amandeep Kaur Sandhu
• android:textColor ::Text color. May be a color value, in the form of "#rgb",
"#rrggbb“.
• android:textColorHighlight ::Color of the text selection highlight.
• android:textIsSelectable ::Indicates that the content of a non-editable
text can be selected. Possible value either "true" or "false".
• android:textSize ::Size of the text. Recommended dimension type for text
is "sp" for scaled-pixels (example: 15sp).
• android:textStyle ::Style (bold, italic, bolditalic) for the text. You can use
or more of the following values separated by '|'.
• normal - 0
• bold - 1
• italic - 2
• android:typeface ::Typeface (normal, sans, serif, monospace) for the
text. You can use or more of the following values separated by '|'.
• normal - 0
• sans - 1
• serif - 2
• monospace - 3
Amandeep Kaur Sandhu
EditText
• EditText is a TextView which is editable. It has
almost similar properties as a TextView.
• EditText is used when you want to have a text
field in your application where user can enter
any text.
• It can be either single line or multi-line.
• Touching a text field places makes the field
active, places a cursor and automatically
displays the keyboard
Amandeep Kaur Sandhu
Attributes of EditText
• android:autoText ::If set, specifies that this TextView has a textual input method
and automatically corrects some common spelling errors.
• android:minLines:: It provides the view, with a height equivalent to the specified
number of lines on the screen. So, if you enter a value 2, then by default the
EditText view will be 2 lines tall, even without any text added to it. It will the the
default height.
• android:maxLines:: It sets the maximum number of lines that the EditText view
can accomodate, visually. In other words when we say maxLines has a value 3, it
means that the EditText view field will be 3 lines tall after which it will stop
increasing in size as more and more text is added to it, usually a scroll bar is
shown when number of lines exceeds the limit set.
• android:hint:: It displays a hint message before anyone types in the
EditText.
• android:maxLength:: It allows to specify the maximum number of
characters that the user can enter into the field.
Amandeep Kaur Sandhu
Button
• It is a component which can be pressed or clicked by the user
to perform an action. It has the same properties as a TextView,
with a few Button specific properties.
Amandeep Kaur Sandhu
Attributes of Button
• android:autoText ::If set, specifies that this TextView has a
textual input method and automatically corrects some common
spelling errors.
• android:background:: To set the background color of the
button.
Amandeep Kaur Sandhu
ImageButton and ImageView
• ImageView and ImageButton are used in Android application to
place an image in the view.
• ImageButton is used to use an image as a button in your
android application.
Amandeep Kaur Sandhu
Attributes
• android:maxHeight:: Used to specify a maximum height for this
view.
• android:maxWidth Used to specify a maximum width for this
view.
• android:src Sets a drawable as the content for this
ImageView.
• android:scaleType Controls how the image should be resized
or moved to match the size of the ImageView.
• android:tint Tints the color of the image in the ImageView.
Amandeep Kaur Sandhu
AutoCompleteTextView
• A AutoCompleteTextView is a view that is similar to EditText,
except that it shows a list of completion suggestions
automatically while the user is typing.
Amandeep Kaur Sandhu
Attributes
• android:completionHint ::This defines the hint displayed in
the drop down menu.
• android:completionHintView ::This defines the hint view
displayed in the drop down menu.
• android:completionThreshold ::This defines the number of
characters that the user must type before completion
suggestions are displayed in a drop down menu.
• android:dropDownHeight :: This specifies the basic height of
the dropdown.
• android:popupBackground ::This sets the background.
Amandeep Kaur Sandhu
Amandeep Kaur Sandhu
