Mobile Application Development-Designing User Interface With View

Designing User Interface
With View

TextView
Basically in Android Studio the Android TextView; UI component is used to display text to the user.
TextView is optionally is editable.
Attributes Descriptions
android : id To identifies the control uniquely we use ID attribute.
android : width
To specify the size (width) of controls. Possible values are pt, px, dp etc.(i.e 10pt, 155px,
230dp etc).
android : height
To specify the size(width) of controls. Possible values are pt, px, dp etc.(i.e 10pt, 155px,
230dp etc).
android : fontSize
It is used to specify the text size. Possible values are pt, px, dp etc.(i.e 10pt, 155px,
230dp etc).
android : gravity
It is used for text alignment inside textView. Possible values are center, left, right,
center_vertically, center_horizontally etc.
android : layoutGravity
It is used for textView layout alignment in parent layout. Possible values are center, left,
right, center_vertically, center_horizontally etc.
android : text Text to display on textView.
android : textColor
To specify the color of text in TextView. Possible values are HEX (#rrggbb) code. (i.e)
#CECECE
android : hint The text to display when TextView is empty.
android : capitalize
If set, specifies that this TextView has a textual input method and should automatically
capitalize what the user types.

TextView
Attributes Descriptions
android : cursorVisible To specify the visibility of cursor in TextView. Possbile values are Boolean “true” or “false”.
android : fontFamily To specify the text (font family) in TextView.
android : textAllCaps To capitalize all text of TextView. Possible values are Boolean “true” or “false”.
android :
textColorHighlight
Color of the text selection highlight.
android : textColorHint To specify the color of hint text.
android :
textIsSelectable
Indicates that the content of a non-editable text can be selected. Possible value either
“true” or “false”.
android : textStyle To gives style to the text in TextView. Possible values are bold, normal, italic.
android : inputType
The type of data being placed in a text field. Phone, Date, Time, Number, Password etc
android : maxWidth Makes the TextView be at most this many pixels wide.
android : maxHeight Makes the TextView be at most this many pixels tall.
android : minWidth Makes the TextView be at least this many pixels wide.
android : minHeight Makes the TextView be at least this many pixels tall.
Assignment 7_1

EditText
In Android, EditText is a standard entry widget in android apps. It is an overlay over TextView that configures itself to be
editable. 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.
Attribute Description
android:id It is used to uniquely identify the control
android:gravity It is used to specify how to align the text like left, right, center, top, etc.
android:text It is used to set the text.
android:hint It is used to display the hint text when text is empty
android:textColor It is used to change the color of the text.
android:textColorHint It is used to change the text color of hint text.
android:textSize It is used to specify the size of the text.
android:textStyle It is used to change the style (bold, italic, bolditalic) of text.
android:background It is used to set the background color for edit text control
android:width It makes the TextView be exactly this many pixels wide.
android:height It makes the TextView be exactly this many pixels tall.
android:maxWidth It is used to make the TextView be at most this many pixels wide.
android:minWidth It is used to make the TextView be at least this many pixels wide.
android:textAllCaps It is used to present the text in all CAPS
android:inputType It is used to specify the type of text being placed in text fields.
android:fontFamily It is used to specify the fontFamily for the text.
android:editable If we set false, EditText won't allow us to enter or modify the text

Button
In android, Button is a user interface control that is used to perform an action whenever the user clicks or tap on
it. Generally, Buttons in android will contain a text or an icon or both and perform an action when the user
touches it. Following is the pictorial representation of using Buttons in android applications.
In android, we have a different type of buttons available to use based on our requirements, those are ImageButton,
ToggleButton, RadioButton.
In android, we can create a Button control in two ways either in the XML layout file or create it in the Activity file
programmatically.
Create Button in XML Layout File
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>

Button
Create Button Control in Activity File
In android, we can create Button control programmatically in an activity file based on our requirements.
Following is the example of creating Button control dynamically in the activity file.
LinearLayout layout = (LinearLayout)findViewById(R.id.l_layout);
Button btn = new Button(this);
btn.setText("Test");
layout.addView(btn);
Define Button Click Event in XML Layout File
We can define click event handler for button by adding android:onClick attribute to the <Button> element
in our XML layout file.
The value of android:onClick attribute must be the name of the method which we need to call in response to
a click event and the Activity file which hosting XML layout must implement the corresponding method.
Following is the example of defining a button click event using android:onClick attribute in an XML layout
file.

Button
<?xml version="1.0" encoding="utf-8"?>
android:orientation="vertical" android:layout_width="match_parent"
<Button
android:text="Add"
android:onClick="addOperation"/>
</LinearLayout>
In Activity that hosts our XML layout file, we need to implement click event method like as shown below
/** Called when the user touches the button */
public void addOperation(View view) {
// Do something in response to the button click
}

Button
Define Button Click Event in Activity File
• In android, we can define the button click event programmatically in the Activity file rather than XML
layout file.
• To define button click programmatically, create View.OnClickListener object and assign it to the button
by calling setOnClickListener(View.OnClickListener) like as shown below.
Button btnAdd = (Button)findViewById(R.id.addBtn);
btnAdd.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Do something in response to button click
}
});
}

