1

Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Chapter 4 Designing User Interface with View

Q1. State syntax to create Text View and Image button with any two attributes of each.

(S-22 – 4 Marks)

[Link]

➢ The TextView view is used to display text to the user.

➢ In Android, TextView displays text to the user and optionally allows them to
edit it programmatically.
➢ TextView is a complete text editor, however basic class is configured to not
allow editing but we can edit it.

TextView code in XML:

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Mountreach Academy " />

TextView code in JAVA:

TextView textView = (TextView) findViewById([Link]);

[Link]("Mountreach Academy"); //set text for text view

Attributes of Textview:-

MR. NIKHIL SHENDE |

 2
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]. Attribute & Description

1 android:id

Unique ID for the control.

2 android:text

Text to display.

3 android:textColor

Defines text color.

4 android:textSize

Sets text size in "sp" or “dp”.

5 android:textStyle

Sets text style (bold, italic, normal)

6 android:textAllCaps

Present the text in All Capital word. Possible value either "true" or "false".

7 android:textIsSelectable

Makes text selectable. Possible value either "true" or "false".

MR. NIKHIL SHENDE |

 3
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

8 android:textColorHighlight

Color of the text selection highlight.

9 android:fontFamily

Define the Font for the text.

10 android:gravity

Aligns text within the view.

11 android:editable

Makes TextView editable (true/false).

12 android:maxHeight

Sets maximum height of TextView.

13 android:maxWidth

Sets maximum width of TextView.

14 android:minHeight

Sets minimum height of TextView.

MR. NIKHIL SHENDE |

 4
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

15 android:minWidth

Sets minimum width of TextView.

16 android:textColorHint

Defines hint text color.

17 android:background

background attribute is used to set the background of a text view.

18 android:padding

padding attribute is used to set the padding from left, right, top or bottom.

Example:-

activity_main.xml

<RelativeLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16sp "

>

MR. NIKHIL SHENDE |

 5
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<TextView

android:id="@+id/simpleTextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:text="Before Clicking"

android:textColor="#f00"

android:textSize="25sp"

android:textStyle="bold|italic"

android:layout_marginTop="50dp"/>

<Button

android:id="@+id/btnChangeText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:background="#f00"

android:padding="10dp"

android:text="Change Text"

MR. NIKHIL SHENDE |

 6
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textColor="#fff"

android:textStyle="bold" />

</RelativeLayout>

[Link]

