Unit 04

Designing User Interface with View

View and ViewGroup
 The Android View class and ViewGroup class are two very central classes in Android
apps. An Android app contains one or more activities.
 An Android activity is a screen, similar to windows in a desktop application.
 Inside an activity you can have GUI components. The GUI components are instances
of View or ViewGroup subclasses.
View
The View class is a superclass for all GUI components in Android. For instance,
the TextView class which is used to display text labels in Android apps is a subclass of View.
Android contains the following commonly used View subclasses:
TextView ,EditText ,ImageView ,ProgressBar,Button, ImageButton, CheckBox

ViewGroup
The ViewGroup class is a subclass of the View class. ViewGroup instances work as
containers for View instances to group View instances together. Android contains the
following commonly used ViewGroup subclasses:
LinearLayout ,RelativeLayout

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.

Attributes of Android

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 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.
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".

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.

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).

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:text="Before Clicking"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold|italic"/>
</RelativeLayout>

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //set the layout
TextView simpleTextView = (TextView) findViewById(R.id.simpleTextView);
Button changeText = (Button) findViewById(R.id.btnChangeText);
changeText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
simpleTextView.setText("After Clicking");
}
});
}
}

Edit Text

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.

Attributes of EditText:

id: id is an attribute used to uniquely identify a text EditText. Below is the example code in
which we set the id of a edit text.
gravity: The gravity attribute is an optional attribute which is used to control the alignment
of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

text: text attribute is used to set the text in a EditText.

hint: hint is an attribute used to set the hint i.e. what you want user to enter in this edit text.
Whenever user start to type in edit text the hint will automatically disappear.

textColor: textColor attribute is used to set the text color of a text edit text. Color value is in
the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

textColorHint: textColorHint is an attribute used to set the color of displayed hint.

textSize: textSize attribute is used to set the size of text of a edit text. We can set the text size
in sp(scale independent pixel) or dp(density pixel).

textStyle: textStyle attribute is used to set the text style of a edit text. The possible text styles
are bold, italic and normal. If we need to use two or more styles for a edit text then “|”
operator is used for that.

background: background attribute is used to set the background of a edit text. We can set a
color or a drawable in the background of a edit text.

<EditText
android:id="@+id/simpleEditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="right"
android:text="Username"
android:hint="Enter Your Name Here"
android:textColor="#f00"
android:textColorHint="#0f0"
android:textSize="25sp"
android:textStyle="bold|italic"
android:background="#000"
/>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
android:layout_height="match_parent"

android:background="@color/design_default_color_secondary"
tools:context=".MainActivity">

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:ems="10"
android:hint="name"
android:inputType="textPersonName" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_marginTop="19dp"
android:ems="10"
android:hint="password"
android:inputType="numberPassword" />
<EditText
android:id="@+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText2"
android:layout_marginTop="12dp"
android:ems="10"
android:hint="E_mail"
android:inputType="textEmailAddress" />

<Button
android:id="@+id/button"
style="@android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/editText3"
android:layout_marginTop="62dp"
android:text="submit"
android:textSize="16sp"
android:textStyle="normal|bold" />

</RelativeLayout>

Java File:

package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

Button submit;
EditText name, password, email;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

name = (EditText) findViewById(R.id.editText1);

password = (EditText) findViewById(R.id.editText2);
email = (EditText) findViewById(R.id.editText3);

submit = (Button) findViewById(R.id.button);

submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (name.getText().toString().isEmpty() || password.getText().toString().isEmpty() ||
email.getText().toString().isEmpty() )
{
Toast.makeText(getApplicationContext(), "Enter the Data",
Toast.LENGTH_SHORT).show();
}
else {
Toast.makeText(getApplicationContext(), "Name - " + name.getText().toString()
+ " \n" + "Password - "
+ password.getText().toString()+ " \n" + "E-Mail - " +
email.getText().toString() ,Toast.LENGTH_SHORT).show();
}
}
});
}
}

Button
In Android, Button represents a push button. A Button is a Push-button which can be pressed,
or clicked, by the user to perform an action. Button is a subclass of TextView class
 Attribute of Button:

id: id is an attribute used to uniquely identify a text Button.

gravity: The gravity attribute is an optional attribute which is used to control the alignment
of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

text: text attribute is used to set the text in a Button.

textColor: textColor attribute is used to set the text color of a Button. Color value is in the
form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

textSize: textSize attribute is used to set the size of the text on Button.

textStyle: textStyle attribute is used to set the text style of a Button.

background: background attribute is used to set the background of a Button.

drawableBottom: drawableBottom is the drawable to be drawn to the below of the text.

drawableTop, drawableRight And drawableLeft: Just like the above attribute we can draw
drawable to the left, right or top of text.

<Button
android:id="@+id/simpleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:layout_centerInParent="true"
android:gravity="right|center_vertical"
android:textColor="#f00"
android:textSize="20sp"
android:textStyle="bold|italic"
android:textStyle="bold|italic"
android:drawableBottom="@drawable/ic_launcher"/>

We can perform action on button using different types such as calling listener on button or
adding onClick property of button.

button.setOnClickListener(new View.OnClickListener()
{
@Override
 public void onClick(View view)
{
//code
}
});

Example

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<EditText
android:id="@+id/editText1"
android:inputType="number" />
<EditText
android:id="@+id/editText2"
android:inputType="number" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText2"
android:text="ADD" />
</RelativeLayout>
Java File:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity

{
 EditText t1, t2;
Button buttonSum;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
t1 = (EditText) findViewById(R.id.editText1);
t2 = (EditText) findViewById(R.id.editText2);
buttonSum = (Button) findViewById(R.id.button);

buttonSum.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view)
{
String value1=t1.getText().toString();
String value2=t2.getText().toString();
int a=Integer.parseInt(value1);
int b=Integer.parseInt(value2);
int sum=a+b;
Toast.makeText(getApplicationContext(),String.valueOf(sum), Toast.LENGTH_LON
G).show();
}
});
}
}

Toggle Button

Android Toggle Button can be used to display checked/unchecked (On/Off) state on the
button.

It is beneficial if user have to change the setting between two states. It can be used to On/Off
Sound, Wifi, Bluetooth etc.

By default, the android ToggleButton will be in OFF (Unchecked) state. We can change the
default state of ToggleButton by using android:checked attribute.

Attributes :
 Attribute Description

android:id It is used to uniquely identify the control

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:text It is used to set the text.

android:textOn It is used to set the text when toggle button is in ON / Checked state.

android:textOff It is used to set the text when toggle button is in OFF / Unchecked state.

android:textColor It is used to change the color of text.

android:textSize It is used to specify the size of 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 toggle button control.

android:padding It is used to set the padding from left, right, top and bottom.

android:drawableBottom It’s a drawable to be drawn to the below of text.

android:drawableRight It’s a drawable to be drawn to the right of text.

android:drawableLeft It’s a drawable to be drawn to the left of text.

<ToggleButton
android:id="@+id/toggle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="120dp"
android:checked="true"
android:textOff="OFF"
android:textOn="ON"/>

Example

<?xml version="1.0" encoding="utf-8"?>

<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_width="wrap_content"
android:layout_height="wrap_content"
 android:layout_marginLeft="100dp"
android:layout_marginTop="120dp"
android:checked="true"
android:textOff="OFF"
android:textOn="ON"/>
<ToggleButton
android:id="@+id/toggle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/toggle1"
android:layout_toRightOf="@+id/toggle1"
android:textOff="OFF"
android:textOn ="ON"/>
<Button
android:id="@+id/getBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="200dp"
android:text="Submit" />
</RelativeLayout>

public class MainActivity extends AppCompatActivity

{
ToggleButton tb1,tb2;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
tb1 = (ToggleButton)findViewById(R.id.toggle1);
tb2 = (ToggleButton)findViewById(R.id.toggle2);
Button btnGet = (Button)findViewById(R.id.getBtn);
btnGet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{
Toast.makeText(getApplicationContext(), "Toggle Button1 -
" + tb1.getText().toString() + " \n" + "Toggle Button2 -
" + tb2.getText().toString(),Toast.LENGTH_SHORT).show();
}
 });
}
}