Button
android:textColor It is used to change the color of text.
android:background It is used to set the background color for button control.
android:padding It is used to set the padding from left, right, top and bottom.
android:drawableBottom It’s drawable to be drawn to the below of text.
android:drawableRight It’s drawable to be drawn to the right of text.
android:drawableLeft It’s drawable to be drawn to the left of the text.

ImageButton
In android, Image Button is a user interface control that is used to display a button with an image and to
perform an action when a user clicks or taps on it.
By default, the ImageButton looks same as normal button and it performs an action when a user clicks or
touches it, but the only difference is we will add a custom image to the button instead of text.
Following is the pictorial representation of using Image Buttons in android applications.
In android, we can add an image to the button by using <ImageButton> attribute android:src in XML layout file
or by using the setImageResource() method.
In android, we can create ImageButton control in two ways either in the XML layout file or create it in the Activity
file programmatically.

ImageButton
Create ImageButton in XML Layout File
<ImageButton
android:src="@drawable/add_icon" />
</LinearLayout>
Create ImageButton Control in Activity File
ImageButton btn = new ImageButton(this);
btn.setImageResource(R.drawable.add_icon);
layout.addView(btn);

ImageButton
Anndroid Handle ImageButton Click Events
Generally, whenever the user clicks on ImageButton, the ImageButton object will receives an on-click event.
In android, we can define button click event in two ways either in XML layout file or create it in Activity file
programmatically.
i. Define ImageButton Click Event in XML Layout File
We can define click event handler for button by adding android:onClick attribute to
the <ImageButton> element in our XML layout file.
The value of android:onClick attribute must be the name of method which we need to call in response to a
click event and the Activity file which hosting XML layout must implement the corresponding method.
<ImageButton
android:src="@drawable/add_icon" android:onClick="addOperation"/>
</LinearLayout>

ImageButton Anndroid Handle ImageButton Click Events
• Generally, whenever the user clicks on ImageButton, the ImageButton object will receives an on-click event.
• In android, we can define button click event in two ways either in XML layout file or create it in Activity file programmatically.
i. Define ImageButton Click Event in XML Layout File
• We can define click event handler for button by adding android:onClick attribute to the <ImageButton> element in
our XML layout file.
• The value of android:onClick attribute must be the name of method which we need to call in response to a click event
and the Activity file which hosting XML layout must implement the corresponding method.
<ImageButton
android:src="@drawable/add_icon" android:onClick="addOperation"/>
</LinearLayout>
In Activity that hosts our XML layout file, we need to implement click event method like as shown below
/** Called when the user touches the button */
public void addOperation(View view) {

ImageButton Anndroid Handle ImageButton Click Events
ii. Define ImageButton Click Event in Activity File
• In android, we can define ImageButton click event programmatically in Activity file rather than XML layout
file.
• To define button click programmatically, create View.OnClickListener object and assign it to the button by
calling setOnClickListener(View.OnClickListener) like as shown below.
ImageButton btnAdd = (ImageButton)findViewById(R.id.addBtn);
btnAdd.setOnClickListener(new View.OnClickListener() {
}
});
}

