Chapter

Unit IV 04

Networking and Security

Designing User Interface with View

Hours: 10 Marks: 12

Presented by:

Prof. S.S.Bhosale
Pravara Polytechnic, Loni
 Specific Objective

Use User Interface components for

android application development.
 4.1 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.
 4.1.1 TextView Attributes

Sr.No. Attribute & Description

1 android:id
This is the ID which uniquely identifies the control.

2 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
3 android:cursorVisible
Makes the cursor visible (the default) or invisible. Default is false.
 4.1.1 TextView Attributes

Sr.No. Attribute & Description

4 android:editable

If set to true, specifies that this TextView has an input method.

5 android:fontFamily

Font family (named by string) for the text.

6 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.
7 android:hint

Hint text to display when the text is empty.

8 android:inputType

The type of data being placed in a text field. Phone, Date, Time, Number,
Password etc.
 4.1.1 TextView Attributes

Sr.No. Attribute & Description

9 android:maxHeight

Makes the TextView be at most this many pixels tall.

10 android:maxWidth

Makes the TextView be at most this many pixels wide.

11 android:minHeight

Makes the TextView be at least this many pixels tall.

12 android:minWidth

Makes the TextView be at least this many pixels wide.

13 android:password

Whether the characters of the field are displayed as password dots instead of
themselves. Possible value either "true" or "false".
 4.1.1 TextView Attributes

Sr.No. Attribute & Description

14 android:phoneNumber

If set, specifies that this TextView has a phone number input method. Possible
value either "true" or "false".
15 android:text Text to display.

16 android:textAllCaps

Present the text in ALL CAPS. Possible value either "true" or "false".
17 android:textColor

Text color. May be a color value, in the form of "#rgb", "#argb", "#rrggbb", or
"#aarrggbb".
18 android:textColorHighlight

Color of the text selection highlight.

 4.1.1 TextView Attributes

Sr.No. Attribute & Description

19 android:textColorHint
Color of the hint text. May be a color value, in the form of "#rgb",
"#argb", "#rrggbb", or "#aarrggbb".
20 android:textIsSelectable
Indicates that the content of a non-editable text can be selected.
Possible value either "true" or "false".
21 android:textSize
Size of the text. Recommended dimension type for text is "sp" for
scaled-pixels (example: 15sp).
 4.1.1 TextView Attributes

Sr.No. Attribute & Description

22 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
23 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
 4.2 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.
 4.2.1 EditText Attributes

Sr.No. Attribute & Description

1 android:autoText

If set, specifies that this TextView has a textual input method and
automatically corrects some common spelling errors.
2 android:drawableBottom

This is the drawable to be drawn below the text.

3 android:drawableRight

This is the drawable to be drawn to the right of the text.

4 android:editable

If set, specifies that this TextView has an input method.

5 android:text

This is the Text to display.

 4.2.1 EditText Attributes

Sr.No. Attribute & Description

6 android:background
This is a drawable to use as the background.

7 android:contentDescription
This defines text that briefly describes content of the view.

8 android:id
This supplies an identifier name for this view.

9 android:onClick
This is the name of the method in this View's context to invoke when the
view is clicked.
10 android:visibility
This controls the initial visibility of the view.
 4.3 AutoCompleteTextView

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.
 4.3.1 AutoCompleteTextView Attributes
Sr.No. Attribute & Description

android:completionHint
1
This defines the hint displayed in the drop down menu.

android:completionHintView
2
This defines the hint view displayed in the drop down menu.
android:completionThreshold
3 This defines the number of characters that the user must type before
completion suggestions are displayed in a drop down menu.
android:dropDownAnchor
4
This is the View to anchor the auto-complete dropdown to.
android:dropDownHeight
5
This specifies the basic height of the dropdown.
 4.3.1 AutoCompleteTextView Attributes
Sr.No. Attribute & Description

android:dropDownHorizontalOffset
6 The amount of pixels by which the drop down should be offset
horizontally.
android:dropDownSelector
7
This is the selector in a drop down list.
android:dropDownVerticalOffset
8
The amount of pixels by which the drop down should be offset vertically.

