User Interface Elements: UI Controls & Widgets for BCA Semester 3 or IT Students

 Prepared By : Prof. Uday Shah (HOD-IT)

User Interface Elements: UI Controls & Widgets

• TextView

• TextView is a UI element used to display static text on the screen.

• It is defined in XML using <TextView> tag.

• It does not allow user input; it's used only for display purposes.

• Text can be customized using attributes like textSize, textColor, and typeface.

• You can set text dynamically using setText() method in Java/Kotlin.

• It supports styling like bold, italic, underline, and custom fonts.

• Can include links, emojis, and styled spans for rich text.

• Can be multiline or single-line with ellipses for overflow.

• Often used for titles, labels, or displaying messages to users.

• Lightweight and efficient for displaying simple text.

• Button

• Button is a clickable UI element used to perform an action.

• Created using <Button> tag in XML layout.

• Click behavior is handled via setOnClickListener() in code.

• Can be styled with colors, icons, or background images.

• Text on the button can be localized using string resources.

• It provides visual feedback (ripple effect) when pressed.

• You can customize padding, size, and shape using styles.

• Android supports material design buttons like MaterialButton.

• Buttons can be disabled/enabled using setEnabled() method.

• It plays a key role in form submissions, navigation, and other user actions.

• ImageButton

• ImageButton is a button that displays an image instead of text.

• Defined using <ImageButton> and src attribute for the image.

• Behaves like a button but offers a more visual interface.

• Used for camera buttons, delete icons, or navigation arrows.

• Supports all button features including click listeners and states.

• You can set color filters to match the app theme.

• Ripple effect or pressed state can be customized using selectors.

• Avoids text clutter and provides intuitive icon-based UI.

• Requires a drawable resource or vector image.

• Should include contentDescription for accessibility.

• EditText

• EditText is an input field that allows users to enter and edit text.

• Created using <EditText> tag in layout files.

• Can be configured for different input types: text, number, password, email.

• Text is retrieved using getText().toString() in code.

• Supports hints, input validation, and filters.

• You can limit input length and use input masks.

• Soft keyboard appears when the field gains focus.

• TextWatcher can be used to listen to text changes in real-time.

• Style can be customized with background, border, and font.

• Essential for user forms, login pages, and feedback screens.

• CheckBox

• CheckBox allows the user to select one or more options from a set.

• Created using <CheckBox> in XML.

• Supports checked and unchecked states.

• Users can toggle the state by clicking on it.

• You can retrieve its status using isChecked() method.

• Multiple checkboxes can be used for multi-select scenarios.

• Useful in settings screens, interest selections, etc.

• Can be styled with custom icons or checkmarks.

• Can be grouped logically using layouts.

• Proper labels and spacing enhance usability.

• RadioButton & RadioGroup

• RadioButton allows selection of only one option from a group.

• Defined using <RadioButton>, and grouped using <RadioGroup>.

• RadioGroup ensures only one button is selected at a time.

• Used in scenarios like gender selection, payment options, etc.

• Selected value is retrieved using getCheckedRadioButtonId().

• RadioButtons have circular indicators and clear labels.

• You can set default selection using checked attribute.

• Supports styling with themes and drawable selectors.

• Must use unique IDs to manage selections.

• Logical grouping ensures better layout and interaction.

• AutoCompleteTextView

• AutoCompleteTextView is an enhanced EditText with dropdown suggestions.

• Suggestions are provided as users start typing.

• Requires an ArrayAdapter to bind suggestion data.

• Commonly used for location, country, or email inputs.

• Improves input speed and user experience.

• Supports threshold to control how many characters before showing suggestions.

• Can be styled and themed like EditText.

• Works well with data from APIs or databases.

• OnItemClickListener handles selected suggestion.

• Enhances data consistency and reduces input errors.

• Spinner

• Spinner is a dropdown UI component for selecting one item from a list.

• Created using <Spinner> in XML.

• Binds to data using an ArrayAdapter or custom adapter.

• Displays selected item and shows dropdown on click.

• Commonly used for dropdown menus like country, category, etc.

• You can set default value and handle selection with setOnItemSelectedListener().

• Supports both simple text and custom layouts.

• Good for conserving space on small screens.

• Doesn’t show search/filter by default; use AutoCompleteTextView for that.

• Should be paired with meaningful labels for better UX.

• ImageView

• ImageView is used to display images or icons in the UI.

• Set using src or setImageResource() method.

• Supports raster and vector images (.png, .jpg, .xml).

• Scale types control how images fit in the view (fitXY, centerCrop, etc.).

• Used for logos, banners, avatars, and decorative visuals.

• Can load images from URLs using libraries like Glide or Picasso.

• Styleable with borders, shapes, or rounded corners.

• Efficient use improves visual appeal and branding.

• Supports click actions via OnClickListener.

• Essential for visual communication in modern UI.

• Date & Time Picker

• DatePicker allows users to select a date using a calendar interface.

• TimePicker allows selection of time in hours and minutes.

• Can be displayed as Dialogs or inline in layout.

• Supports 12/24-hour format for time and calendar limits for date.

• Useful in booking, scheduling, and event apps.

• Developers use onDateSet() and onTimeSet() callbacks to capture selection.

• Custom styling and theming are supported.

• Supports restricting past/future dates using setMinDate() and setMaxDate().

• Can be opened on button click as a dialog.

• Improves user input accuracy for time-sensitive fields.

• ProgressBar

• ProgressBar is a visual indicator of progress or activity.

• Supports two types: determinate (with percentage) and indeterminate (spinning).

• Used in tasks like file download, loading data, or processing.

• Defined using <ProgressBar> in XML.

• You can update progress using setProgress() method.

• Indeterminate bars show that work is ongoing but without known duration.

• Can be styled using themes or custom drawable.

• Should be shown only when necessary to avoid UI clutter.

• Can be embedded in layouts or shown as dialogs.

• Helps manage user expectations during wait times.

• Dialogs

• Dialogs are small popup windows used to prompt user decisions or show information.

• Common types: AlertDialog, ProgressDialog, DatePickerDialog, etc.

• Created using AlertDialog.Builder or DialogFragment.

• Can include title, message, buttons, and custom views.

• Often used for confirmations, alerts, or form entries.

• Supports positive, negative, and neutral actions.

• Can be dismissed manually or automatically.

• Should not block user interaction for too long.

• Proper use improves UX by focusing user attention.

• Ensure they are responsive and cancelable on back press.

::Best of Luck ::