Design User Interface
with View
Topics to be covered
4.1 Text View, Edit Text, Button, Image
Button ,toggle button ,radio button
and radio group, check box, progress
bar
4.2 List view, Grid view, Image view ,
Scroll view, Custom Toast Alert
4.3Time and Date Picker
Most commonly used Android View
classes
Here we have some of the most commonly
used android View classes:
TextView
EditText
Button
ImageView
ImageButton
CheckBox
RadioButton
ListView
GridView
DatePicker
TextView
A TextView displays text to the user
and optionally allows them to edit it.
A TextView is a complete text editor,
however the basic class is configured
to not allow editing.
TextView Attributes
EditText
A EditText is an overlay over TextView that configures itself to
be editable. It is the predefined subclass of TextView that
includes rich editing capabilities.
Styles of edit text
EditText Attributes
Inherited from android.widget.TextView Class −
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.
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.
AutoCompleteTextView Attributes
Button
A Button is a Push-button which can be
pressed, or clicked, by the user to
perform an action.
Button Attributes
ImageButton
An ImageButton is an AbsoluteLayout which enables
you to specify the exact location of its children. This
shows a button with an image (instead of text) that can
be pressed or clicked by the user.
Android button style set
ImageButton Attributes
ToggleButton
A ToggleButton displays
checked/unchecked states as a
button. It is basically an on/off button
with a light indicator.
Toggle Button
ToggleButton Attributes
Radio Buttons
Radio buttons allow the user to
select one option from a set.
RadioGroup
A RadioGroup class is used for set of
radio buttons.
If we check one radio button that
belongs to a radio group, it
automatically unchecks any
previously checked radio button
within the same group.
RadioGroup Attributes
CheckBox
A CheckBox is an on/off switch that can be toggled
by the user. You should use check-boxes when
presenting users with a group of selectable
options that are not mutually exclusive.
CheckBox Attributes
Progress Bar
Progress bars are used to show progress of a task.
For example, when you are uploading or downloading
something from the internet, it is better to show the progress
of download/upload to the user.
In android there is a class called ProgressDialog that allows
you to create progress bar.
In order to do this, you need to instantiate an object of this
class. Its syntax is.
Now you can set some properties of this dialog. Such as, its
style, its text etc.
List View
Android ListView is a view which groups several items and
display them in vertical scrollable list.
The list items are automatically inserted to the list using
an Adapter that pulls content from a source such as an array or
database.
An adapter actually bridges between UI components and the data
source that fill data into UI Component.
Adapter holds the data and send the data to adapter view, the
view can takes the data from adapter view and shows the data on
different views like as spinner, list view, grid view etc.
The ListView and GridView are subclasses of AdapterView and
they can be populated by binding them to an Adapter, which
retrieves data from an external source and creates a View that
represents each data entry.
Android provides several subclasses of Adapter that are useful for
retrieving different kinds of data and building views for an
AdapterView ( i.e. ListView or GridView). The common adapters
are ArrayAdapter,Base
Adapter, CursorAdapter, SimpleCursorAdapter,SpinnerAda
pter and WrapperListAdapter.
ListView Attributes
ArrayAdapter
You can use this adapter when your data source is an array. By
default, ArrayAdapter creates a view for each array item by calling
toString() on each item and placing the contents in a TextView.
Consider you have an array of strings you want to display in a
ListView, initialize a new ArrayAdapter using a constructor to
specify the layout for each string and the string array −
ArrayAdapter adapter = new
ArrayAdapter<String>(this,R.layout.ListView,StringArray);Here are
arguments for this constructor −
First argument this is the application context. Most of the case, keep
it this.
Second argument will be layout defined in XML file and
having TextView for each string in the array.
Final argument is an array of strings which will be populated in the
text view.
Once you have array adapter created, then simply
call setAdapter() on your ListView object as follows −
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);You will define your list view under
res/layout directory in an XML file. For our example we are going to
Grid View
Android GridView shows items in two-dimensional
scrolling grid (rows & columns) and the grid items are
not necessarily predetermined but they automatically
inserted to the layout using a ListAdapter
An adapter actually bridges between UI components
and the data source that fill data into UI Component.
Adapter can be used to supply the data to like spinner,
list view, grid view etc.
The ListView and GridView are subclasses
of AdapterView and they can be populated by binding
them to an Adapter, which retrieves data from an
external source and creates a View that represents
each data entry.
GridView Attributes
ImageView
In Android, ImageView class is used to display an
image file in application.
In Android, you can use “
android.widget.ImageView” class to display an
image file
Image file is easy to use but hard to master in
Android, because of the various screen sizes in
Android devices.
ImageView comes with different configuration
options to support different scale types.
Scale type options are used for scaling the bounds
of an image to the bounds of the imageview.
Some of them scaleTypes configuration properties
are center, center_crop, fit_xy, fitStart etc.
1. Add Image to Resources
Put your images into folder “res/drawable-ldpi“,
“res/drawable-mdpi” or “res/drawable-hdpi“.
See figure below, no matter which folder you put,
Android will find your image automatically.
Attributes of ImageView:
1. id: id is an attribute used to uniquely
identify a image view in android.
Below is the example code in which
we set the id of a image view.
2. src: src is an attribute used to set a
source file or you can say image in
your imageview to make your layout
attractive.
3. background: background attribute is
used to set the background of a
ImageView. We can set a color or a
drawable in the background of a
ImageView.
4.padding: padding attribute is used to set the padding
from left, right, top or bottom of the Imageview.
paddingRight: set the padding from the right side of
the image view.
paddingLeft: set the padding from the left side of the
image view.
paddingTop: set the padding from the top side of the
image view.
paddingBottom: set the padding from the bottom
side of the image view.
padding: set the padding from the all side’s of the
image view.
5. scaleType: scaleType is an attribute used to control
how the image should be re-sized or moved to match
the size of this image view. The value for scale type
attribute can be fit_xy, center_crop, fitStart etc.
ScrollView
In android, ScrollView is a kind of layout which is useful to add a vertical or
horizontal scroll bars to the content which is larger than actual size of layouts
such as linearlayout, relativelayout, framelayout, etc.
Generally, the android ScrollView is useful when we have a content that
doesn’t fit to our android app layout screen. The ScrollView will enable a scroll
to the content which is exceeding the screen layout and allow users to see the
complete content by scrolling.
The android ScrollView can hold only one direct child. In case, if we want to
add multiple views within the scroll view, then we need to include them in
another standard layout like linearlayout, relativelayout, framelayout, etc.
To enable scrolling for our android applications, ScrollView is the best option
but we should not use ScrollView along with ListView or Gridview because they
both will take care of their own vertical scrolling.
In android, ScrollView supports only vertical scrolling. In case, if we want to
implement horizontal scrolling, then we need to
use HorizontalScrollView component.
Attributes Of Scroll
View:
ScrollView and HorizontalScrollView has
same attributes, the only difference is
scrollView scroll the child items in
vertical direction while horizontal scroll
view scroll the child items in horizontal
direction.
Custom Toast Alert
An Android Toast is a small message displayed on
the screen, similar to a tool tip or other similar popup
notification.
A Toast remains visible for a short time period.
The Toast.makeText() method is a factory method
which creates a Toast object.
The method takes 3 parameters.
First the methods needs a Context object which is
obtained by calling getApplicationContext().
The second parameter is the text to be displayed in
the Toast. The third parameter is the time duration
the Toast is to be displayed. The Toast class contains
two predefined constants you can
use: Toast.LENGTH_SHORT and Toast.LENGTH_LONG
Time and date
picker
Android - Date Picker
Android Date Picker allows you to
select the date consisting of day,
month and year in your custom user
interface.
For this functionality android
provides DatePicker and
DatePickerDialog components
Android - Time Picker
Android Time Picker allows you to
select the time of day in either 24
hour or AM/PM mode. The time
consists of hours, minutes and clock
format. Android provides this
functionality through TimePicker
class.