Android ImageButton Control Attributes
android:src It is used to specify the source file of an image
android:background It is used to set the background color for an image button control.
android:padding It is used to set the padding from left, right, top and bottom of the image button.
android:baseline It is used to set the offset of the baseline within the view.

ToggleButton
 In android, Toggle Button is a user interface control that is used to display ON (Checked) or OFF (Unchecked)
states as a button with a light indicator.
 The ToggleButton is useful for the users to change the settings between two states either ON or OFF. We can
add a ToggleButton to our application layout by using the ToggleButton object.
 Following is the pictorial representation of using ToggleButton in android applications.
 By default, the android ToggleButton will be in OFF (Unchecked) state. We can change the default state of
ToggleButton by using android:checked attribute.
 In case, if we want to change the state of ToggleButton to ON (Checked), then we need to set android:checked
= “true” in our XML layout file.
 In android, we can create ToggleButton control in two ways either in the XML layout file or create it in the
Activity file programmatically.

ToggleButton
Create ToggleButton in XML Layout File
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggle1"
android:layout_marginLeft="100dp"
android:layout_marginTop="120dp"
android:checked="true"
android:textOff="OFF"
android:textOn="ON"/>
</RelativeLayout>
Create ToggleButton Control in Activity File
RelativeLayout layout = (RelativeLayout)findViewById(R.id.r_layout);
ToggleButton tb = new ToggleButton(this);
tb.setTextOff("OFF");
tb.setTextOn("ON");
tb.setChecked(true);
layout.addView(tb);

ToggleButton
Handle Android ToggleButton Click Events
Generally, whenever the user clicks on ToggleButton, we can detect whether ToggleButton is in ON or OFF
state and we can handle the ToggleButton click event in activity file using setOnCheckedChangeListener
like as shown below.
ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
// The toggle is enabled
} else {
// The toggle is disabled
}
}
});

ToggleButton
android:checked It is used to specify the current state of toggle button
android:gravity It is used to specify how to align the text like left, right, center, top,
etc.
android:textOn It is used to set the text when the toggle button is in the ON / Checked
state.
android:textOff It is used to set the text when the toggle button is in the OFF /
Unchecked state.
android:textSize It is used to specify the size of text.
android:background It is used to set the background color for toggle button control.
android:drawableBottom It’s drawable to be drawn to the below text.
android:drawableRight It’s drawable to be drawn to the right of the text.
android:drawableLeft It’s drawable to be drawn to the left of text.

AutoCompleteTextView
 In android, 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 the textbox.
 The AutoCompleteTextView is a subclass of EditText class so we can inherit all the properties of EditText in
AutoCompleteTextView based on our requirements.
 Following is the pictorial representation of using AutoCompleteTextView in android applications.

 In android, we can create an AutoCompleteTextView control in two ways either in the XML layout file or create
it in the Activity file programmatically.
Create AutoCompleteTextView Control in Activity File
Create AutoCompleteTextView in Layout File
android:layout_height="match_parent"
android:orientation="vertical" >
<AutoCompleteTextView
android:id="@+id/autoComplete_Country"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
LinearLayout l_layout = (LinearLayout) findViewById(R.id.linear_Layout);
AutoCompleteTextView actv = new AutoCompleteTextView(this);
l_layout.addView(actv);