ImageButton
In Android, ImageButton is used to display a normal button with a custom image in a button.
In simple words we can say, ImageButton is a button with an image that can be pressed or
clicked by the users.
ImageButton has all the properties of a normal button so you can easily perform any event
like click or any other event which you can perform on a normal button.
Attributes:
1. id: id is an attribute used to uniquely identify a image button. Below is the example code in
which we set the id of a image button.
2. src: src is an attribute used to set a source file of image or you can say image in your
image button to make your layout look attractive.
3. background: background attribute is used to set the background of an image button. We
can set a color or a drawable in the background of a Button.
4. padding: padding attribute is used to set the padding from left, right, top or bottom of the
ImageButton.

 paddingRight : set the padding from the right side of the image button.
 paddingLeft : set the padding from the left side of the image button.
 paddingTop : set the padding from the top side of the image button.
 paddingBottom : set the padding from the bottom side of the image button.
 padding : set the padding from the all side’s of the image button.

<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/home"
android:padding="30dp"/>

Checkbox:
CheckBox is a type of two state button either unchecked or checked in Android. Or you
can say it is a type of on/off switch that can be toggled by the users. You should
use checkbox when presenting a group of selectable options to users that are not mutually
exclusive.

Attributes of CheckBox :
1. id: id is an attribute used to uniquely identify a check box
2. checked: checked is an attribute of check box used to set the current state of a check box.
3. gravity: The gravity attribute is an optional attribute which is used to control the
alignment of the text in CheckBox like left, right, center, top, bottom, center_vertical,
center_horizontal etc.
4. text: text attribute is used to set the text in a check box.
5. textColor: textColor attribute is used to set the text color of a check box. Color value is in
form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.
6. textSize: textSize attribute is used to set the size of text of a check box. We can set the
text size in sp(scale independent pixel) or dp(density pixel).
7. textStyle: textStyle attribute is used to set the text style of the text of a check box. The
possible text styles are bold, italic and normal. If we need to use two or more styles for a text
view then “|” operator is used for that.
8. background: background attribute is used to set the background of a check box. We can
set a color or a drawable in the background of a check box.
9. padding: padding attribute is used to set the padding from left, right, top or bottom.

 paddingRight :set the padding from the right side of the check box.
 paddingLeft :set the padding from the left side of the check box.
 paddingTop :set the padding from the top side of the check box.
 paddingBottom :set the padding from the bottom side of the check box.
 Padding :set the padding from the all side’s of the check box.

<CheckBox
android:id="@+id/simpleCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple CheckBox"
android:checked="true"
android:gravity="right|center_vertical"
android:text="Text Attribute Of Check Box"/>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"

tools:context=".MainActivity">
<TextView
android:id="@+id/select"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30dp"
android:text="Select your food"/>
<CheckBox
android:id="@+id/pizza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/select"
android:text="Pizza"/>

<CheckBox
android:id="@+id/burger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/pizza"
android:text="Burger"/>

<CheckBox
android:id="@+id/tea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/burger"
android:text="Tea"/>

<Button
android:id="@+id/submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tea"
android:text="Submit"/>
</RelativeLayout>

Java File
package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

CheckBox pizza,tea,burger;
Button buttonOrder;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

pizza = findViewById(R.id.pizza);
tea = findViewById(R.id.tea);
burger = findViewById(R.id.burger);
buttonOrder = findViewById(R.id.submit);

buttonOrder.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int totalAmount = 0;
StringBuilder result = new StringBuilder();
result.append("Selected Items");

if (pizza.isChecked())
{
result.append("\n Pizza");
totalAmount+=100;
}
if (burger.isChecked())
{
result.append("\n Burger");
totalAmount+=150;
}
if (tea.isChecked())
{
result.append("\n Tea");
totalAmount+=10;
}
result.append("\nTotal: " + totalAmount + "Rs");
Toast.makeText(getApplicationContext(), result.toString(),
Toast.LENGTH_SHORT).show();

}
});
}
}