android:dropDownWidth
9
This specifies the basic width of the dropdown.
android:popupBackground
10
This sets the background.
 4.4 Button

A Button is a Push-button which can be pressed, or

clicked, by the user to perform an action.
 4.4 Button
Sr.No Attribute & Description
1 android:autoText

If set, specifies that this TextView has a textual input method and automatically
corrects some common spelling errors.
2 android:drawableBottom

This is the drawable to be drawn below the text.

3 android:drawableRight

This is the drawable to be drawn to the right of the text.

4 android:editable

If set, specifies that this TextView has an input method.

5 android:text

This is the Text to display.

 4.4 Button
Inherited from android.view.View Class

Sr.No Attribute & Description

1 android:background

This is a drawable to use as the background.

2 android:contentDescription

This defines text that briefly describes content of the view.

3 android:id

This supplies an identifier name for this view.

4 android:onClick

This is the name of the method in this View's context to invoke when the view is
clicked.
5 android:visibility

This controls the initial visibility of the view.

 4.5 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.
 4.5.1 ImageButton Attributes
Sr.No Attribute & Description
android:adjustViewBounds
1 Set this to true if you want the ImageView to adjust its bounds to preserve
the aspect ratio of its drawable.
android:baseline
2
This is the offset of the baseline within this view.
android:baselineAlignBottom
3 If true, the image view will be baseline aligned with based on its bottom
edge.
android:cropToPadding
4 If true, the image will be cropped to fit within its padding.

android:src
5
This sets a drawable as the content of this ImageView.
 4.5.1 ImageButton Attributes
Inherited from android.view.View Class

Sr.No Attribute & Description

1 android:background

This is a drawable to use as the background.

2 android:contentDescription

This defines text that briefly describes content of the view.

3 android:id

This supplies an identifier name for this view.

4 android:onClick

This is the name of the method in this View's context to invoke when the view is
clicked.
5 android:visibility

This controls the initial visibility of the view.

 4.6 ToggleButton

A ToggleButton displays checked/unchecked

states as a button.
It is basically an on/off button with a light
indicator.
 4.6.1 ToggleButton Attributes

Sr.No Attribute & Description

1 android:disabledAlpha
This is the alpha to apply to the indicator when disabled.
2 android:textOff
This is the text for the button when it is not checked.
3 android:textOn
This is the text for the button when it is checked.
 4.6.1 ToggleButton Attributes
Inherited from android.widget.TextView Class

Sr.No Attribute & Description

1 android:autoText
If set, specifies that this TextView has a textual input method and
automatically corrects some common spelling errors.
2 android:drawableBottom
This is the drawable to be drawn below the text.
3 android:drawableRight
This is the drawable to be drawn to the right of the text.
4 android:editable
If set, specifies that this TextView has an input method.

5 android:text
This is the Text to display.
 4.6.1 ToggleButton Attributes
Inherited from android.view.View Class

Sr.No Attribute & Description

1 android:background

This is a drawable to use as the background.

2 android:contentDescription

This defines text that briefly describes content of the view.

3 android:id

This supplies an identifier name for this view.

4 android:onClick

This is the name of the method in this View's context to invoke when the view is
clicked.
5 android:visibility

This controls the initial visibility of the view.

 4.7 RadioButton
A RadioButton has two states: either checked or
unchecked.

This allows the user to select one option from a set.

 4.8 Radio Group

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.

Radio Group Attributes:

Attribute Description
android:checkedButton This is the id of child radio button that should be
checked by default within this radio group.
 4.8.1 Radio Group
Inherited from android.view.View Class

Sr.No Attribute & Description

1 android:background

This is a drawable to use as the background.

2 android:contentDescription

This defines text that briefly describes content of the view.

3 android:id

This supplies an identifier name for this view.

4 android:onClick

This is the name of the method in this View's context to invoke when the view is
clicked.
5 android:visibility

This controls the initial visibility of the view.

 4.9 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.
 4.9.1 CheckBox
