❖ UNIT 04.

DESIGNING USER INTERFACE WITH VIEW

❖ UI Controls/Components
• In Android, a screen is designed using various UI controls to enhance user
interaction.
• These controls are the building blocks for designing the app interface.

1️ TextView (Text Display)

Definition:
1. TextView is used to display static text on the screen.
2. It cannot be edited by the user.

Attributes:
android:text → Sets the display text.
android:textSize → Defines text size.
android:textColor → Sets text color.
android:gravity → Aligns text within the view.

Syntax:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"/>

Example Code:
<TextView
android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to Android!"
android:textSize="20sp"
android:textColor="#000000"/>

Marathi Tip: "TextView mhaje notice board — fakta text disat, pan edit nahi karta yet."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

2️ EditText (User Input Field)

Definition:
1. EditText is an input field where the user can enter text.
2. It is commonly used for login forms, search bars, and text input areas.

Attributes:
android:hint → Displays a placeholder text.
android:inputType → Defines the type (text, number, password).
android:maxLength → Limits the number of characters.
android:textColorHint → Sets hint text color.

Syntax:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name"/>

Example Code:
<EditText
android:id="@+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Username"
android:inputType="textPersonName"/>

Marathi Tip: "EditText mhaje exam paper madhil blank space — je user la bharayla
lagel."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

3️ Button (Clickable Action)

Definition:
1. Button is used to trigger an action when clicked.
2. It is commonly used for submitting forms, navigation, and interactivity.

Attributes:
android:text → Sets the button label.
android:onClick → Defines the function when clicked.
android:background → Changes button color or image.
android:textAllCaps → Converts text to uppercase.

Syntax:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"/>

Example Code:
<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:onClick="submitForm"/>

Marathi Tip: "Button mhaje — click kela ki action hota."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

4 ImageButton (Clickable Image)

Definition:
1. ImageButton is a button with an image instead of text.
2. It is commonly used for camera, refresh, or play buttons.

Attributes:
android:src → Sets the image resource.
android:scaleType → Adjusts image scaling.
android:background → Changes background color.
android:contentDescription → Provides a text description for accessibility.

Syntax:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/play_icon"/>

Example Code:
<ImageButton
android:id="@+id/btnPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/play_button"
android:contentDescription="Play Video"/>

Marathi Tip: "ImageButton mhaje whatsapp cha camera button — je fakta icon click
karun work karto."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

5 ToggleButton (On/Off Switch)

Definition:
1. ToggleButton allows users to switch between two states (ON/OFF).
2. It is used for Wi-Fi, Bluetooth, or Dark Mode toggles.

Attributes:
android:textOn → Text displayed when ON.
android:textOff → Text displayed when OFF.
android:checked → Sets the default state.
android:background → Changes button appearance.

Syntax:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Example Code:
<ToggleButton
android:id="@+id/toggleWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Wi-Fi ON"
android:textOff="Wi-Fi OFF"/>

Marathi Tip: "ToggleButton mhaje switch board — ekda dabla ki ON, parat dabla ki
OFF."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

6 RadioButton (Single Choice Selection)

Definition:
1. RadioButton allows the user to select only one option from multiple choices.
2. It is used for options like gender selection, payment method, etc.

Attributes:
android:text → Sets the label text.
android:checked → Defines the default selection.
android:textColor → Changes text color.
android:buttonTint → Changes the button color.

Syntax:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1"/>

Example Code:
<RadioButton
android:id="@+id/rbMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"/>

Marathi Tip: "RadioButton mhaje vadapav madhil ekach chutney select karnyasarkha
— red ka green?"

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

7 RadioGroup (Grouping RadioButtons)

Definition:
1. RadioGroup is a container for multiple RadioButtons, ensuring only one selection at
a time.
2. It is commonly used for MCQs, gender selection, and form inputs.

Attributes:
android:orientation → Defines the arrangement (horizontal/vertical).
android:checkedButton → Sets the default selected option.
android:gravity → Aligns the buttons.
android:layout_margin → Sets spacing around the group.

Syntax:
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RadioGroup>

Example Code:
<RadioGroup
android:id="@+id/rgGender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/rbMale"
android:text="Male"/>
<RadioButton
android:id="@+id/rbFemale"
android:text="Female"/>
</RadioGroup>

Marathi Tip: "RadioGroup mhaje hotel madhil thali — ekach type chi bhaji gheta yeil."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

8 CheckBox (Multiple Choice Selection)

Definition:
1. CheckBox allows users to select multiple options from a list.
2. Used for preferences like selecting toppings in pizza orders, terms & conditions, etc.

Attributes:
android:text → Sets the checkbox label.
android:checked → Defines default selection.
android:buttonTint → Changes the checkbox color.
android:gravity → Aligns text and checkbox.

Syntax:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1"/>

Example Code:
<CheckBox
android:id="@+id/chkPizza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Extra Cheese"/>

Marathi Tip: "CheckBox mhaje **biryani order kartana 'extra spicy' option la tick
karnyasarkha'."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

