Navigation Components - Quick Overview

Action Bar

• Typically located at the top of the screen: The Action Bar is usually placed at the top of the screen, providing a prominent area for app navigation and controls.
• Can contain menu, navigation controls, and branding elements: It may include icons, logos, and links to important app sections.
• Displays the app title or logo: By default, it shows the app’s title or logo for identification.
• Supports search integration: Action Bar can be extended to include a search field for better app usability.
• Can be replaced with a Toolbar: You can replace the Action Bar with a custom Toolbar for more flexibility in design.
• Provides quick access to key actions via buttons and overflow menus: It often contains action buttons (e.g., save, search, etc.) and overflow menus for additional options.

Key classes:

• androidx.appcompat.widget.Toolbar (used in the activity layout XML)

---

Menu

• Part of the Action Bar: Menus are an integral part of the Action Bar, usually located at the top of the screen.
• Accessible through the three dots on the top right corner: Commonly accessed via the overflow icon (three vertical dots) in the Action Bar.
• Structure defined in menu XML file: Menu items are defined in an XML file, typically located in the res/menu/directory.

There are three types of menus:

1. Options Menu:

   • Appears in the Action Bar or as a three-dot overflow menu.
   • Key methods: onCreateOptionsMenu, onOptionsItemSelected

2. Pop-up Menu:

   • Displays when a user interacts with a specific view, usually showing a list of actions for that item.

3. Context Menu:

   • Appears when the user performs a long press on a view, showing actions related to the specific item or content.

Bottom App Bar

• For selecting among a small number of items: The Bottom App Bar typically provides quick access to important actions within a limited set.
• An alternative to the traditional top app bar: Positioned at the bottom, offering a modern UI for mobile apps.
• Supports hamburger menu: It can include a navigation drawer icon (hamburger menu) for opening the app’s navigation.
• Supports Floating Action Button (FAB): Often includes a FAB to perform the primary action of the app.
• Define BottomAppBar in XML: You specify the Bottom App Bar in the layout XML file.
• Add menu in bottom_app_bar_menu.xml: Define the actions or buttons for the Bottom App Bar in a separate XML menu file.

RecyclerView

• Improved version of ListView and GridView: A more powerful, efficient, and flexible alternative for displaying data in a list or grid format.
• Used to scroll through large data sets efficiently: Optimized for large lists and data sets, improving performance and memory usage.
• Suitable for data collections whose elements change at runtime: Ideal for dynamic content, such as real-time data from a network or user interactions.
• Depends on the CardView widget: CardView is a FrameLayout with rounded corners and shadow effects, used to display individual items in the list.
  • Customizable: You can adjust radius, shadow, and background color.
  • Container for layouts: It can contain different layout types, such as LinearLayout, ConstraintLayout, or RelativeLayout.
  • Holds one item’s information: Each CardView holds a single item of data, visually separated by cards.
• Reuses views instead of creating new ones: RecyclerView reuses views, improving performance by avoiding frequent calls to findViewById.
• Binds data to views and handles interactions: The adapter binds data to the views, while handling user interactions.
• Uses ViewHolder, LayoutManager, and Adapter: These components work together to handle layout, item view binding, and interactions.
• Supports data animations: RecyclerView allows you to animate item additions, removals, or changes.

Steps to set up:

1. Add to layout file.
2. Create a data model.
3. Create an adapter.
4. Set up a LayoutManager and adapter for the RecyclerView object.

Search View

• Provides UI to enter a search query: Allows the user to type a query and submit it to search within the app.
• Shows list of query suggestions: Offers suggestions as the user types, improving search usability.
• Can be used to filter content in a RecyclerView: Often integrated with lists or grids to filter the displayed items dynamically.
• Commonly used in Toolbars or App Bars: It can be placed in the Action Bar or Toolbar for easy access.
• Provides icon, text input, and clear button: A Search View typically includes an icon (magnifying glass), a text input field, and a clear button to reset the search.

TabLayout / ViewPager

• Material Design Component: TabLayout and ViewPager are part of Google's Material Design library, enhancing navigation with tab-based layouts.
• When content can be divided into categories (tabs): Useful when you want to organize content into distinct sections that users can easily navigate through.
• Consists of ViewPager and Fragments:
  • ViewPager: Displays different fragments, which can represent different sections of content.
  • Fragment: Each tab is typically linked to a fragment, which has its own layout.
• ViewPager: Commonly used in onboarding screens, image galleries, or tab-based navigation systems.
• Part of androidx: TabLayout and ViewPager are now part of the androidx library, offering better support and flexibility.