Set the Text of Android AutoCompleteTextView
Create AutoCompleteTextView in Layout File
String[] Countries = { "India", "USA", "Australia", "UK", "Italy", "Ireland", "Africa" };
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, Countries);
AutoCompleteTextView actv = AutoCompleteTextView)findViewById(R.id.autoComplete_Country);
actv.setAdapter(adapter);
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.
Study the example for Experiment 8

Android AutoCompleteTextView Attributes
android:hint It is used to display the hint text when text is empty
android:textColor It is used to change the color of the text.
android:textColorHint It is used to change the text color of hint text.
android:background It is used to set the background color for autocomplete textview control
android:ems It is used to make the textview be exactly this many ems wide.
android:width It makes the TextView be exactly this many pixels wide.
android:height It makes the TextView be exactly this many pixels tall.
android:textColorHighlight It is used to change the color of the text selection highlight.
android:fontFamily It is used to specify the fontFamily for the text.

CheckBox
 In android, CheckBox is a two-states button that can be either checked (ON) or unchecked (OFF) and it will
allow users to toggle between the two states (ON / OFF) based on the requirements.
 Generally, we can use multiple CheckBox controls in android application to allow users to select one or more
options from the set of values.
 Following is the pictorial representation of using CheckBox control in android applications.
 By default, the android ToggleButton will be in OFF (Unchecked) state. We can change the default state of
ToggleButton by using android:checked attribute.
 In case, if we want to change the state of ToggleButton to ON (Checked), then we need to set android:checked
= “true” in our XML layout file.
 In android, we can create ToggleButton control in two ways either in the XML layout file or create it in the
Activity file programmatically.

CheckBox
Create CheckBox in XML Layout File
 If you observe above code snippet, here we defined CheckBox control and setting CheckBox
state ON using android:checked attribute in xml layout file.
<CheckBox
android:id="@+id/chk1"
android:text="Java" /> </RelativeLayout>
Create CheckBox Control in Activity File
Following is the example of creating a CheckBox control dynamically in an activity file.
CheckBox cb = new CheckBox(this);
cb.setText("Tutlane");
cb.setChecked(true);
layout.addView(cb);

CheckBox
Handle Android CheckBox Click Events
Generally, whenever the user clicks on CheckBox to Select or Deselect the CheckBox object will receive an on-
click event.
In android, we can define the CheckBox click event in two ways either in the XML layout file or create it in
the Activity file programmatically.
Define CheckBox Click Event in XML Layout File
<CheckBox
android:id="@+id/chk1"
android:text="Java" android:onClick="onCheckBoxClick"/>
</LinearLayout>

CheckBox
public void onCheckboxClicked(View view) {
// Is the view now checked?
boolean checked = ((CheckBox) view).isChecked();
// Check which checkbox was clicked
switch(view.getId()) {
case R.id.chk1:
if (checked)
// Do your coding
else
// Do your coding
break;
// Perform your logic
}
}

CheckBox
In android, we can define CheckBox click event programmatically in Activity file rather than XML layout file.
To define checkbox click event programmatically, create View.OnClickListener object and assign it to the button by
calling setOnClickListener(View.OnClickListener) like as shown below.
CheckBox chk = (CheckBox) findViewById(R.id.chk1);
chk.setOnClickListener(new View.OnClickListener() {
@Override
boolean checked = ((CheckBox) v).isChecked();
// Check which checkbox was clicked
if (checked){
// Do your coding
}
else{
// Do your coding
}
}
});

CheckBox
Android CheckBox Control Attributes
android:checked It is used to specify the current state of checkbox
android:text It is used to set the text for a checkbox.
android:background It is used to set the background color for checkbox control.
android:onClick It’s the name of the method to invoke when the checkbox clicked.
android:visibility It is used to control the visibility of control.

