Sunday, November 2, 2025

MCA 1 Android Using Kotlin Unit 4 - User Interface Elements

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


 Unit 4 - User Interface Elements

1. TextView.. 1

2. Button. 2

3. ImageButton. 3

4. EditText 3

5. CheckBox. 3

6. RadioButton. 4

7. RadioGroup. 4

8. AutoCompleteTextView.. 5

9. Spinner. 5

10. ImageView.. 6

11. ProgressBar. 7

12. Dialogs. 7

13. Snack Bar. 8

14. Navigation Bar. 8

15. App Bars (Top and Bottom) 9

Top App Bar (Toolbar) 9

Bottom App Bar. 9

16. Option Menu. 10

17. Context Menu. 10

18. Adapters. 11

19. ListView.. 12

20. ScrollView.. 12

 

 1. TextView

  • TextView is a UI element used to display text on the screen.
  • It is non-editable, meaning users cannot change its value.
  • Commonly used for labels, headings, descriptions, titles, etc.
  • Can display dynamic text using Kotlin, e.g., textView.text = "Hello".
  • Supports styling such as text size, color, bold, italic, font family.
  • Allows alignment like center, left, right.
  • Can display multi-line text with android:lines.
  • Supports HTML-formatted text using Html.fromHtml().
  • Allows drawable icons on left/right/top/bottom.
  • Highly used in every Android layout.
  • Lightweight and fast to render.
  • Works well inside ConstraintLayout, LinearLayout, etc.
  • Can be made clickable if needed.
  • Uses XML tag <TextView>.

 

 2. Button

  • A Button performs an action when the user taps it.
  • Used for submitting forms, saving data, navigating screens, etc.
  • Displays text like “OK”, “Submit”, “Login”.
  • OnClick event is handled in Kotlin using:
  • button.setOnClickListener { }
  • Supports background color, shape, borders, gradients.
  • Buttons can have icons using compound drawables.
  • Material Design offers enhanced MaterialButton for modern styles.
  • Provides ripple effect on click.
  • Buttons can be enabled/disabled using button.isEnabled.
  • Can change text dynamically from Kotlin.
  • Supports accessibility features like content description.
  • Used inside any layout easily.
  • Can use custom fonts.
  • Declared using the <Button> tag.

 3. ImageButton

  • ImageButton is similar to Button but uses an image instead of text.
  • Good for actions like call, camera, delete, refresh, etc.
  • Uses images from drawable folder.
  • Supports click actions same as normal button.
  • Can be styled using tint and background attributes.
  • Helps create minimal, icon-based UI.
  • Often used in toolbars and navigation bars.
  • Supports ripple effect on touch.
  • Should include contentDescription for accessibility.
  • Can use vector images (SVG) for scalable icons.
  • ImageButton can be circular or rounded using shape drawable.
  • Declared using <ImageButton> tag.
  • Can load dynamic images during runtime.
  • More visually appealing than text-only buttons.

 4. EditText

  • EditText is a text input field for user input.
  • Used for entering name, email, password, number, etc.
  • Supports input types like text, number, password, email, phone.
  • XML property android:hint shows placeholder text.
  • Get entered text in Kotlin using:
  • val name = editText.text.toString()
  • Can restrict input length using maxLength.
  • Supports validation and error messages.
  • Keyboard type changes automatically based on input type.
  • Supports multi-line input.
  • Allows styling: borders, background, padding.
  • Can show/hide password using transformation methods.
  • Can disable autocomplete or suggestions.
  • Supports custom fonts and colors.
  • Declared using <EditText>.

 5. CheckBox

  • CheckBox allows selecting multiple options.
  • Users can turn it ON or OFF.
  • Commonly used for preferences like "Remember Me" or settings.
  • Check state in Kotlin:
  • if (checkBox.isChecked) { }
  • Supports click and check-change listeners.
  • Can have custom icons and colors.
  • Multiple checkboxes operate independently.
  • Useful in forms, surveys, filters.
  • Provides better accessibility with labels.
  • Can be used inside LinearLayout or ConstraintLayout.
  • Can set default checked state in XML.
  • Lightweight and easy to use.
  • Declared using <CheckBox> tag.

 6. RadioButton

  • RadioButton allows user to select only one option from a group.
  • Used for gender selection, payment mode, etc.
  • Must be placed inside a RadioGroup.
  • Selecting one automatically deselects others in same group.
  • Get selected value in Kotlin using checkedRadioButtonId.
  • Supports click listener for actions.
  • Can be styled with custom icons or shapes.
  • Useful in forms that require single-choice input.
  • More user-friendly than dropdowns for short lists.
  • Can be checked/unchecked programmatically.
  • XML tag is <RadioButton>.
  • Label text can be styled.
  • Consumes less space than multiple buttons.

 7. RadioGroup

  • RadioGroup is a container for grouping RadioButtons.
  • Ensures only one radio button is selected.
  • Automatically manages selection behavior.
  • XML example:
  • <RadioGroup>
  •     <RadioButton .../>
  • </RadioGroup>
  • Can be vertical or horizontal.
  • Get selected option ID using radioGroup.checkedRadioButtonId.
  • Useful in signup forms, settings, filters.
  • RadioGroup helps improve UI consistency.
  • Supports programmatic selection.
  • Can clear selection using clearCheck().
  • Provides spacing and alignment.
  • Works well inside any layout.
  • Ensures clean and simple UI for choosing one option.

 8. AutoCompleteTextView

  • AutoCompleteTextView suggests options while typing.
  • Helps users type faster.
  • Requires an ArrayAdapter to supply suggestions.
  • Example:
  • val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, list)
  • autoText.setAdapter(adapter)
  • Useful for searching cities, names, products.
  • Shows dropdown below the input field.
  • Can limit suggestions using threshold value.
  • Styling can be applied to dropdown list.
  • Supports custom adapters for advanced suggestions.
  • Works well with large datasets.
  • Supports filtering automatically.
  • Declared using <AutoCompleteTextView>.
  • Improves user experience for long inputs.

 9. Spinner

  • Spinner is a dropdown list for single selection.
  • Suitable for country list, state list, category selection, etc.
  • Uses an adapter to populate items.
  • XML tag <Spinner>.
  • Kotlin example:
  • spinner.adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, list)
  • Displays selected value at top.
  • Opens a dialog-like dropdown when clicked.
  • Saves screen space compared to RadioButtons.
  • Can use custom layout for items.
  • Supports OnItemSelectedListener for actions.
  • Default first item can be set.
  • Can display icons along with text.
  • Material Spinner available using libraries.

 10. ImageView

  • ImageView displays an image on screen.
  • Supports PNG, JPG, SVG, and vector images.
  • XML:
  • <ImageView android:src="@drawable/pic" />
  • Can scale image using scaleType.
  • Supports tinting, transparency, padding.
  • Used for logos, banners, icons, backgrounds.
  • Can load online images with Glide/Picasso.
  • Can apply animations.
  • Supports placeholders and error images.
  • Works well in RecyclerView and GridView.
  • Allows touch events if needed.
  • Can clip images to shapes (circle, rounded).
  • Highly important in UI design.

 11. ProgressBar

  • ProgressBar shows loading or ongoing tasks.
  • Two types: Indeterminate, Determinate.
  • Indeterminate shows spinning circle.
  • Determinate shows progress percentage.
  • XML:
  • <ProgressBar android:indeterminate="true"/>
  • Used during downloads, uploads, login, API calls.
  • Visibility controlled in Kotlin:
  • progressBar.visibility = View.VISIBLE
  • Can customize color and size.
  • Helps improve user experience during waiting.
  • Can show horizontal bar style.
  • Suitable for background processes.
  • Should hide when task is done.
  • Compatible with Material Design components.

 12. Dialogs

  • Dialogs appear as small windows above the screen.
  • Used for confirmation, warning, message, input.
  • Types: AlertDialog, Custom Dialog, DatePicker, TimePicker.
  • Example:
  • AlertDialog.Builder(this)
  •     .setTitle("Exit")
  •     .setMessage("Are you sure?")
  •     .setPositiveButton("Yes", null)
  •     .show()
  • Dialogs grab user’s attention.
  • Can have positive, negative buttons.
  • Support custom layout designs.
  • Used for form inputs, alerts, options.
  • Can be cancelable or non-cancelable.
  • Should be used carefully to avoid overuse.
  • Follow Material Design guidelines.
  • Provide good user interaction handling.

 13. Snack Bar

  • SnackBar shows a quick message at the bottom of screen.
  • More advanced than Toast.
  • Includes optional action button.
  • Example:
  • Snackbar.make(view, "Message Sent", Snackbar.LENGTH_LONG).show()
  • Disappears automatically after few seconds.
  • Useful for undo, retry actions.
  • Follows Material Design.
  • Can customize background and text color.
  • Does not interrupt user activity.
  • Appears above bottom navigation bar.
  • Shows short, important messages.
  • Lightweight and modern alternative to Toast.

 14. Navigation Bar

  • Navigation Bar allows navigating between major app sections.
  • Usually placed at bottom (BottomNavigationView).
  • Contains 3–5 icons with labels.
  • Example: Home, Search, Profile, Settings.
  • XML tag for Material Navigation bar.
  • Supports selected/unselected states.
  • Works with fragments for screen switching.
  • Provides modern, user-friendly navigation.
  • Used in most modern apps (Instagram, YouTube).
  • Supports badges for notifications.
  • Can use vector icons from resources.
  • Connects with NavController for navigation graph.
  • Helps organize app structure effectively.

 15. App Bars (Top and Bottom)