Sr.No Attribute & Description
android:autoText
1 If set, specifies that this TextView has a textual input method and
automatically corrects some common spelling errors.
android:drawableBottom
2 This is the drawable to be drawn below the text.

android:drawableRight
3 This is the drawable to be drawn to the right of the text.

android:editable
4 If set, specifies that this TextView has an input method.

android:text
5 This is the Text to display.
 4.9.1 CheckBox
Inherited from android.view.View Class
Sr.No Attribute & Description
1 android:background

This is a drawable to use as the background.

2 android:contentDescription

This defines text that briefly describes content of the view.

3 android:id

This supplies an identifier name for this view.

4 android:onClick

This is the name of the method in this View's context to invoke when the view is
clicked.
5 android:visibility

This controls the initial visibility of the view.

 4.10 Progress Bars

- 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.
 4.10 Progress Bars

Its syntax is:

ProgressDialog progress = new ProgressDialog(this);

Now you can set some properties of this dialog. Such as,
its style, its text etc.

progress.setMessage("Downloading Music :) ");

progress.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
progress.setIndeterminate(true);
 4.10 Progress Bars

Sr.No Attribute & Description

1 getMax()
This method returns the maximum value of the progress.
2 incrementProgressBy(int diff)
This method increments the progress bar by the difference of value passed
as a parameter.
3 setIndeterminate(boolean indeterminate)
This method sets the progress indicator as determinate or indeterminate.
4 setMax(int max)
This method sets the maximum value of the progress dialog.
5 setProgress(int value)
This method is used to update the progress dialog with some specific value.

6 show(Context context, CharSequence title, CharSequence message)

This is a static method, used to display progress dialog.
 4.11 ListView

- 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.
 4.11 ListView
-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.
 4.11 ListView Attributes

Sr.No Attribute & Description

1 android:id
This is the ID which uniquely identifies the layout.
2 android:divider
This is drawable or color to draw between list items.

3 android:dividerHeight
This specifies height of the divider. This could be in px, dp, sp, in, or mm.
4 android:entries
Specifies the reference to an array resource that will populate the ListView.

5 android:footerDividersEnabled
When set to false, the ListView will not draw the divider before each footer view.
The default value is true.
6 android:headerDividersEnabled
When set to false, the ListView will not draw the divider after each header view.
The default value is true.
 4.11.1 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);
 4.11.1 ArrayAdapter

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);
 4.12 GridView

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
 4.12 GridView

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.
 4.12 GridView Attributes

Sr.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
android:columnWidth
2 This specifies the fixed width for each column. This could be in px,
dp, sp, in, or mm.
android:gravity
3 Specifies the gravity within each cell. Possible values are top,
bottom, left, right, center, center_vertical, center_horizontal etc.
android:horizontalSpacing
4 Defines the default horizontal spacing between columns. This could
be in px, dp, sp, in, or mm.
 4.12 GridView Attributes

Sr.No Attribute & Description

android:numColumns
Defines how many columns to show. May be an integer value, such as
5
"100" or auto_fit which means display as many columns as possible to fill
the available space.
android:stretchMode
Defines how columns should stretch to fill the available empty space, if
any. This must be either of the values −
•none − Stretching is disabled.
6
•spacingWidth − The spacing between each column is stretched.
•columnWidth − Each column is stretched equally.
•spacingWidthUniform − The spacing between each column is uniformly
stretched..
android:verticalSpacing
7 Defines the default vertical spacing between rows. This could be in px, dp,
sp, in, or mm.
 4.13 ImageView

- In Android, ImageView class is used to display an

image file in application.

- Image file is easy to use but hard to master in

Android, because of the various screen sizes in
Android devices.

- An android is enriched with some of the best UI

design widgets that allows us to build good looking
and attractive UI based application.
 4.13 ImageView Attribute

1. id: id is an attribute used to uniquely identify

a image view in android.
2. src: src is an attribute used to set a source file or
you can say image in your imageview.
3. background: background attribute is used to set
the background of a ImageView.
4. 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.
 4.13 Imageview Attribute
5. 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.
 4.14 ScrollView