RadioButton and RadioGroup
In android, Radio Button is a two-states button that can be either checked or unchecked and it’s the same
as CheckBox control, except that it will allow only one option to select from the group of options.
The user can press or click on the radio button to make it select. In android, CheckBox control allow users to change the
state of control either Checked or Unchecked but the radio button cannot be unchecked once it is checked.
Generally, we can use RadioButton controls in an android application to allow users to select only one option from the set
of values.
Following is the pictorial representation of using RadioButton control in android applications..

 In android, we use radio buttons with in a RadioGroup to combine multiple radio buttons into one group and
it will make sure that users can select only one option from the group of multiple options.
 By default, the android RadioButton will be in OFF (Unchecked) state. We can change the default state
of RadioButton by using android:checked attribute.
 In case, if we want to change the state of RadioButton to ON (Checked), then we need to
set android:checked = “true” in our XML layout file.
 In android, we can create RadioButton control in two ways either in the XML layout file or create it in
the Activity file programmatically.

Create RadioButton in XML Layout File
<RadioGroup
android:orientation="vertical">
<RadioButton
android:text="Java"
android:checked="true"/>
</RelativeLayout>

Create RadioButton Control in Activity File
In android, we can create RadioButton control programmatically in activity file based on our requirements.
Following is the example of creating a RadioButton control dynamically in activity file.
RadioButton rd = new RadioButton(this);
rd.setText("Tutlane");
rd.setChecked(true);
layout.addView(rd);
Define RadioButton Click Event in XML Layout File
We can define click event handler for button by adding the android:onClick attribute to
the <RadioButton> element in our XML layout file.
The value of android:onClick attribute must be the name of the method which we need to call in response
to a click event and the Activity file which hosting XML layout must implement the corresponding method.
Following is the example of defining a RadioButton click event using android:onClick attribute in XML
layout file.

In Activity that hosts our XML layout file, we need to implement click event method like as shown below.
public void onRadioButtonClicked(View view) {
// Is the view now checked?
boolean checked = ((RadioButton) view).isChecked();
// Check which RadioButton was clicked
switch(view.getId()) {
case R.id.chk1:
if (checked)
// Do your coding
else
// Do your coding
break;
// Perform your logic
}
}

Define RadioButton Click Event in Activity File
In android, we can define RadioButton click event programmatically in Activity file rather than XML layout
file.
To define RadioButton click event programmatically, create View.OnClickListener object and assign it to
the button by calling setOnClickListener(View.OnClickListener) like as shown below.
RadioButton rdb = (RadioButton) findViewById(R.id.radiobutton1);
rdb.setOnClickListener(new View.OnClickListener() {
@Override
boolean checked = ((RadioButton) v).isChecked();
// Check which radiobutton was pressed
if (checked){
// Do your coding
}
else{
// Do your coding
}
}
});

Android RadioButton Control Attributes
android:checked It is used to specify the current state of radio button
android:text It is used to set the text for the radio button.
android:background It is used to set the background color for radio button control.
android:onClick It’s the name of the method to invoke when the radio button clicked.
android:visibility It is used to control the visibility of control.

ProgressBar
In android, ProgressBar is a user interface control that is used to indicate the progress of an operation. For
example, downloading a file, uploading a file.
Following is the pictorial representation of using a different type of progress bars in android applications.
By default the ProgressBar will be displayed as a spinning wheel, in case if we want to show it like a horizontal bar
then we need to change the style property to horizontal like style="?android:attr/progressBarStyleHorizontal".

ProgressBar Create Android ProgressBar in XML Layout File
In android, we can create ProgressBar in XML layout file using <ProgressBar> element with different attributes like as
shown below
<ProgressBar
android:id="@+id/pBar3"
style="?android:attr/progressBarStyleHorizontal"
android:minHeight="50dp"
android:minWidth="250dp"
android:max="100"
android:indeterminate="true"
android:progress="1" />
attribute Description
android:minHeight It is used to set the height of the progress bar.
android:minWidth It is used to set the width of the progress bar.
android:max It is used to set the maximum value of the progress bar.
android:progress It is used to set the default progress value between 0 and max. It must be an integer value.