RadioButton and RadioGroup

RadioButton are mainly used together in a RadioGroup. In RadioGroup checking the one
radio button out of several radio button added in it will automatically unchecked all the
others.

It means at one time we can checked only one radio button from a group of radio buttons
which belong to same radio group.

RadioGroup is a widget used in Android for the grouping of radio buttons and provide the
feature of selecting only one radio button from the set.

When a user try to select any other radio button within same radio group the previously
selected radio button will be automatically unchecked.

Attributes

id: id is an attribute used to uniquely identify a radio button.

checked: checked attribute in radio button is used to set the current state of a radio button.

text: text attribute is used to set the text in a radio button.

gravity: The gravity attribute is an optional attribute which is used to control the alignment
of text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

textColor: textColor attribute is used to set the text color of a radio button.

textSize: textSize attribute is used to set the size of the text of a radio button.

textStyle: textStyle attribute is used to set the text style of the text of a radio button.

background: background attribute is used to set the background of a radio button. We can
set a color or a drawable in the background of a radio button.

drawableBottom, drawableTop, drawableLeft And drawableRight: These attribute draw the

drawable to the below of the text of RadioButton.

<RadioGroup
android:layout_width="wrap_content"
 android:layout_height="wrap_content">
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RadioButton
android:id="@+id/simpleRadioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RadioGroup>
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textSize="25sp"
android:textStyle="bold|italic"
android:padding="20dp"
android:layout_centerHorizontal="true"
android:text="Male"
android:textColor="#f00"
android:background="#000"/>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp"
tools:context=".frame">
<TextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Radio Button"
android:textSize="20dp"
android:gravity="center"
android:textColor="#f00"/>
 <RadioGroup
android:id="@+id/group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text1">
<RadioButton
android:id="@+id/male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"/>

<RadioButton
android:id="@+id/female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/male"
android:text="Female"/>

</RadioGroup>

<Button
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/group"
android:layout_marginTop="99dp"
android:layout_centerHorizontal="true"
android:text="Submit" />
</RelativeLayout>

Java File:

package com.example.ifcdiv;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;

public class frame extends AppCompatActivity {

RadioButton male,female;
Button b1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frame);

male=findViewById(R.id.male);
female=findViewById(R.id.female);
b1=findViewById(R.id.submit);

b1.setOnClickListener(new View.OnClickListener() {
 @Override
public void onClick(View v) {
String selected;
if(male.isChecked())
{
selected="You selected"+male.getText();
}
else
{
selected="You Selected"+female.getText();
}
Toast.makeText(getApplicationContext(),selected,Toast.LENGTH_LONG).show();
}
});

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.

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 horizontal bar then we need to change the style property to horizontal like style="?
android:attr/progressBarStyleHorizontal".

Attribute Description

android:id It is used to uniquely identify the control

android:minHeigh It is used to set the height of progress bar.
android:minWidth It is used to set the width of progress bar.
android:max It is used to set the maximum value of progress bar.
 Attribute Description

android:progress It is used to set the default progress value between 0 and max. It must be an integer
value.

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 database, etc.

To use Determinate progress, we need to set the style of progress bar

to Widget_ProgressBar_Horizontal or progressBarStyleHorizontal and set the amount of
progress using android:progress attribute.

<ProgressBar
android:id="@+id/pBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="100"
android:progress="50" />

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

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.

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/p1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<ProgressBar
android:id="@+id/p2"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/p1"
android:layout_centerVertical="true"
android:layout_marginTop="103dp" />

<ProgressBar
android:id="@+id/p3"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/p2"
android:layout_centerVertical="true"
android:layout_marginTop="118dp"
android:indeterminate="true" />
</RelativeLayout>

Example:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
tools:context=".MainActivity">

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="23dp"
android:layout_marginTop="20dp"
 android:indeterminate="false"
android:max="100"
android:minHeight="50dp"
android:minWidth="200dp"
android:progress="1" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/progressBar"
android:layout_below="@+id/progressBar"/>