Top App Bar (Toolbar)

  • Top bar showing title, logo, menu icons.
  • Replaces ActionBar in modern apps.
  • Supports navigation icon (hamburger/back).
  • Used to place search, settings menus.
  • Can apply custom colors and styles.
  • Works with fragments and navigation component.
  • XML: <Toolbar> or <MaterialToolbar>.
  • Supports elevation (shadow).
  • Can host custom views.

 Bottom App Bar

  • Placed at bottom of screen.
  • Supports FAB (Floating Action Button).
  • Can display menu icons.
  • Good for apps needing bottom navigation layout.
  • Provides modern material design UI.
  • Helps improve reachability on large screens.

 

 16. Option Menu

  • The Option Menu appears in the top-right corner of an Activity, usually as three vertical dots.
  • It is used to display common actions like Settings, Help, Logout, About, etc.
  • Created using a menu XML file inside the res/menu folder.
  • Inflated in the activity using onCreateOptionsMenu() method.
  • Handles click events using onOptionsItemSelected().
  • Example XML:
  • <menu>
  •     <item android:id="@+id/settings" android:title="Settings"/>
  • </menu>
  • Example Kotlin:
  • override fun onOptionsItemSelected(item: MenuItem): Boolean {
  •     if (item.itemId == R.id.settings) { }
  •     return super.onOptionsItemSelected(item)
  • }
  • Option Menu is global across the screen, not tied to any specific view.
  • Can add icons using android:icon.
  • Very useful for actions that need to be available anywhere in the Activity.
  • Supports submenus using <menu> inside an item.
  • Follows Material Design menu styles automatically.
  • Works with Toolbar and AppCompatActivity.
  • Used by many apps (Chrome, Gmail) for app-wide settings.

 17. Context Menu

  • A Context Menu appears when the user long-presses a view.
  • Used for actions related to a specific item like Copy, Paste, Edit, Delete, etc.
  • Must register a view using:
  • registerForContextMenu(myView)
  • Implemented using onCreateContextMenu() method.
  • Click actions handled using onContextItemSelected().
  • Context Menu is contextual, meaning it applies only to the selected view or item.
  • Best used in ListView items, text fields, and images.
  • XML format is similar to option menu.
  • Example: Long press text → Show: Copy, Share, Select All.
  • Supports icons, labels, shortcuts.
  • Works well for actions that are not used frequently.
  • Helps reduce clutter in the UI.
  • More interactive than Option Menu because it works on user-selected items.
  • Follows Android Material patterns automatically.