9 ProgressBar (Loading Indicator)

Definition:
1. ProgressBar is used to show loading progress in an app.
2. Commonly used in file downloads, loading screens, and buffering indicators.

Attributes:
android:indeterminate → Displays an infinite animation.
android:progress → Defines current progress percentage.
android:max → Sets the maximum progress value.
android:layout_gravity → Aligns the progress bar.

Syntax:
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Example Code:
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>

Marathi Tip: "ProgressBar mhaje mobile recharge honyacha wait karnyasarkha — hya
loading cha kay bharosa!"

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

1️0 Rectangular Progress Bar

Definition:
1. A Rectangular Progress Bar is used to visually indicate task progress such as
downloading, uploading, or processing.
2. Unlike a circular progress bar, it fills horizontally as the task progresses.

Attributes:
android:progress → Sets the current progress level.
android:max → Defines the maximum progress value.
android:progressDrawable → Changes the color and style of the bar.
android:indeterminate → true for continuous animation, false for measurable
progress.

Syntax:
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:progress="40"
android:max="100"/>

Example Code:
XML Code (activity_main.xml)
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:progress="50"
android:max="100"
android:progressTint="#4CAF50"/>

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

Java Code (MainActivity.java)

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

// Set progress dynamically

progressBar.setProgress(75); // Updates progress to 75%

Marathi Tip: "Rectangular ProgressBar mhaje bucket bharat asnarya nalasarkha —

jitka pani titka progress!"

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

1️ ListView (Displaying List Items)

Definition:
1. ListView is used to display a list of scrollable items in a single column.
2. It is commonly used for contact lists, chat messages, and menus.

Attributes:
android:divider → Sets the separator line between items.
android:dividerHeight → Defines the thickness of the divider.
android:scrollbars → Controls scrollbar visibility.
android:choiceMode → Enables single or multiple item selection.

Syntax:
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

Example Code (XML + Java) with 6 Items

XML Code (activity_main.xml)

<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

Java Code (MainActivity.java)

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

ListView listView;
String[] items = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};

@Override
protected void onCreate(Bundle savedInstanceState) {

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = findViewById(R.id.listView);
ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, items);
listView.setAdapter(adapter);
}
}

Marathi Tip: "ListView mhaje bhakri chi thali — jithe sagle ordered list madhe astat."

2️ GridView (Displaying Items in Grid Format)

Definition:
1. GridView is used to display items in a grid format (rows and columns).
2. It is ideal for photo galleries, product catalogs, and emoji keyboards.

Attributes:
android:numColumns → Defines the number of columns.
android:horizontalSpacing → Sets spacing between columns.
android:verticalSpacing → Sets spacing between rows.
android:stretchMode → Adjusts item size to fill space.

Syntax:
<GridView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3"/>

Example Code (XML + Java) with 4x4 Items

XML Code (activity_main.xml)

<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="4"/>

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

Java Code (MainActivity.java)

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

GridView gridView;
String[] items = {
"A", "B", "C", "D",
"E", "F", "G", "H",
"I", "J", "K", "L",
"M", "N", "O", "P"
};

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

gridView = findViewById(R.id.gridView);
ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, items);
gridView.setAdapter(adapter);
}
}

Marathi Tip: "GridView mhaje samosa plate — jithe sagle items square grid madhe
astat."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

3️ ImageView (Displaying Images in UI)

Definition:
1. ImageView is used to display images, icons, or graphics in an app.
2. It supports images from local storage, URLs, or drawable resources.

Attributes:
android:src → Sets the image source.
android:scaleType → Defines how the image is adjusted.
android:contentDescription → Provides accessibility text.
android:adjustViewBounds → Allows automatic resizing.

Syntax:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/sample_image"/>

Example Code:
<ImageView
android:id="@+id/imgLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/logo"/>

Marathi Tip: "ImageView mhaje photo frame je screen var dakhavta."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

4 ScrollView (Enabling Scrolling)

Definition:
1. ScrollView is used to make content scrollable vertically when it exceeds the screen
size.
2. It can hold only one child layout, such as a LinearLayout.

Attributes:
android:fillViewport → Expands child views to full screen.
android:scrollbars → Controls scrollbar visibility.
android:fadeScrollbars → Enables scrollbar fading.
android:layout_gravity → Aligns content within the ScrollView.

Syntax:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ScrollView>

Example Code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView android:text="This is a long text..." />

<TextView android:text="More text goes here..." />
</LinearLayout>
</ScrollView>

Marathi Tip: "ScrollView mhaje pustakache page paltnyasarkha — content long asel tar
pudh pudh palta."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

5 Custom Toast Alert (Custom Notification Messages)

Definition:
1. Toast is used to display small pop-up messages on the screen.
2. Custom Toasts allow modifying the appearance, layout, and position of the toast
message.

Attributes:
setGravity(Gravity.TOP, xOffset, yOffset) → Positions the toast.
setView(view) → Uses a custom layout for the toast.
setDuration(Toast.LENGTH_LONG) → Controls duration.
show() → Displays the toast.