package [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

MR. NIKHIL SHENDE |

 7
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

setContentView([Link].activity_main); //set the layout

final TextView simpleTextView = (TextView) findViewById([Link]

tView); //get the id for TextView

Button changeText = (Button) findViewById([Link]); //get the i

d for button

[Link](new [Link]() {

@Override

public void onClick(View view) {

[Link]("After Clicking"); //set the text after clicking bu

tton

});

Output:-

MR. NIKHIL SHENDE |

 8
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

Q2. Name any four attributes of Edit Text control. (S-23 – 2 Marks)

➢ EditText is a user interface (UI) widget in Android that allows users to

enter and edit text.
➢ It is a subclass of TextView, designed specifically for user input.
➢ We often use EditText in our applications in order to provide an input or
text field, especially in forms.
➢ The most simple example of EditText is Login or Sign-in form.

XML Attributes of Edittext in Android

Attributes Descri ption

android:id Used to uniquely identify the control

MR. NIKHIL SHENDE |

 9
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Attributes Descri ption

Used to specify how to align the text like left, right,

android:gravity
center, top, etc.

android:hint Used to display the hint text when text is empty

android:text Used to set the text of the EditText

android:textSize Used to set size of the text.

android:textColor Used to set color of the text.

Used to set style of the text. For example, bold, italic,

android:textStyle
bolditalic, etc.

android:textAllCaps Used this attribute to show the text in capital letters.

It makes the TextView be exactly this many pixels

android:width
wide.

It makes the TextView be exactly this many pixels

android:height
tall.

Used to make the TextView be at most this many

android:maxWidth
pixels wide.

MR. NIKHIL SHENDE |

 10
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Attributes Descri ption

Used to make the TextView be at least this many

android:minWidth
pixels wide.

android:background Used to set background to this View.

android:backgroundTint Used to set tint to the background of this view.

Used to set true when you want to make this View

android:clickable
clickable. Otherwise, set false.

Used to set drawable to bottom of the text in this

android:drawableBottom
view.

android:drawableEnd Used to set drawable to end of the text in this view.

android:drawableLeft Used to set drawable to left of the text in this view.

android:drawablePadding Used to set padding to drawable of the view.

android:drawableRight Used to set drawable to right of the text in this view.

android:drawableStart Used to set drawable to start of the text in this view.

android:drawableTop Used to set drawable to top of the text in this view.

MR. NIKHIL SHENDE |

 11
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Attributes Descri ption

android:elevation Used to set elevation to this view.

Example:-
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center">

<EditText

android:id="@+id/edittext_id"

android:layout_width="300dp"

android:layout_height="40dp"

android:hint="Enter your Name"/>

<Button

android:id="@+id/button_id"

android:layout_width="300dp"

android:layout_height="40dp"

MR. NIKHIL SHENDE |

 12
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:layout_below="@+id/edittext_id"

android:layout_marginTop="20dp"

android:text="Submit"

android:textColor="#fff"

android:background="@color/colorPrimary"/>

</RelativeLayout>

[Link]

package [Link];

import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends AppCompatActivity {

private EditText editText;

private Button button;

@Override
protected void onCreate(Bundle savedInstanceState)

MR. NIKHIL SHENDE |

 13
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

{
[Link](savedInstanceState);
setContentView([Link].activity_main);

editText
= (EditText)findViewById([Link].edittext_id);
button
= (Button)findViewById([Link].button_id);

[Link](
new [Link]() {

@Override
public void onClick(View v)
{
String name
= [Link]()
.toString();
[Link]([Link],
"Welcome to Mountreach Academy "
+ name,
Toast.LENGTH_SHORT)
.show();
}
});
}
}

MR. NIKHIL SHENDE |

 14
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Output:-

[Link]

Q. Write a program to create first display screen of any search engine using
auto complete text view. (S-24 – 4 Mark)

➢ AutoCompleteTextView is an enhanced version of EditText that provides

auto-suggestions as the user types.
➢ It is useful for search boxes, dropdowns, and input fields that require
predictive text.

MR. NIKHIL SHENDE |

 15
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

➢ This type of AutoCompleteTextview we can see while we register on some

app.
➢ If we type “In” it will suggest India, Indonesia, West Indies and etc. Like
this, the AutoCompleteTextView works.

AutoCompleteTextView Attributes

Following are the important attributes related to AutoCompleteTextView control.

[Link] 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 Sets the minimum number of characters a user must type before showing
dropdown suggestions.

android:dropDownAnchor
4 This specifies the View to which the AutoCompleteTextView dropdown
should be anchored.

5 android:dropDownHeight

MR. NIKHIL SHENDE |

 16
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

This specifies the basic height of the dropdown.

android:dropDownHorizontalOffset
6
Sets the horizontal offset (in pixels) for the dropdown, shifting it left or right.

android:dropDownSelector
7
Sets the background of a selected item in the dropdown list.

android:dropDownVerticalOffset
8
Sets the vertical offset (in pixels) for the dropdown, shifting it up or down.

android:dropDownWidth
9
This specifies the basic width of the dropdown.

android:popupBackground
10
This sets the background.

MR. NIKHIL SHENDE |

 17
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Example:

activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="20dp"

android:gravity="center"

>

<!-- Title -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Search Engine"

android:textSize="24sp"

android:textStyle="bold"

android:textColor="#000"

android:layout_marginBottom="20dp"/>

MR. NIKHIL SHENDE |

 18
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<!-- AutoCompleteTextView for Search -->

<AutoCompleteTextView

android:id="@+id/autoCompleteSearch"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Search here..."

android:textSize="16sp"

android:padding="10dp"/>

<!-- Search Button -->

<Button

android:id="@+id/searchButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Search"

android:textSize="18sp"

android:backgroundTint="#007BFF"

android:textColor="#FFFFFF"

android:layout_marginTop="15dp"/>

MR. NIKHIL SHENDE |

 19
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

</LinearLayout>

[Link]

package [Link];

import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);

// Initialize UI components
AutoCompleteTextView autoCompleteSearch =
findViewById([Link]);
Button searchButton = findViewById([Link]);

// List of popular search suggestions

String[] searchSuggestions = {

MR. NIKHIL SHENDE |

 20
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

"Android Development", "Artificial Intelligence", "Blockchain

Technology",
"Cyber Security", "Data Science", "Machine Learning",
"Python Programming", "Java Tutorials", "Web Development", "Cloud
Computing"
};

// Create an ArrayAdapter for suggestions

//ArrayAdapter to manage and display list
ArrayAdapter<String> adapter = new ArrayAdapter<>(
this, [Link].simple_dropdown_item_1line,
searchSuggestions);

// Set adapter to AutoCompleteTextView

[Link](adapter);

// Set click listener for Search Button

[Link](new [Link]() {
@Override
public void onClick(View v) {
String query = [Link]().toString().trim();
if (![Link]()) {
[Link]([Link], "Searching for: " + query,
Toast.LENGTH_SHORT).show();
} else {
[Link]([Link], "Please enter a search query",
Toast.LENGTH_SHORT).show();

MR. NIKHIL SHENDE |

 21
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

}
}
});
}
}
Output:-

MR. NIKHIL SHENDE |

 22
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

➢ In Android applications, a Button is a user interface that is used to perform

some action when clicked or tapped.
➢ It is a very common widget in Android and developers often use it.
➢ In Android, Button represents a push button. A Push buttons can be clicked,
or pressed by the user to perform an action.
➢ There are different types of buttons used in android such as
CompoundButton, ToggleButton, RadioButton.