Android ProgressBar with Determinate Mode
In android, the ProgressBar supports two types of modes to show the progress, those
are Determinate and Indeterminate.
 Generally, we use the Determinate progress mode in progress bar when we want to show the quantity of progress has
occurred. For example, the percentage of file downloaded, number of records inserted into a database, etc.
 To use Determinate progress, we need to set the style of the progress bar
to Widget_ProgressBar_Horizontal or progressBarStyleHorizontal and set the amount of progress
using android:progress attribute.
 Following is the example which shows a Determinate progress bar that is 50% complete.
<ProgressBar
android:id="@+id/pBar"
android:max="100"
android:progress="50" />
By using setProgress(int) method, we can update the
percentage of progress displayed in app or by calling
incrementProgressBy(int) method, we can increase
the value of current progress completed based on
our requirements.
Generally, when the progress value reaches 100
then the progress bar is full. By using android:max
attribute we can adjust this default value.

Android ProgressBar with Indeterminate Mode
In android, the ProgressBar supports two types of modes to show the progress, those
are Determinate and Indeterminate.
 Generally, we use the Indeterminate progress mode in progress bar when we don’t know how long an operation will take
or how much work has done.
 In indeterminate mode the actual progress will not be shown, only the cyclic animation will be shown to indicate that some
progress is happing like as shown in the above progress bar loading images.
 By using progressBar.setIndeterminate(true) in activity file programmatically or using android:indeterminate = “true”
attribute in XML layout file, we can enable Indeterminate progress mode.
 Following is the example to set Indeterminate progress mode in an XML layout file.
<ProgressBar
android:id="@+id/progressBar1"
android:indeterminate="true"/>

ProgressBar
Android ProgressBar Control Attributes
android:max It is used to specify the maximum value of the progress can take
android:progress It is used to specify default progress value.
android:background It is used to set the background color for a progress bar.
android:indeterminate It is used to enable the indeterminate progress mode.
android:padding It is used to set the padding for left, right, top or bottom of a progress bar.

Android DatePicker with Examples
In android, DatePicker is a control that will allow users to select the date by a day, month and year in our
application user interface.
If we use DatePicker in our application, it will ensure that the users will select a valid date.
Following is the pictorial representation of using a datepicker control in android applications.

Generally, in android DatePicker available in two modes, one is to show the complete calendar and another one
is to show the dates in spinner view.
Create Android DatePicker in XML Layout File
In android, we can create a DatePicker in XML layout file using <DatePicker> element with different attributes
like as shown below
<DatePicker android:id="@+id/datePicker1"
android:layout_height="wrap_content" />
The above code snippet will return the DatePicker in android like as shown below

Android DatePicker with Spinner Mode
If we want to show the DatePicker in spinner format like showing day, month and year separately to select the
date, then by using DatePicker android:datePickerMode attribute we can achieve this.
Following is the example of showing the DatePicker in Spinner mode.
<DatePicker
android:id="@+id/datePicker1"
android:datePickerMode="spinner"
android:calendarViewShown="false"/>
The above code will return the DatePicker like as shown below

Android DatePicker Control Attributes
android:datePickerMode It is used to specify datepicker mode either spinner or
calendar
android:background It is used to set the background color for the date
picker.
android:padding It is used to set the padding for left, right, top or
bottom of the date picker.
Android DatePicker Example: https://www.tutlane.com/tutorial/android/android-datepicker-with-examples

Mobile Application Development-Designing User Interface With View

Recommended

Recommended

More Related Content

Similar to Mobile Application Development-Designing User Interface With View

Similar to Mobile Application Development-Designing User Interface With View (20)

More from Chandrakant Divate

More from Chandrakant Divate (20)

Recently uploaded

Recently uploaded (20)

Mobile Application Development-Designing User Interface With View