UI Components

Add a floating action button

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI.
The following code shows how the FloatingActionButton appears in your layout file:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="@drawable/ic_my_icon"
android:contentDescription="@string/submit"

android:layout_margin="16dp" />

You can then apply an View.OnClickListener to handle FAB taps

Add buttons to your app
A button consists of text or an
icon, or both, that
communicates what action
occurs when the user taps it.
<Button
When the user taps a button, the Button
android:id="@+id/supabutton"
object receives an on-click event.
android:layout_width="wrap_content"
To declare the event handler
android:layout_height="wrap_content" programmatically, create an
View.OnClickListener object and assign
android:text="I'm a button" /> it to the button by calling
setOnClickListener(View.OnClickListen
<ImageButton er)
android:layout_width="wrap_content" , as in the following example

android:layout_height="wrap_content"

android:contentDescription="A tiny Android icon"

android:src="@drawable/baseline_android_24"

app:tint="#ff0000" />
Add checkboxes to your app
Checkboxes let the user select one or more
options from a set. Typically, you present
checkbox options in a vertical list.

To create each checkbox option, create

a CheckBox in your layout. Because a set of
checkbox options lets the user select multiple
items, each checkbox is managed
separately, and you must register a click
listener for each one.
<CheckBox android:id="@+id/checkbox_meat"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Meat" />

<CheckBox android:id="@+id/checkbox_cheese"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Cheese"/>
Add radio buttons to your app
Radio buttons let the user select one
option from a set of mutually exclusive
options. Use radio buttons if the user
needs to see all available options listed.
If it's not necessary to show all options,
use a spinner instead.
To create each radio button option, create a <RadioButton
RadioButton in your layout. Because radio android:id="@+id/radio_pirates"
buttons are mutually exclusive, group them inside
a RadioGroup. The system ensures that only one android:layout_width="wrap_content"
radio button within a group can be selected at a
time. android:layout_height="wrap_content"

<?xmlversion="1.0"encoding="utf-8"?> android:text="Pirates"/>

<RadioGroup <RadioButton
android:id="@+id/radio_ninjas"
android:layout_width="match_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
android:text="Ninjas"/>
</RadioGroup>
Add toggle buttons
If you're using a View-based layout, there are three main choices for implementing toggles.
We recommend using the SwitchMaterial component from the Material Components library:
Add pickers to your app
Android provides controls for the user to
pick a time or date as ready-to-use
dialogs. These pickers provide controls for
selecting each part of the time (hour,
minute, AM/PM) or date (month, day,
year).

Using these pickers helps ensure that your

users can pick a time or date that is valid,
formatted correctly, and adjusted to the
user's locale.
Create a time picker
To display a TimePickerDialog using
DialogFragment, define a fragment class that
extends DialogFragment and return a
TimePickerDialog from the fragment's
onCreateDialog() method.
Dialogs
A dialog is a small window that prompts
the user to make a decision or enter
additional information. A dialog doesn't
fill the screen and is normally used for
modal events that require users to take
an action before they can proceed.
The Dialog class is the base class for dialogs, but don't instantiate Dialog directly. Instead,
use one of the following subclasses:

AlertDialog

A dialog that can show a title, up to three buttons, a list of selectable items, or a custom
layout.

DatePickerDialog or TimePickerDialog

A dialog with a predefined UI that lets the user select a date or time.
Add menus
Menus are a common user interface component in
many types of apps. To provide a familiar and
consistent user experience, use the Menu APIs to
present user actions and other options in your
activities.

Options menu and app bar

The options menu is the primary collection of

menu items for an activity. It's where you place
actions that have a global impact on the app,
such as "Search," "Compose email," and
"Settings."
Context menu and contextual action mode

A context menu is a floating menu that appears when the user performs a touch & hold
on an element. It provides actions that affect the selected content or context frame.

Popup menu

A popup menu displays a vertical list of items that's anchored to the view that invokes
the menu. It's good for providing an overflow of actions that relate to specific content or
to provide options for the second part of a command.
To define a menu, create an XML file inside your project's res/menu/ directory and build the
menu with the following elements:

<menu>

Defines a Menu, which is a container for menu items. A <menu> element must be the root
node for the file, and it can hold one or more <item> and <group> elements.

<item>

Creates a MenuItem, which represents a single item in a menu. This element can contain a
nested <menu> element to create a submenu.

<group>

An optional, invisible container for <item> elements. It lets you categorize menu items so
they share properties, such as active state and visibility. For more information, see the
Create a menu group section.

Here's an example menu named game_menu.xml:

Recycler view
RecyclerView is a powerful UI component in Android • Flexibility: RecyclerView allows for various
development, specifically designed for displaying layouts, including linear, grid, and staggered grid,
large, scrollable lists of data efficiently. It's a more through the use of Layout Managers.
advanced version of ListView and GridView, offering
• ViewHolders: ViewHolders help optimize
improved performance and flexibility.
performance by storing references to views within
Here's a breakdown of what makes RecyclerView each item, preventing the need to re-look up views
special: repeatedly as the list scrolls.
Key Features and Benefits: • Adapter: The adapter handles the binding of data
• Performance: Instead of creating a view for every item in the to views within the RecyclerView, making it easier
dataset, RecyclerView reuses views as they scroll out of view. to manage the list's content and layout.
This significantly reduces memory consumption and improves
app responsiveness, especially when dealing with large
datasets.
AdapterView
In Android development, an AdapterView is a ViewGroup that displays items loaded from a data source via
an Adapter. The adapter acts as a bridge between the UI component (like a ListView or GridView) and the
data, providing access to the data items and creating a View for each item. [1, 2, 3, 4]

Key Concepts:

AdapterView: A ViewGroup that displays data, such as ListView, GridView, Spinner, etc.

• Adapter: A bridge between the AdapterView and the data source, responsible for retrieving data and
creating views for each item.

• Data Source: The external source from which the adapter retrieves data, such as an array, database, or
network connection.

• View: A visual representation of an individual data item, created by the adapter.

How it works:

1. Bind Adapter: The AdapterView is bound to an Adapter instance, which provides

the data. [5]

2. Retrieve Data: The adapter retrieves data from the specified data source. [4, 6]

3. Create Views: The adapter creates a View for each item in the data source. [4, 7]

4. Display Views: The AdapterView displays the views provided by the adapter. [4]
Common Adapter Types:

• ArrayAdapter: Suitable for simple data sources like arrays and lists. [5, 8]
• CursorAdapter: Used for displaying data from a database cursor. [4]
• BaseAdapter: A base class for creating custom adapters, requiring overriding certain
methods. [4]
• SimpleAdapter: Simplifies the creation of custom adapters by automatically handling
data binding. [4, 6, 9, 10]