XML Attributes of Button Widget

XML Attributes Description

android:id Used to specify the id of the view.

android:text Used to the display text of the button.

MR. NIKHIL SHENDE |

 23
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

XML Attributes Description

android:textColor Used to the display color of the text.

android:textSize Used to the display size of the text.

android:textStyle Used to the display style of the text like Bold, Italic, etc.

android:textAllCaps Used to display text in Capital letters.

android:background Used to set the background of the view.

android:padding Used to set the padding of the view.

android:visibility Used to set the visibility of the view.

Used to specify the gravity of the view like center, top,

android:gravity
bottom, etc

Example:-

activity_main.xml

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

<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"

MR. NIKHIL SHENDE |

 24
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:padding="20dp">

<EditText
android:id="@+id/numberInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter a number"
android:inputType="number"/>

<Button
android:id="@+id/calculateButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Calculate Factorial"/>

<TextView
android:id="@+id/resultText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Result will be displayed here"
android:textSize="18sp"
android:padding="10dp"/>

</LinearLayout>

MR. NIKHIL SHENDE |

 25
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

package [Link].madbatch2025;

import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);

// Get references to UI elements

EditText numberInput = findViewById([Link]);
Button calculateButton = findViewById([Link]);
TextView resultText = findViewById([Link]);

// Set click listener on button

[Link](new [Link]() {
@Override

MR. NIKHIL SHENDE |

 26
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

public void onClick(View v) {

String input = [Link]().toString();
// Convert input to integer
int number = [Link](input);

// Calculate factorial
long factorial = calculateFactorial(number);

// Display result
[Link]("Factorial: " + factorial);
}
});
}

// Method to calculate factorial

private long calculateFactorial(int num) {
long fact = 1;
for (int i = 1; i <= num; i++) {
fact *= i;
}
return fact;
}
}

MR. NIKHIL SHENDE |

 27
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Output:-

MR. NIKHIL SHENDE |

 28
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

➢ 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.
➢ An image on a button can be set in XML using the src attribute or in Java
using setImageResource()

ImageButton Attributes

[Link] Attribute & Description

android:id
1
id is an attribute used to uniquely identify a image button

android:src

2 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

android:background

3 :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 android:visibility

MR. NIKHIL SHENDE |

 29
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

This controls the initial visibility of the view.

Android:padding

5 padding attribute is used to set the padding from left, right, top or bottom of
the ImageButton.

Example:-

activity_main.xml

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

<LinearLayout
xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:gravity="center"
>

<ImageButton
android:id="@+id/imageButtonAndroid"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#005"
android:padding="20dp"

MR. NIKHIL SHENDE |

 30
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:scaleType="fitXY"
android:src="@drawable/android" />

<ImageButton
android:id="@+id/imageButtonPython"
android:layout_width="match_parent"
android:layout_height="250sp"
android:layout_marginTop="20dp"
android:background="#005"
android:scaleType="fitXY"
android:padding="20dp"
android:src="@drawable/python" />

</LinearLayout>

[Link]

package [Link].madbatch2025;

//package packnamename;

//import classpath

import [Link];

import [Link];

import [Link];

MR. NIKHIL SHENDE |

 31
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

//accesss class classname extends classname

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

ImageButton imageButtonAndroid =
(ImageButton)findViewById([Link]);

ImageButton imageButtonPython =
(ImageButton)findViewById([Link]);

// perform click event on button's