18. Adapters

  • An Adapter acts as a bridge between UI components and data list.
  • Converts data (array, list, database) into Views for ListView, Spinner, RecyclerView.
  • Common adapters: ArrayAdapter, SimpleAdapter, BaseAdapter, RecyclerView.Adapter.
  • ArrayAdapter example:
  • val ad = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)
  • listView.adapter = ad
  • Adapters help load large data efficiently.
  • Used to map data to layouts item by item.
  • Can use custom layouts inside adapters for better design.
  • Essential for dynamic UI like lists, grids, dropdowns.
  • Provide smooth scrolling when optimized.
  • BaseAdapter allows complete customization.
  • RecyclerView.Adapter is preferred for modern apps.
  • Adapters reuse views to save memory (ViewHolder technique).
  • Without an adapter, ListView/Spinner cannot display data.
  • Strongly used in all Android applications involving dynamic content.

 19. ListView

  • ListView displays a scrollable vertical list of items.
  • Requires an Adapter to supply data.
  • XML tag:
  • <ListView android:id="@+id/listView"/>
  • Commonly used for contact list, student list, product list, etc.
  • Uses ArrayAdapter for simple lists.
  • Supports custom item layouts using custom adapters.
  • Handles item click using:
  • listView.setOnItemClickListener { parent, view, pos, id -> }
  • Good for small to medium lists.
  • Automatically scrolls when content is lengthy.
  • Lightweight and easy to implement.
  • Predecessor to RecyclerView (RecyclerView is more advanced).
  • Supports fast scroll bar.
  • Can load images, text, buttons inside each row.
  • Allows selection modes like single/multiple.
  • Still used in many apps for simple lists.

 20. ScrollView

  • ScrollView allows vertical scrolling of a large layout.
  • Used when the content does not fit on the screen.
  • Can contain only one direct child, usually a LinearLayout.
  • XML Syntax:
  • <ScrollView>
  •     <LinearLayout>
  •         <!-- Long content -->
  •     </LinearLayout>
  • </ScrollView>
  • Ideal for forms, long pages, text content, or statements.
  • Provides smooth scrolling experience.
  • Automatically enables scrolling—no need for extra code.
  • Supports nested layouts like images, buttons, edit texts.
  • Does not support horizontal scroll unless using HorizontalScrollView.
  • Optimized for long content that doesn’t require repeated rows.
  • Must avoid putting ListView/RecyclerView inside ScrollView (bad performance).
  • Supports scroll listeners for animations.
  • Can jump to specific position programmatically.
  • Works well with ConstraintLayout and LinearLayout.

 


Posted by at