Chapter 4
Designing User Interface with View
❑ 4.1)Develop rich user interface for the given android
application.
❑ 4.2)Develop Android application using the given view
❑ 4.3)Explain the significance of the given display alert
❑ 4.4)Develop the given application using time and date
picker.
Android UI Controls
► There are number of UI controls provided by Android that
allow you to build the graphical user interface for your app.
► Following are the commonly used UI or input controls in
android applications.
TextView RadioGroup
EditText ProgressBar
AutoCompleteTextView TimePicker
Button DatePicker
ImageButton SeekBar
ToggleButton AlertDialog
CheckBox Switch
RadioButton RatingBar
Android UI Controls
The “views” are the building blocks of a U.I design and composes of almost every basic U.I
element like TextViews, EditTexts, ImageViews etc. This ‘view’ however comes along with a few
properties bundled to them. Some of the important and are often used to build up a complete
meaningful screen design.
“id”
This is basically the name of the particular view and will be used to refer that particular view
through out the project. It has to be unique(multiple views referencing to same id will confuse
the compiler).
“width” and “height”
As the name of these properties suggest, these are the dimensions of that particular view. Now
these dimensions can be set using hard-coded values and it will adopt to them in most layouts,
but its not a very good design as the content inside them might get cropped or will have
unwanted spaces. Android provides two pre-defined options to set these dimensions
— “match_parent” and “wrap_content”.
Android UI Controls
Setting the dimensions to “match_parent” will make them equal to those of its parent’s
dimensions. If there is no parent to that particular view, it merely sets to the screen’s dimensions
(parent of a view is the U.I element in which it is housed in). And setting it to “wrap_content” will
force the view to adopt its dimensions according to its content.
Android UI Controls
► “margin”
► This is the minimum distance that a view has to maintain from its neighbouring
views. Since there are four sides to any view, the four margins corresponding to
them are “margin_left”, “margin_right”, “margin_top” and “margin_bottom”.
If the same margin is needed to be set on all sides, it can be set directly
through “margin” property.
Android UI Controls
► “padding”
► The distance between the view’s outline and its content. Again similar to the
“margin” property, “padding” too has “padding_left”, “padding_right”,
“padding_top”, “padding_bottom” and the common padding to all sides can be
set through “padding” property.
►
TextView
► A user interface element that 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.
► The following code sample shows a typical use, with an XML layout and code to
modify the contents of the text view:
<LinearLayout
xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/hello" />
</LinearLayout>
► This code sample demonstrates how to modify the contents of the text view
defined in the previous XML layout:
public class MainActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
final TextView helloTextView = (TextView) findViewById([Link].text_view_id);
[Link]([Link].user_greeting);
}
}
TextView attributes 11. android:minWidth
1. android:id 12. android:password
2. android:capitalize 13. android:phoneNumber
3. android:cursorVisible 14. android:text
4. android:editable 15. android:textAllCaps
5. android:fontFamily 16. android:textColor
6. android:gravity 17. android:textColorHighlight
7. android:hint 18. android:textColorHint
8. android:inputType 19. android:textIsSelectable
9. android:maxHeight 20. android:textSize
10. android:maxWidth 21. android:textStyle
11. android:minHeight 22. android:typeface
EditText
► EditText is a predefined subclass of TextView that includes rich editing capabilities.
► It is used to allow the user to enter or modify the text.
► While using EditText control in our android applications, we need to specify the type
of data the text field can accept using inputType attribute
<EditText
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"/>
► Choosing the input type configures the keyboard type that is shown, acceptable
characters, and appearance of the edit text.
EditText
► EditText is a user interface control which is used to allow the user to enter
or modify the text.
AutoCompleteTextView
► is an editable text view which is used to show the list of suggestions based on
the user typing text. The list of suggestions will be shown as a dropdown
menu from which the user can choose an item to replace the content of
textbox.
► The AutoCompleteTextView is a subclass of EditText class.
► The Threshold property of AutoCompleteTextView is used to define the
minimum number of characters the user must type to see the list of
suggestions.
► In android, we can set the text of AutoCompleteTextView control by
using setAdapter() method in Activity file.
Following is example of binding data AutoCompleteTextView in activity file
using setAdapter() method.
public class MainActivity extends AppCompatActivity {
String[] language ={"C","C++","Java",".NET","iPhone","Android","[Link]","PHP"};
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
//Creating the instance of ArrayAdapter containing list of language names
ArrayAdapter<String> adapter = new ArrayAdapter<String>
(this,[Link].select_dialog_item,language);
//Getting the instance of AutoCompleteTextView
AutoCompleteTextView actv = (AutoCompleteTextView)findViewById([Link]);
[Link](1);//will start working from first character
[Link](adapter);//setting the adapter data into the AutoCompleteTextView
[Link]([Link]);
}
}
Button
► is a user interface control which is used to perform an action whenever the
user click or tap on it.
► To specify an action when the button is pressed, set a click listener on the
button object in the corresponding activity code:
final Button button = findViewById([Link].button_id);
[Link](new [Link]() {
public void onClick(View v) {
// Code here executes on main thread after user presses button
}
Image Button
► is a user interface control which is used to display a button with image and
to perform an action when user click or tap on it.
► By default, the ImageButton looks same as normal button and it perform an
action when user click or touches it, but only difference is we will add a
custom image to the button instead of text.
► In android, we can add a image to the button by
using <ImageButton> attribute android:src in XML layout file or by
using setImageResource() method.
Toggle Button
► Toggle Button is a user interface control which is used to
display ON (Checked) or OFF (Unchecked) states as a button with a light
indicator.
► By default, the android ToggleButton will be in OFF (Unchecked) state. We
can change the default state of ToggleButton by using android:checked
attribute.
Radio Button And Radio Group
► is a two states button that can be either checked or unchecked and it’s a
same as CheckBox control, except that it will allow only one option to select
from the group of options.
► Radio Group is used to group one or more radio buttons into separate groups
based on our requirements.
► Generally, we use radio buttons with in a RadioGroup to combine
multiple Radio Buttons into one group and it will make sure that user can
select only one option from the group of multiple options.
CheckBox
► Generally, we can use multiple CheckBox controls in android application to
allow users to select one or more options from the set of values.
ProgressBar
► ProgressBar is a user interface control which is used to indicate the progress
of an operation. For example, downloading a file, uploading a file.
► By default the ProgressBar will be displayed as a spinning wheel, in case if
we want to show it like horizontal bar then we need to change the style
property to horizontal
► In android, the ProgressBar supports two types of modes to show the
progress, those are Determinate and Indeterminate.
► Determinate progress mode in progress bar when we want to show the
quantity of progress has occurred.
► Indeterminate progress mode in progress bar when we don’t know how long
an operation will take or how much work has done.
► By using [Link](true) in activity file
programmatically or using android:indeterminate = “true” attribute in XML
layout file, we can enable Indeterminate progress mode.
► 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.
► ProgressDialog progress = new ProgressDialog(this);
► Important methods of ProgressDialog are given below.
setMessage()
setTitle()
setProgressStyle(ProgressDialog.STYLE_HORIZONTAL) :
setProgressStyle(ProgressDialog.STYLE_SPINNER)
setMax()
getProgress() :
getMax()
show(Context context, CharSequence title, CharSequence message)\
incrementProgressBy(int diff)
ListView
► ListView is a ViewGroup which is used to display the list of scrollable of items
in multiple rows and the list items are automatically inserted to the list using
an adapter.
► Generally, the adapter pulls data from a sources such as an array or database
and converts each item into a result view and that’s placed into the list.
► Adapter will act as an intermediate between the data sources and adapter
views such as ListView, Gridview to fill the data into adapter views.
► In android commonly used adapters are:
► Array Adapter
► Base Adapter
[Link] Adapter:
► Whenever you have a list of single items which is backed by an array, you can use
ArrayAdapter.
► Below is Array Adapter code:
ArrayAdapter adapter = new ArrayAdapter<String> (this,[Link].activity_listview,
StringArray);
[Link] Adapter:
► BaseAdapter is a common base class of a general implementation of an Adapter that
can be used in ListView.
► Whenever you need a customized list you create your own adapter and extend base
adapter in that.
► Base Adapter can be extended to create a custom Adapter for displaying a custom
list item. ArrayAdapter is also an implementation of BaseAdapter.
GridView
► GridView shows items in two-dimensional scrolling grid (rows & columns)
ImageView .
► class is used to display an image file in application.
► ImageView in android comes with different configuration options to support
different scale
► scaleType options are used for scaling the bounds of an image to the bounds
of image view. Below are the listed scaleType configuration properties
supported.
► CENTER: Places the image in center, but does not scale it.
► CENTER_CROP: Scales the image uniformly.
► CENTER_INSIDE: This will place the image inside the container and the edges of
the image will not overlap with that of the container, the image will be inside it.
► FIT_CENTER: Scale the image from the center.
► FIT_END: Scale the image from the end of the container, i.e from the right hand
side.
► FIT_START: Scale the image from the start of the container, i.e from the left
hand side.
► FIT_XY: This will fill the complete container with the image. This generally
distorts the image by stretching/sqeezing it in disproportionate ratios.
► MATRIX: Used to scale the image using the image matrix when drawing.
ScrollView
► 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.
► 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.
► ScrollView supports only vertical scrolling. In case, if we want to
implement horizontal scrolling, then we need to
use HorizontalScrollView component.
► The android ScrollView is having property called android:fillViewport, which
is used to define whether the ScrollView should stretch it’s content to fill the
viewport or not.
► id and scrollbars are common attributes.
Toasts
► 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.
► Toasts are not clickable.
► First, instantiate a Toast object with one of the makeText() methods.
► This method takes three parameters: the application Context, the
text message, and the duration for the toast.
► It returns a properly initialized Toast object. You can display the
toast notification with show()
► Code:
Toast toast = [Link](getApplicationContext(), "Default Toast Style",
Toast.LENGTH_SHORT).show();
► Positioning your Toast
► A standard toast notification appears near the bottom of the screen, centered
horizontally. You can change this position with the setGravity(int, int, int) method.
This accepts three parameters: a Gravity constant, an x-position offset, and a y-
position offset.
► For example:
► [Link]([Link]|[Link], 0, 0);
Creating Custom Toast View
► To create a custom layout, define a View layout, in XML or in your
application code, and pass the root View object to the setView(View)
method.
► The following snippet contains a customized layout for a toast notification
(saved as layout/custom_toast.xml):
► <LinearLayout xmlns:android="[Link]
► android:id="@+id/custom_toast_container"
► android:orientation="horizontal"
► android:layout_width="fill_parent"
► android:layout_height="fill_parent"
► android:padding="8dp"
► android:background="#DAAA"
► >
► <ImageView android:src="@drawable/droid"
► android:layout_width="wrap_content"
► android:layout_height="wrap_content"
► android:layout_marginRight="8dp"
► />
► <TextView android:id="@+id/text"
► android:layout_width="wrap_content"
► android:layout_height="wrap_content"
► android:textColor="#FFF"
► />
► </LinearLayout>
► Notice that the ID of the LinearLayout element is "custom_toast_container". You
must use this ID and the ID of the XML layout file "custom_toast" to inflate the
layout, as shown here:
LayoutInflater inflater = getLayoutInflater();
View layout = [Link]([Link].custom_toast,
(ViewGroup) findViewById([Link].custom_toast_container));
TextView text = (TextView) [Link]([Link]);
[Link]("This is a custom toast");
Toast toast = new Toast(getApplicationContext());
[Link](Gravity.CENTER_VERTICAL, 0, 0);
[Link](Toast.LENGTH_LONG);
[Link](layout);
[Link]();
► First, retrieve the LayoutInflater with getLayoutInflater, and then inflate the
layout from XML using inflate(int, ViewGroup).
► The first parameter is the layout resource ID and the second is the root View.
You can use this inflated layout to find more View objects in the layout, so now
capture and define the content for the ImageView and TextView elements.
► Finally, create a new Toast with Toast(Context) and set some properties of the
toast, such as the gravity and duration.
► Then call setView(View) and pass it the inflated layout. You can now display the
toast with your custom layout by calling show().
Pickers
► Android provides controls for the user to pick a time or pick a date as ready-
to-use dialogs.
► Each picker provides controls for selecting each part of the time (hour,
minute, AM/PM) or date (month, day, year).
► 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.
DatePicker
DatePickerDialog
Time Picker
TimePickerDialog
► A dialog that prompts the user for the time of day using a TimePicker.
