1.

Time and Date Pickers

These are dialog components that let users select time and date via a user-friendly interface.

TimePicker

Used to pick a time (hours & minutes).

XML:

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

Programmatically:

TimePicker timePicker = findViewById(R.id.timePicker);

int hour = timePicker.getHour();
int minute = timePicker.getMinute();

You can also show it in a dialog:

TimePickerDialog timePickerDialog = new TimePickerDialog(this,

(view, hourOfDay, minute) -> {
// Do something with time
}, 12, 0, false);
timePickerDialog.show();

DatePicker

Used for picking calendar dates.

In XML:

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

DatePickerDialog datePickerDialog = new DatePickerDialog(this,

(view, year, month, dayOfMonth) -> {
// Handle selected date
}, 2025, 4, 3);
datePickerDialog.show();

2. ListView
A scrollable list of items shown vertically. It’s good for simple lists with uniform layout.

Layout (XML):

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

Java Code:

String[] items = {"Apple", "Banana", "Cherry"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, items);
listView.setAdapter(adapter);

ListView is old school. Use RecyclerView for better performance & flexibility.

3. GridView
Displays items in a two-dimensional, scrollable grid. Ideal for image galleries, etc.

XML:

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

GridView gridView = findViewById(R.id.gridView);

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

Works similarly to ListView but in grid form.

4. CardView
Part of the Material Design UI toolkit. It creates a card-like layout with shadows and rounded
corners.

Add dependency (in build.gradle):

implementation 'androidx.cardview:cardview:1.0.0'

XML:

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is inside a Card!" />
</androidx.cardview.widget.CardView>

Use CardView inside RecyclerView for modern UIs like news feeds, product catalogs, etc.
 5. RecyclerView
RecyclerView is the modern, efficient way to show large data sets in a scrollable list or grid. It
reuses item views via the ViewHolder pattern to improve performance.

Add dependency:

implementation 'androidx.recyclerview:recyclerview:1.3.1'

XML:

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

How RecyclerView Works:

It requires:

• Adapter: Connects data to the views.

• ViewHolder: Holds the view layout for each item.
• LayoutManager: Arranges items (linear, grid, etc.)

Sample Custom Adapter (with ViewHolder)

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

private String[] data;

public MyAdapter(String[] data) {

this.data = data;
}

public static class MyViewHolder extends RecyclerView.ViewHolder {

public TextView textView;
public MyViewHolder(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.itemText);
}
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.list_item, parent, false);
 return new MyViewHolder(view);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.textView.setText(data[position]);
}

@Override
public int getItemCount() {
return data.length;
}
}

Adaptors
ArrayAdapter

• Used with ListView/GridView

• Simple mapping of arrays/lists to views.

ArrayAdapter<String> adapter = new ArrayAdapter<>(this,

android.R.layout.simple_list_item_1, arrayList);
listView.setAdapter(adapter);

BaseAdapter

• More customizable than ArrayAdapter.

• Used when you want to customize layout/logic for each row in ListView/GridView.

public class CustomAdapter extends BaseAdapter {

Context context;
String[] titles;

public CustomAdapter(Context context, String[] titles) {

this.context = context;
this.titles = titles;
}

@Override
public int getCount() {
return titles.length;
}

@Override
public Object getItem(int position) {
return titles[position];
}
 @Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(context);
View row = inflater.inflate(R.layout.custom_row, parent, false);
TextView text = row.findViewById(R.id.text);
text.setText(titles[position]);
return row;
}
}

ViewHolder Pattern
The ViewHolder pattern is used in RecyclerView to:

• Improve performance
• Avoid repeated calls to findViewById()

Each ViewHolder holds a reference to the layout views, and is reused as you scroll.

Summary Table
Component Use For Best For
TimePicker Picking time Alarms, Reminders
DatePicker Picking dates Schedulers, Calendars
ListView Vertical item lists Simpler UIs, small data sets
GridView Grid-like item layout Image galleries, product lists
CardView Modern card UI News feeds, e-commerce, profiles
RecyclerView Advanced, efficient lists Large datasets, modern app layouts
ArrayAdapter Easy binding of lists to views Quick development
BaseAdapter Fully customized row layouts Complex list/grid items
ViewHolder Performance booster Used with RecyclerView
 1. Dialogs
Dialogs are small windows that prompt the user to make a decision or enter additional
information. They take focus away from the current screen until dismissed.

Types of Dialogs:

AlertDialog

Used for confirmation, alerts, simple inputs.

new AlertDialog.Builder(this)
.setTitle("Exit?")
.setMessage("Do you really want to exit?")
.setPositiveButton("Yes", (dialog, which) -> finish())
.setNegativeButton("No", null)
.show();

Custom Dialog

You can create your own layout:

Dialog dialog = new Dialog(this);

dialog.setContentView(R.layout.custom_layout);
dialog.show();

DatePickerDialog & TimePickerDialog

Already explained earlier.

2. Toast
A Toast is a short-lived non-blocking message that pops up at the bottom of the screen.

Toast.makeText(getApplicationContext(), "Hello Toast!",

Toast.LENGTH_SHORT).show();

Use when:

• You want to show brief messages

• No interaction required from the user
 3. PopupMenu
Popup menus show a list of items in a small dialog box anchored to a view.

Usage:
PopupMenu popup = new PopupMenu(context, anchorView);
popup.getMenuInflater().inflate(R.menu.my_menu, popup.getMenu());
popup.setOnMenuItemClickListener(item -> {
// Handle menu click
return true;
});
popup.show();

Use when:

• You need to offer options related to a UI element

• Like "More" or "Settings" for a card/item

4. Fragments
Fragments are like mini activities — reusable portions of UI within an activity. Useful in tablets
and modular screens.

Key Points:

• Each Fragment has its own lifecycle.

• They are embedded in an Activity.
• They can be added, replaced, or removed dynamically.

Create a Fragment:
public class MyFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_layout, container, false);
}
}
Add it in an Activity:
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new MyFragment())
.commit();

Use when:

• You want to build flexible, multi-pane UIs

• You want to reuse UI parts across activities

5. Material Design (MD)

Material Design is Google’s UI/UX design language — based on real-world physics, lighting,
and motion.

a. Navigation Components

Used to manage in-app navigation (Fragments, Activities, etc.)

• Navigation Graph (nav_graph.xml)

• Navigation Controller
• NavHostFragment

implementation "androidx.navigation:navigation-fragment-ktx:2.7.0"
implementation "androidx.navigation:navigation-ui-ktx:2.7.0"

b. Floating Action Button (FAB)

A round button floating above the UI, usually used for primary actions (like "Add", "Create").

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:src="@drawable/ic_add"
app:backgroundTint="@color/primary"
android:layout_gravity="bottom|end" />
Java:
fab.setOnClickListener(view -> {
// Do something
});

c. ToolBar

The Toolbar is a more customizable version of the default ActionBar.

XML:
<androidx.appcompat.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
app:title="My App" />

Java:
setSupportActionBar(findViewById(R.id.my_toolbar));

Toolbars can have:

• Menus
• Navigation icons
• Custom views

Summary Chart:
Component Purpose When to Use
Dialog Interrupt user for important action Alerts, confirmations, input
Toast Temporary message Notifications that don't need response
PopupMenu Small menu anchored to a view Contextual options for a UI item
Fragment Modular, reusable UI block Tablet layouts, multi-pane, reusable UI
FAB Primary floating action button Add, Create, Compose
Toolbar Modern, flexible app bar App name, icons, search, menus
Navigation Manage transitions, back stack Fragment/Activity navigation