- In android, ScrollView is a kind of layout that is
useful to add vertical or horizontal scroll bars to the
content which is larger than the actual size
of layouts such as linearlayout , relativelayout ,
framelayout, etc.

- Generally, the android ScrollView is useful when

we have content that doesn’t fit 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.
 4.14 ScrollView

-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.
 4.14 ScrollView

- In android, ScrollView supports only vertical scrolling.

In case, if we want to implement horizontal scrolling,
then we need to use a HorizontalScrollView component.
 4.14.1 ScrollView Attributes

Sr.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
android:scrollbars
This specifies the alignment of scrollbar.
2
a. Vertical
b. horizontal
 4.15 Custom Toast Alert
- In Android, Toast is used to display information for
a period of time.

- It contains a message to be displayed quickly and

disappears after specified period of time. It does not
block the user interaction.

-Toast is a subclass of Object class.

In this we use two constants for setting the duration
for the Toast.

-Toast notification in android always appears near the

bottom of the screen.
 4.15 Custom Toast Alert
eg.

Toast msg=Toast.makeText(this,“This is toast msg automtically fade

away:”, Toast.LENGTH_SHORT);

msg.show();
 4.16 TimePicker

In Android, TimePicker is a widget used for selecting

the time of the day in either AM/PM mode or 24
hours mode.

The displayed time consist of hours, minutes and

clock format.

If we need to show this view as a Dialog then we

have to use a TimePickerDialog class.
 4.16.1 Methods of TimePicker

1. setCurrentHour(Integer currentHour):
This method is used to set the current hours in a time
picker.

2. setCurrentMinute(Integer currentMinute):
This method is used to set the current minutes in a
time picker.

3. getCurrentHour():
This method is used to get the current hours from a
time picker.
 4.16.1 Methods of TimePicker

4. getCurrentMinute():
This method is used to get the current minutes from a
time picker.

5. setIs24HourView(Boolean is24HourView):
This method is used to set the mode of the Time
picker either 24 hour mode or AM/PM mode. In this
method we set a Boolean value either true or false.
True value indicate 24 hour mode and false value
indicate AM/PM mode.

6. is24HourView():
 4.16.1 Methods of TimePicker

6. is24HourView():
This method is used to check the current mode of the
time picker. This method returns true if its 24 hour
mode or false if AM/PM mode is set.
 4.16.1 AttributesTimePicker

Sr.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
timePickerMode:
2 Time picker mode is an attribute of time picker used to set the
mode either spinner or clock
background:
background attribute is used to set the background of a time
3
picker. We can set a color or a drawable image in the
background.
padding: padding attribute is used to set the padding from left,
4
right, top or bottom for a time picker.
 4.16 DatePicker

1. In Android, DatePicker is a widget used to select a

date.

2. It allows to select date by day, month and year in

your custom UI (user interface).

3. If we need to show this view as a dialog then we

have to use a DatePickerDialog class.
 4.16.1 Methods of DatePicker

1. setSpinnersShown(boolean shown):
This method is used to set whether the spinner of
the date picker in shown or not. In this method you
have to set a Boolean value either true or false. True
indicates spinner is shown, false value
indicates spinner is not shown.

2. getDayOfMonth():
This method is used to get the selected day of the
month from a date picker. This method returns an
integer value.
 4.16.1 Methods of DatePicker

3. getMonth():
This method is used to get the selected month from a
date picker. This method returns an integer value.

4. getYear():
This method is used to get the selected year from a
date picker. This method returns an integer value.

5. getFirstDayOfWeek():
This method is used to get the first day of the week.
This method returns an integer value.
 4.16.1 Attributes DatePicker

Sr.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.
datePickerMode: This attribute is used to set the Date Picker
2
in mode either spinner or calendar.
background:
background attribute is used to set the background of a Date
3
picker. We can set a color or a drawable image in the
background.
padding: padding attribute is used to set the padding from left,
4
right, top or bottom for a Date picker.
Socket
Thank You
 Network socket is an endpoint of an inter-
process communication flow across a
computer network.

 Sockets provide the communication

mechanism between two computers using
TCP/IP.