</RelativeLayout>

Java File:

package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.os.Handler;

public class MainActivity extends AppCompatActivity {

private ProgressBar progressBar;
private int progressStatus = 0;
private TextView textView;
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

progressBar = (ProgressBar) findViewById(R.id.progressBar);

textView = (TextView) findViewById(R.id.textView);
// Start long running operation in a background thread
new Thread(new Runnable() {
public void run() {
while (progressStatus < 100) {
progressStatus += 1;
// Update the progress bar and display the
//current value in the text view
handler.post(new Runnable() {
public void run() {
progressBar.setProgress(progressStatus);
textView.setText(progressStatus+"/"+progressBar.getMax());
}
 });
try {
// Sleep for 200 milliseconds.
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();

}
}

ListView
ListView is used when you have to show items in a vertically scrolling list. Best example of it
is our device's Contact List.

With ListView, user can easily browse the information, while scrolling up and down. You
can set divider between every item and set its height and color as per your UI design.

Inside a ListView, we can show list of Text items by using TextView, or pictures using
ImageView, or any other view or a combination of views.

As ListView is generally used to display a large set of data, hence it is not feasible to
manually create list items for the complete data.

hence Android provides us with special Adapter classes which can be used to supply data
from datasets to ListView.

Attribute Description

android:divider Using this attribute we can specify a divider between List items. A
drawable or any color can be specified as a value for this attribute.

android:dividerHeight Used to specify height of the divider.

<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@android:color/black"
android:dividerHeight="1dp"/>
 Example

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
tools:context=".MainActivity">

<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffeb00"
android:dividerHeight="1dp" />

</RelativeLayout>

List_item.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="@+id/textview"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="4dp"
android:textColor="#0000FF" />

Java File

package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

ListView listView;
 TextView t1;
String[] festivals={"Diwali","Holi","Christmas","Eid"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listView=findViewById(R.id.list);
t1=findViewById(R.id.textview);

ArrayAdapter adapter=new ArrayAdapter(this,R.layout.list_item,R.id.textview,festivals);

listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
String element="Festival Is: "+adapter.getItem(position);
Toast.makeText(getApplicationContext(),element,Toast.LENGTH_LONG).show();
}
});
}
}

GridView

GridView just works like ListView, . The only difference is that GridView is used to display
grid of View objects.
The view objects can be a Text view, an Image view or a view group which has both an
image and some text.
Best example for this view is phone gallery which shows images in a grid.
We can set number of columns to specific number and auto-fit the images into the columns.
Vertical and horizontal spacing between every single items of gridView can be set
by verticalSpacing and horizontalSpacing.
GridView Attributes

android:id
This is the ID which uniquely identifies the layout.
android:columnWidth
This specifies the fixed width for each column. This could be in px, dp, sp, in, or mm.
android:gravity
Specifies the gravity within each cell. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
android:horizontalSpacing
Defines the default horizontal spacing between columns. This could be in px, dp, sp, in, or
mm.
android:numColumns
Defines how many columns to show. May be an integer value, such as "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.
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
Defines the default vertical spacing between rows. This could be in px, dp, sp, in, or mm.

Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
tools:context=".MainActivity">

<GridView
android:id="@+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffeb00"
android:dividerHeight="1dp"
android:numColumns="2"/>

</RelativeLayout>

List_item.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="@+id/textview"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="4dp"
android:textColor="#0000FF" />

Java File
package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

GridView gridView;
TextView t1;
 String[] festivals={"Diwali","Holi","Christmas","Eid"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

gridView=findViewById(R.id.grid);
t1=findViewById(R.id.textview);

ArrayAdapter adapter=new ArrayAdapter(this,R.layout.list_item,R.id.textview,festivals);

gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
String element="Festival Is: "+adapter.getItem(position);
Toast.makeText(getApplicationContext(),element,Toast.LENGTH_LONG).show();
}
});

}
}

ImageView

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.
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="@drawable/img_nature"/>

Attributes of ImageView:

id: id is an attribute used to uniquely identify a image view in android.