Syntax:
Toast.makeText(context, "Message", Toast.LENGTH_SHORT).show();

Example Code

Example Code (Java - Custom Toast)

LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom_toast, null);
Toast toast = new Toast(getApplicationContext());
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();

XML Code (custom_toast.xml)

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Toast Message!"
android:background="#FF9800"
android:textColor="#FFFFFF"
android:padding="10dp"/>

Marathi Tip: "Custom Toast mhaje special chai sarkha — normal toast peksha heavy
customisation asta."

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

❖Date and Time Picker (MOST IMP)

Date and Time Pickers allow users to select dates and times in an interactive way. They are
commonly used in alarm apps, booking systems, and scheduling features.

1️ DatePicker (Selecting a Date)

Definition:
1. DatePicker is a UI component that allows users to select a date from a calendar.
2. It can be used in birthday selection, event booking, and reminders.

Methods:
getYear() → Returns the selected year.
getMonth() → Returns the selected month (0-1️1️).
getDayOfMonth() → Returns the day of the month.
init(year, month, day, listener) → Initializes the date picker with a given date.

Syntax:
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Example Code (XML + Java)

XML Code (activity_main.xml)

<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Java Code (MainActivity.java)

import android.os.Bundle;
import android.widget.DatePicker;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

DatePicker datePicker;

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

datePicker = findViewById(R.id.datePicker);

datePicker.init(2024, 5, 15, (view, year, month, day) -> {

String date = day + "/" + (month + 1) + "/" + year;
Toast.makeText(MainActivity.this, "Selected Date: " + date,
Toast.LENGTH_SHORT).show();
});
}
}

Marathi Tip: "DatePicker mhaje shadi madhe card madhun lagna chi date select
karnyasarkha!"

2️ TimePicker (Selecting a Time)

Definition:
1. TimePicker allows users to select time in hours and minutes.
2. It is commonly used in alarm apps, appointment bookings, and scheduling systems.

Methods:
getHour() → Returns the selected hour (24-hour format).
getMinute() → Returns the selected minute.
setHour(hour) → Sets the default hour.
setMinute(minute) → Sets the default minute.

Syntax:
<TimePicker
android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

Example Code (XML + Java)

XML Code (activity_main.xml)

<TimePicker
android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Java Code (MainActivity.java)

import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

TimePicker timePicker;

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

timePicker = findViewById(R.id.timePicker);

timePicker.setOnTimeChangedListener((view, hour, minute) -> {

String time = hour + ":" + minute;
Toast.makeText(MainActivity.this, "Selected Time: " + time,
Toast.LENGTH_SHORT).show();
});
}
}

Marathi Tip: "TimePicker mhaje alarm madhe time set karnyasarkha — ekda set kela ki
time fixed!"

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

❖ Summer 2️02️2️
1️. List any four attributes of check box. (2️marks)
2️. State syntax to create Text View and Image button with any two attributes of each. (4marks)
3️. Write a program to demonstrate Date and Time picker. (4marks)
4. Write a program to convert temperature from celcius to farenhite and vice versa using Toggle
button. (Design UI as per your choice. Write XML and java file) (6marks)

❖ Winter 2️02️2️
1️. Enlist the elements of UI.. (2️marks)
2️. Explain data and time picker with its method. (4marks)
3️. Write a program to display a rectangular progress bar. (4marks)
4. Develop a program to implement (6marks)
i) List view of 5 items
ii) Grid view of 4 x 4 items
iii) Image view.

❖ Summer 2️02️3️
1️. Name any four attributes of Edit Text control. (2️marks)
2️. Explain Gridview with its attributes with suitable example. (4marks)
3️. Develop an android application for Date and Time Picker. (4marks)
4. Design a employee registration form using UI component. (6marks)

❖ Winter 2️02️3️
1️. Write difference between toggle button and radio button. (2️marks)
2️. Develop an application to display analog Time Picker. Also display the selected time. (Write only .
java file). (4marks)
3️. Develop an android application using radio button (4marks)
4. Develop a program to perform addition, subtraction, division, multiplication of two numbers and
display the result. (Use appropriate UI controls) (6marks)

Diploma Helper. Feel free to DM us at. 8698079745

 ❖ UNIT 04. DESIGNING USER INTERFACE WITH VIEW

❖ Summer 2️02️4
1️. List any two attributes of Toggle Button. (2️marks)
2️. Explain scrollview with its attributes and with suitable example. (4marks)
3️. Write a program to show five checkboxes and toast selected checkboxes using linear layout.
(6marks)
4. Develop android application to enter one number and display factorial of a number once click on
button. (6marks)

❖ Winter 2️02️4
1️. List attributes of radio button. (2️marks)
2️. Design a student registration form . (4marks)
3️. Develop a program to implement – List View of 6 items. (4marks)
4. Explain Grid view and image view with suitable example. (6marks)
5. Explain data picker with suitable example. (6marks)

Diploma Helper. Feel free to DM us at. 8698079745