[Link](new [Link]() {

@Override

public void onClick(View view) {

[Link](getApplicationContext(),"Android Image Button

Click",Toast.LENGTH_LONG).show();// display the toast on home button click

MR. NIKHIL SHENDE |

 32
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

});

[Link](new [Link]() {

@Override

public void onClick(View view) {

[Link](getApplicationContext(),"Python Image Button

Click",Toast.LENGTH_LONG).show();// display the toast on you tube button click

});

Output:-

MR. NIKHIL SHENDE |

 33
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link] BUTTON

➢ ToggleButton is basically a on/off button with indicator light.

➢ ToggleButton is widely used, some examples are on/off audio, Bluetooth,
WiFi, hot-spot etc.
➢ This is a subclass of Composite Button.
➢ Programmatically, isChecked() method is used to check the current state of
the toggle button.
➢ This method returns a boolean value. If a toggle button is ON, this returns
true otherwise it returns false.

ToggleButton Attributes

Following are the important attributes related to ToggleButton control.

[Link]. 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.

MR. NIKHIL SHENDE |

 34
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Example:-

activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="16dp"

android:gravity="center">

<EditText

android:id="@+id/editTextTemp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Enter Temperature"

android:inputType="numberDecimal"

android:padding="10dp"

android:textSize="16sp"/>

MR. NIKHIL SHENDE |

 35
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<ToggleButton

android:id="@+id/toggleButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textOn="Celsius to Fahrenheit"

android:textOff="Fahrenheit to Celsius"

android:checked="true"

android:layout_marginTop="16dp"/>

<Button

android:id="@+id/btnConvert"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Convert"

android:layout_marginTop="16dp"/>

<TextView

android:id="@+id/textViewResult"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

MR. NIKHIL SHENDE |

 36
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:text="Result: "

android:textSize="18sp"

android:textStyle="bold"

android:layout_marginTop="16dp"/>

</LinearLayout>

[Link]

package [Link].madbatch2025;

//package packnamename;

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

EditText editTextTemp;

ToggleButton toggleButton;

MR. NIKHIL SHENDE |

 37
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Button btnConvert;

TextView textViewResult;

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

// Initializing UI components

editTextTemp = findViewById([Link]);

toggleButton = findViewById([Link]);

btnConvert = findViewById([Link]);

textViewResult = findViewById([Link]);

// Button Click Listener

[Link](new [Link]() {

@Override

public void onClick(View v) {

String input = [Link]().toString();

double temp = [Link](input);

double convertedTemp;

MR. NIKHIL SHENDE |

 38
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

String resultText;

if ([Link]()) {

// Celsius to Fahrenheit

convertedTemp = (temp * 9/5) + 32;

resultText = [Link]("%.2f", convertedTemp) + "°F";

} else {

// Fahrenheit to Celsius

convertedTemp = (temp - 32) * 5/9;

resultText = [Link]("%.2f", convertedTemp) + "°C";

[Link](resultText);

});

Output:-

MR. NIKHIL SHENDE |

 39
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

MR. NIKHIL SHENDE |

 40
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link] AND RADIOGROUP:-

➢ RadioButton is a widget which provides functionality to choose a single

option from group of choice/set.
➢ It means at one time we can checked only one radio button from a group of
radio buttons which belong to same radio group.
➢ Hence, Radio Buttons are used inside a RadioGroup.
➢ Radio Button has two states either checked or unchecked
➢ A RadioGroup in Android is a container that holds multiple RadioButton
and ensures that only one RadioButton can be selected at a time.

For Example:-

Attributes of RadioButton and RadioGroup

1. id: id attribute used to uniquely identify a radio button.

2. checked: checked attribute in radio button is used to set the current state of a
radio button. We can set it either true or false where true shows the checked
state and false shows unchecked state of a radio button.
3. text: text attribute is used to set the text in a radio button.

MR. NIKHIL SHENDE |

 41
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4. gravity: The gravity attribute controls the alignment of text like left, right,
center, top, bottom, center_vertical, center_horizontal etc.
5. textColor: textColor attribute is used to set the text color of a radio button.
6. textSize: textSize attribute is used to set the size of the text of a radio button.
7. textStyle: textStyle attribute is used to set the text style of the text of a radio
button. The possible text styles are bold, italic and normal.
8. 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.
9. padding: padding attribute is used to set the padding from left, right, top or
bottom.

Example:-

activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="16sp"

android:gravity="center"

>

MR. NIKHIL SHENDE |

 42
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<TextView

android:id="@+id/text1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Radio Button"

android:textSize="20dp"

android:textColor="#f00"

android:textStyle="bold"/>

<RadioGroup

android:id="@+id/group"

android:layout_width="match_parent"

android:layout_height="wrap_content"

>

<RadioButton

android:id="@+id/male"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Male"/>

<RadioButton

android:id="@+id/female"

MR. NIKHIL SHENDE |

 43
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Female"/>

</RadioGroup>

<Button

android:id="@+id/submit"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:text="Submit" />

</LinearLayout>

[Link]

package [Link].madbatch2025;

//package packnamename;

//import classpath

import [Link];

import [Link];

import [Link];

import [Link];

MR. NIKHIL SHENDE |

 44
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

//accesss class classname extends classname

public class MainActivity extends AppCompatActivity {

RadioButton rbMale,rbFemale;

Button b1;

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

rbMale=findViewById([Link]);

rbFemale=findViewById([Link]);

b1=findViewById([Link]);

[Link](new [Link]()

@Override

public void onClick(View v)

MR. NIKHIL SHENDE |

 45
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

String selected;

if([Link]())

selected="You selected "+[Link]().toString();

else

selected="You Selected "+[Link]().toString();

[Link](getApplicationContext(),selected,Toast.LENGTH_LONG).sho
w();

});

MR. NIKHIL SHENDE |

 46
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Output:-

MR. NIKHIL SHENDE |

 47
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

[Link] a program to show five checkboxes and toast selected checkboxes using
linear layout. S-24 – 6 Marks

[Link] any four attributes of check box. S- 22 2Marks

➢ In Android, a Checkbox is a UI component that allows users to select one or

more options from a set.
➢ Android CheckBox class is the subclass of CompoundButton class.
➢ It has two states checked or unchecked.
➢ Use a CheckBox when you want to let users select multiple options from a
list that are not mutually exclusive.
➢ It is not mutually exclusive, meaning users can select more than one option
at a time.

Attributes of CheckBox

➢ id: id attribute used to uniquely identify a CheckBox.

➢ checked: Sets the initial state (checked/unchecked)
➢ text: text attribute is used to set the text in a CheckBox.
➢ gravity: The gravity attribute controls 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 CheckBox.
➢ textSize: textSize attribute is used to set the size of the text of a CheckBox.
➢ textStyle: textStyle attribute is used to set the text style of the text of a
CheckBox. The possible text styles are bold, italic and normal.
➢ background: background attribute is used to set the background of a
Checkbox. We can set a color or a drawable in the background of a radio
button.

MR. NIKHIL SHENDE |

 48
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

➢ padding: padding attribute is used to set the padding from left, right, top or
bottom.

Activity_main.xml

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

<LinearLayout xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="20dp">

<CheckBox

android:id="@+id/checkBox1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 1" />

<CheckBox

android:id="@+id/checkBox2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

MR. NIKHIL SHENDE |

 49
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:text="Option 2" />

<CheckBox

android:id="@+id/checkBox3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 3" />

<CheckBox

android:id="@+id/checkBox4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 4" />

<CheckBox

android:id="@+id/checkBox5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 5" />

MR. NIKHIL SHENDE |

 50
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<Button

android:id="@+id/btnSubmit"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Show Selected"

android:layout_marginTop="20dp" />

</LinearLayout>

Example:-

[Link]

package [Link].madbatch2025;

//package packnamename;

//import classpath

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

MR. NIKHIL SHENDE |

 51
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

public class MainActivity extends AppCompatActivity {

CheckBox checkBox1, checkBox2, checkBox3, checkBox4, checkBox5;

Button btnSubmit;

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

// Initialize checkboxes and button

checkBox1 = findViewById([Link].checkBox1);

checkBox2 = findViewById([Link].checkBox2);

checkBox3 = findViewById([Link].checkBox3);

checkBox4 = findViewById([Link].checkBox4);

checkBox5 = findViewById([Link].checkBox5);

btnSubmit = findViewById([Link]);

// Button click listener

[Link](new [Link]() {

@Override

public void onClick(View v) {

//StringBuilder: This is a Java class used to efficiently build and modify

strings dynamically.

MR. NIKHIL SHENDE |

 52
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

// Unlike String, which is immutable (cannot be changed once created),

// StringBuilder allows modifications without creating new objects every time.

StringBuilder selectedOptions = new StringBuilder();

if ([Link]())

//The append() method in Java's StringBuilder class is used to add

(concatenate) new content to the existing

// StringBuilder object without creating a new object each time.

[Link]([Link]());

if ([Link]())

[Link]([Link]());

if ([Link]()){

[Link]([Link]());

if ([Link]()){

[Link]([Link]());

MR. NIKHIL SHENDE |

 53
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

if ([Link]()){

[Link]([Link]());}

// Show Toast with selected checkboxes

[Link]([Link], [Link](),
Toast.LENGTH_SHORT).show();

});

Output:-

MR. NIKHIL SHENDE |

 54
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]

Q. Write a program to display a rectangular progress bar. W -22 4 Marks

➢ ProgressBars are used as loading indicators in android applications.

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

➢ Its syntax is.

ProgressDialog progress = new ProgressDialog(this);

MR. NIKHIL SHENDE |

 55
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

➢ Apart from these methods, there are other methods that are provided by the
ProgressDialog class

Sr. Title & description

No

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.

MR. NIKHIL SHENDE |

 56
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Example:-

activity_main.xml

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

<LinearLayout xmlns:android="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">

<ProgressBar
android:id="@+id/progressBar"
style="@android:style/[Link]"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:indeterminate="false"
android:max="100"
android:minHeight="50dp"
android:minWidth="200dp"
android:progress="1" />

MR. NIKHIL SHENDE |

 57
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<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"/>
</LinearLayout>

[Link]

package [Link].madbatch2025;
//package pcknamename;
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar;
private int progressStatus = 0;
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);

MR. NIKHIL SHENDE |

 58
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

progressBar = (ProgressBar) findViewById([Link]);

textView = (TextView) findViewById([Link]);

// Start long running operation in a background thread

new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus <100)
{
progressStatus +=1;

//A Handler in Android is used to communicate between threads.

// It helps perform tasks on the Main (UI) Thread from a Background Thread.
new Handler([Link]()).post(new Runnable() {
@Override
public void run() {
[Link](progressStatus);
[Link](progressStatus + " / " + [Link]());
}
});
try {
[Link](200);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
}

MR. NIKHIL SHENDE |

 59
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

}
}).start();
}
}

Output:-

MR. NIKHIL SHENDE |

 60
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.2.3 IMAGEVIEW

➢ ImageView is a UI component in Android used to display images in an

application.
➢ Image file is easy to use but hard to master in Android, because of the various
screen sizes in Android devices.
➢ It allows you to set images from various sources such as drawables,
assets,storage, or URLs.
➢ ImageView comes with different configuration options to support different
scale types.
➢ Some of them scaleTypes configuration properties are center, center_crop,
fit_xy, fitStart etc.

➢ Below is an ImageView code in XML:

XML Attributes of ImageView

XML Attribute Description

android:id To uniquely identify an image view

android:src/app:srcCompat To add the file path of the inserted image

To provide a background color to the inserted

android:background
image

android:layout_width To set the width of the image

MR. NIKHIL SHENDE |

 61
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

XML Attribute Description

android:layout_height To set the height of the image

To add padding to the image from the left, right,

android:padding
top, or bottom of the view

android:scaleType To re-size the image

Example:-

activity_main.xml

<LinearLayout

xmlns:

android=[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<ImageView

android:id="@+id/simpleImageViewLion"

android:layout_width="fill_parent"

MR. NIKHIL SHENDE |

 62
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:layout_height="200dp"

android:scaleType="fitXY"

android:src="@drawable/lion" />

<ImageView

android:id="@+id/simpleImageViewMonkey"

android:layout_width="fill_parent"

android:layout_height="200dp"

android:layout_below="@+id/simpleImageViewLion"

android:layout_marginTop="10dp"

android:scaleType="fitXY"

android:src="@drawable/monkey" />

</LinearLayout>

[Link]

package [Link];

import [Link];

import [Link];

MR. NIKHIL SHENDE |

 63
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

ImageView simpleImageViewLion = (ImageView) findViewById([Link]

ImageViewLion);//get the id of first image view

ImageView simpleImageViewMonkey = (ImageView) findViewById([Link]

mpleImageViewMonkey);//get the id of second image view

[Link](new [Link]() {

@Override

public void onClick(View view) {

MR. NIKHIL SHENDE |

 64
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link](getApplicationContext(), "Lion", Toast.LENGTH_LON

G).show();//display the text on image click event

});

[Link](new [Link]() {

@Override

public void onClick(View view) {

[Link](getApplicationContext(), "Monkey", Toast.LENGTH_L

ONG).show();//display the text on image click event

});

Output:-

MR. NIKHIL SHENDE |

 65
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.2 LISTVIEW

➢ A ListView is a type of AdapterView that displays a vertical list of

scrollable views and each view is placed one below the other.
➢ Using adapter, items are inserted into the list from an array or database.
➢ For displaying the items in the list method setAdaptor() is used.
➢ setAdaptor() method conjoins an adapter with the list.
➢ The main purpose of the adapter is to fetch data from an array or database
and insert each item that placed into the list for the desired result.

XML Attributes of ListView

Attribute Description

android:divider A color or drawable to separate list items.

MR. NIKHIL SHENDE |

 66
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Attribute Description

android:dividerHeight Divider’s height.

Reference to an array resource that will

android:entries
populate the ListView.

When set to false, the ListView will not draw

android:footerDividersEnabled
the divider before each footer view.

When set to false, the ListView will not draw

android:headerDividersEnabled
the divider before each header view.

Example

activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ListView

MR. NIKHIL SHENDE |

 67
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:id="@+id/list"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</LinearLayout>

[Link]

import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends AppCompatActivity {

ListView l;
String tutorials[]
= { "Algorithms", "Data Structures”, "Languages", "Interview Corner",
"GATE", "ISRO CS","UGC NET CS", "CS Subjects", "Web
Technologies" };

@Override
protected void onCreate(Bundle savedInstanceState)
{
[Link](savedInstanceState);
setContentView([Link].activity_main);

MR. NIKHIL SHENDE |

 68
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

l = findViewById([Link]);
ArrayAdapter<String> arr;
arr
= new ArrayAdapter<String>(
this, [Link].support_simple_spinner_dropdown_item,
tutorials);
[Link](arr);
}
}
Output

MR. NIKHIL SHENDE |

 69
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.2.2 GRIDVIEW
➢ A GridView is a type of AdapterView that displays items in a two-
dimensional scrolling grid.
➢ Items are inserted into this grid layout from a database or from an array.
➢ For displaying the items in the GridView method setAdapter() is used.
➢ The main function of the adapter in GridView is to fetch data from a database
or array and insert each piece of data in an appropriate item that will be
displayed in GridView.

This is what the GridView structure looks like.

XML Attributes of GridView

• android:numColumns: This attribute of GridView will be used to

decide the number of columns that are to be displayed in Grid.
• android:horizontalSpacing: This attribute is used to define the spacing
between two columns of GridView.
• android:verticalSpacing: This attribute is used to specify the spacing
between two rows of GridView.

MR. NIKHIL SHENDE |

 70
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Example:-

activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:stretchColumns="1"

>

<GridView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/gridview1"

android:numColumns="auto_fit"

android:columnWidth="100dp"

android:stretchMode="columnWidth"

android:gravity="center"

/>

MR. NIKHIL SHENDE |

 71
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

</LinearLayout>

[Link]

//package packnamename;

import [Link];

import [Link];

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

GridView gridView;

static final String[] alphabets = new String[]{

"A", "B", "C", "D", "E",

"F", "G", "H", "I", "J",

"K", "L", "M", "N", "O",

"P", "Q", "R", "S", "T",

"U", "V", "W", "X", "Y", "Z"

};

ArrayAdapter adapter;

@Override

MR. NIKHIL SHENDE |

 72
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

//Grid View

gridView = (GridView) findViewById([Link].gridview1);

adapter = new ArrayAdapter<String>(this,

[Link].simple_dropdown_item_1line, alphabets);

[Link](adapter);

Output

MR. NIKHIL SHENDE |

 73
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.2.4 SCROLLVIEW

➢ In Android, a ScrollView is a view group that is used to make vertically

scrollable views.
➢ A scrollview contains a single direct child only.
➢ In order to place multiple views in the scroll view, make a view
group(like LinearLayout) as a direct child and then we can define many
views inside it.
➢ A ScrollView supports Vertical scrolling only, so in order to create a
horizontally scrollable view, HorizontalScrollView is used.

XML attributes of ScrollView

Attribute Description

Defines whether the scrollview should stretch its content

android:fillViewport
to fill the viewport.

Attributes Description

alpha property of the view, as a value between 0

android:alpha (completely transparent) and 1 (completely
opaque).

android:background A drawable to use as the background.

MR. NIKHIL SHENDE |

 74
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Attributes Description

android:clickable Defines whether this view reacts to click events.

Defines text that briefly describes content of the

android:contentDescription
view.

android:id Uniquely identify the View or View group

android:minHeight Defines the minimum height of the view.

android:minWidth Defines the minimum width of the view.

android:padding Sets the padding, in pixels, of all four edges.

Defines which scrollbars should be displayed on

android:scrollbars
scrolling or not.

Example:-

activity_main.xml

<RelativeLayout

xmlns:android="[Link]

MR. NIKHIL SHENDE |

 75
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:layout_width="match_parent"

android:layout_height="match_parent"

>

<ScrollView

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:scrollbars="vertical">

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_margin="20dp"

android:orientation="vertical">

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:background="#f00"

android:text="Button 1"

MR. NIKHIL SHENDE |

 76
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#0f0"

android:text="Button 2"

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#00f"

android:text="Button 3"

MR. NIKHIL SHENDE |

 77
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#ff0"

android:text="Button 4"

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#f0f"

android:text="Button 5"

MR. NIKHIL SHENDE |

 78
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#f90"

android:text="Button 6"

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#f00"

android:text="Button 7"

android:textColor="#ff9"

MR. NIKHIL SHENDE |

 79
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#444"

android:text="Button 8"

android:textColor="#fff"

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#ff002211"

android:text="Button 9"

android:textColor="#fff"

MR. NIKHIL SHENDE |

 80
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:textSize="20sp" />

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:background="#0f0"

android:text="Button 10"

android:textColor="#fff"

android:textSize="20sp" />

</LinearLayout>

</ScrollView>

</RelativeLayout>

package [Link];

MR. NIKHIL SHENDE |

 81
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

Output:-

MR. NIKHIL SHENDE |

 82
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

MR. NIKHIL SHENDE |

 83
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.2.5 Custom Toast

➢ Toast class provides a simple popup message that is displayed on the current
activity UI screen (e.g. Main Activity).
➢ A Toast is a feedback message.
➢ It disappears after a few seconds automatically
➢ Another type of Toast is custom Toast, in which images can be used instead
of a simple message.

Example:-

activity_main.xml

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

<LinearLayout xmlns:android="[Link]

xmlns:tools="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center">

<Button

android:id="@+id/showToast"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

MR. NIKHIL SHENDE |

 84
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:text="Show Toast" />

</LinearLayout>

custom_toast.xml

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

<LinearLayout xmlns:android = "[Link]

android:id = "@+id/custom_toast_layout_id"

android:layout_width = "match_parent"

android:layout_height = "match_parent"

android:gravity = "center">

<LinearLayout

android:layout_width = "wrap_content"

android:layout_height = "62dp"

android:gravity = "center"

android:background = "#00f"

android:orientation = "horizontal">

<ImageView

android:id = "@+id/imageView"

android:layout_width = "100dp"

MR. NIKHIL SHENDE |

 85
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

android:layout_height = "50dp"

android:scaleType = "fitStart"

android:src = "@drawable/ic_launcher_foreground" />

<TextView

android:id = "@id/text"

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

android:layout_marginLeft = "10dp"

android:layout_marginRight = "20dp"

android:text = "This is custom toast"

android:textColor = "#FFF"

android:textSize = "15sp"

android:textStyle = "bold" />

</LinearLayout>

</LinearLayout>

[Link]

package [Link].madbatch2025;

//package packnamename;

MR. NIKHIL SHENDE |

 86
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

Button button = findViewById([Link]);

[Link](new [Link]() {

@Override

public void onClick(View v) {

LayoutInflater li = getLayoutInflater();

MR. NIKHIL SHENDE |

 87
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

View layout = [Link]([Link].custom_toast,

(ViewGroup) findViewById([Link].custom_toast_layout_id));

Toast toast = new Toast(getApplicationContext());

[Link](Toast.LENGTH_SHORT);

[Link](layout);//setting the view of custom toast layout

[Link]();

});

Output:-

MR. NIKHIL SHENDE |

 88
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

4.3 Date and Time Picker

➢ In Android, DatePicker is a widget used to select a date. It allows to
select date by day, month and year in our custom UI (user interface).
➢ If we need to show this view as a dialog then we have to use a
DatePickerDialog class

You can use the following methods of the DatePicker to perform further operation.

MR. NIKHIL SHENDE |

 89
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link] Method & description

1 getDayOfMonth()

This method gets the selected day of month

2 getMonth()

This method gets the selected month

3 getYear()

This method gets the selected year

4 setMaxDate(long maxDate)

This method sets the maximal date supported by this DatePicker in

milliseconds since January 1, 1970 00:00:00 in getDefault() time zone

5 setMinDate(long minDate)

This method sets the minimal date supported by this NumberPicker in

milliseconds since January 1, 1970 00:00:00 in getDefault() time zone

6 setSpinnersShown(boolean shown)

This method sets whether the spinners are shown

7 updateDate(int year, int month, int dayOfMonth)

MR. NIKHIL SHENDE |

 90
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

This method updates the current date

8 getCalendarView()

This method returns calendar view

9 getFirstDayOfWeek()

This Method returns first day of the week

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.

Methods of TimePicker:

1. setCurrentHour(Integer currentHour): This method is used to set the current

hours in a

2. setCurrentMinute(Integer currentMinute): This method is used to set the

current minutes

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

4. setIs24HourView(Boolean is24HourView): This method is used to set the mode

of the Time picker either 24 hour mode or AM/PM mode

MR. NIKHIL SHENDE |

 91
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

Example

Activity_main.xml

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

<LinearLayout

xmlns:android="[Link]

xmlns:app="[Link]

xmlns:tools="[Link]

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/tvDate"

android:layout_width="149dp"

android:layout_height="46dp"

android:layout_marginEnd="224dp"

android:layout_marginBottom="312dp"

android:textSize="20dp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

MR. NIKHIL SHENDE |

 92
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

app:layout_constraintEnd_toEndOf="parent" />

<Button

android:id="@+id/btnDate"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="96dp"

android:layout_marginBottom="312dp"

android:text="Set Date"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

tools:ignore="DuplicateClickableBoundsCheck" />

<DatePicker

android:id="@+id/dtpcker"

android:layout_width="314dp"

android:layout_height="293dp"

android:layout_marginBottom="368dp"

android:datePickerMode="spinner"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.36"

MR. NIKHIL SHENDE |

 93
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

app:layout_constraintStart_toStartOf="parent" />

<TimePicker

android:id="@+id/timepcker"

android:layout_width="184dp"

android:layout_height="195dp"

android:layout_marginEnd="132dp"

android:layout_marginBottom="108dp"

android:timePickerMode="spinner"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

<TextView

android:id="@+id/tvTime"

android:layout_width="130dp"

android:layout_height="56dp"

android:layout_marginEnd="232dp"

android:layout_marginBottom="40dp"

android:textSize="20dp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

MR. NIKHIL SHENDE |

 94
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

<Button

android:id="@+id/btnTime"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="104dp"

android:layout_marginBottom="48dp"

android:text="Set Time"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

</ LinearLayout>

[Link]

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

import [Link];

MR. NIKHIL SHENDE |

 95
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

import [Link];

import [Link];

public class MainActivity extends AppCompatActivity {

TextView tvDate,tvTime;

DatePicker dtpcker;

TimePicker timepcker;

Button b1,b2;

@Override

protected void onCreate(Bundle savedInstanceState) {

[Link](savedInstanceState);

setContentView([Link].activity_main);

tvDate=findViewById([Link]);

tvTime=findViewById([Link]);

b1=findViewById([Link]);

b2=findViewById([Link]);

dtpcker=findViewById([Link]);

timepcker=findViewById([Link]);

[Link](new [Link]() {

@Override

public void onClick(View view) {

MR. NIKHIL SHENDE |

 96
Chapter 4 Designing User Interface with View by Nikhil Shende – Mountreach Solution Pvt Ltd

[Link]("Date : "+[Link]()+"-

"+[Link]()+"-"+[Link]());

});

[Link](new [Link]() {

@Override

public void onClick(View view) {

[Link]([Link]()+":"+[Link]());

});

MR. NIKHIL SHENDE |