src: src is an attribute used to set a source file

background: background attribute is used to set the background of a ImageView.

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.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/lion"
android:padding="30dp"/>

ScrollView

ScrollView is used to scroll the child elements of palette inside ScrollView.

Android supports vertical scroll view as default scroll view.

Vertical ScrollView scrolls elements vertically.

Android uses HorizontalScrollView for horizontal ScrollView.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
<TextView

android:id="@+id/textView"
android:layout_gravity="center_horizontal" />

<ScrollView android:layout_marginTop="30dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/scrollView">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5" />
 <Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 7" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 8" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 9" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 10" />

</LinearLayout>
</ScrollView>
</RelativeLayout>

DatePicker and TimePicker

DatePicker and TimePicker are used to display date and time selection widget in android
application.

They can be used in either spinner mode or calendar mode ( date picker), clock mode ( time
picker ).

DatePicker Properties:

datePickerMode :
Value can be spinner or calendar. If set to calendar, it will display a calendar which let you
choose date. If set to spinner, it will display a spinner to let you choose date.
DatePicker Calendar Mode DatePicker Spinner Mode

calendarViewShown :
This is a boolean value, only take effect when datePickerMode is calendar. If set to true, it
will display a calendar.

spinnersShown :
This is a boolean value also, only take effect when datePickerMode is spinner. If set to true,
it will display a spinner.

If both above two properties set to true of false, it will show both a spinner besides a
calendar.

minDate : Set the optional minimum date in mm/dd/yyy format.

maxDate : Set the maximum date to select, format is mm/dd/yyyy.

startYear : Set optional start year.

endYear : Set optional end year.

TimePicker Properties

timePickerMode :

Value can be spinner or clock. When set it’ value to clock, it will display a clock. When set
is’s value to spinner will display a spinner.
 TimePicker Clock Mode TimePicker Spinner Mode

headerBackground : This is a Color or Drawable resource id which can be set to

TimePicker’s header background.
is24HourView() : Check whether it is 24 hour time system.
setIs24HourView(boolean 24HourView) : Set if use 24 hour time system.
getHour() : Get current hour integer value.
getMinute() : Get current minute integer value.

Example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
tools:context=".MainActivity">

<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/in_date"
android:layout_marginTop="82dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

<Button
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:text="SELECT DATE"
android:id="@+id/btn_date"
android:layout_alignBottom="@+id/in_date"
android:layout_toRightOf="@+id/in_date"
android:layout_toEndOf="@+id/in_date" />

<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/in_time"
android:layout_below="@+id/in_date"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SELECT TIME"
android:id="@+id/btn_time"
android:layout_below="@+id/btn_date"
android:layout_alignLeft="@+id/btn_date"
android:layout_alignStart="@+id/btn_date" />

</RelativeLayout>

Java File:
package com.example.ifcdiv;
import androidx.appcompat.app.AppCompatActivity;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

Button selectDate, selectTime;
EditText date, time;
DatePickerDialog datePickerDialog;
TimePickerDialog timePickerDialog;
int year;
int month;
 int dayOfMonth;
int hours;
int minutes;
Calendar calendar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

selectDate = findViewById(R.id.btn_date);
selectTime = findViewById(R.id.btn_time);
date = findViewById(R.id.in_date);
time = findViewById(R.id.in_time);

selectDate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
calendar = Calendar.getInstance();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH);
dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH);
datePickerDialog=new DatePickerDialog(MainActivity.this, new
DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
date.setText(dayOfMonth + "/" + (month + 1) + "/" + year);
}
},year,month,dayOfMonth);

datePickerDialog.show();
}
});

selectTime.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Calendar c = Calendar.getInstance();
hours = c.get(Calendar.HOUR_OF_DAY);
minutes = c.get(Calendar.MINUTE);
timePickerDialog=new TimePickerDialog(MainActivity.this, new
TimePickerDialog.OnTimeSetListener() {
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
time.setText(hourOfDay + ":" + minute);
}
},hours,minutes,false);
timePickerDialog.show();
}
});
 }
}