Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

ExpandableBottomBar in Android

The ExpandableBottomBar is not a built-in component in Android but is available through a third-party library. It offers a modern bottom navigation experience with expandable items. When you tap on an item, other items might collapse to give more visual emphasis to the selected item.

Here's how you can integrate the ExpandableBottomBar into your Android application:

  • Add Dependency:

First, add the ExpandableBottomBar library dependency to your build.gradle (Module: app):

implementation 'com.github.ismaeldivita:chip-navigation-bar:2.0.4'

Make sure you have jitpack.io in your project level build.gradle repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  • XML Layout:

Add the ExpandableBottomBar to your activity's XML layout:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:menu="@menu/bottom_app_bar_menu"/>
  • Menu:

Define your bottom bar menu items in res/menu/bottom_app_bar_menu.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />

    <!-- Add other items as needed -->
</menu>
  • Activity Code:

In your activity, set up item click listeners:

val bottomBar: BottomAppBar = findViewById(R.id.bottomBar)

bottomBar.setOnMenuItemClickListener { item ->
    when(item.itemId) {
        R.id.action_home -> {
            // Handle home action
            true
        }
        R.id.action_search -> {
            // Handle search action
            true
        }
        else -> false
    }
}
  • Styling and Customization:

The ExpandableBottomBar can be styled and customized as per your requirements. For example, you can modify colors, sizes, and animations. Always refer to the official library documentation or GitHub repository to understand all the customizations available.

Note: Library versions may update over time, so it's always a good idea to check the official repository for the latest version and integration guidelines.

  1. Implementing ExpandableBottomBar Example Code:

    • Description: ExpandableBottomBar is a custom UI component that provides an expandable and collapsible bottom navigation bar in Android. It typically consists of multiple items that can expand to reveal additional options.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set up items
List<ExpandableBottomBarItem> items = new ArrayList<>();
items.add(new ExpandableBottomBarItem(R.drawable.ic_home, "Home"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_search, "Search"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_profile, "Profile"));

// Set listener for item selection
expandableBottomBar.setOnItemSelectedListener((v, position) -> {
    // Handle item selection
});

// Set items to ExpandableBottomBar
expandableBottomBar.setItems(items);

  2. Customizing ExpandableBottomBar in Android:

    • Description: Customize the appearance and behavior of ExpandableBottomBar using various methods and attributes.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set bar color
expandableBottomBar.setBarBackgroundColor(Color.BLUE);

// Set item text color
expandableBottomBar.setItemTextColor(Color.WHITE);

// Set item icon color
expandableBottomBar.setItemIconColor(Color.WHITE);

  3. Handling Item Selection in ExpandableBottomBar:

    • Description: Implement item selection handling to perform actions when an item is clicked.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

expandableBottomBar.setOnItemSelectedListener((v, position) -> {
    // Handle item selection
    switch (position) {
        case 0:
            // Handle Home item selection
            break;
        case 1:
            // Handle Search item selection
            break;
        case 2:
            // Handle Profile item selection
            break;
    }
});

  4. Adding Icons to ExpandableBottomBar Items in Android:

    • Description: Add icons to ExpandableBottomBar items for visual representation.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set up items with icons
List<ExpandableBottomBarItem> items = new ArrayList<>();
items.add(new ExpandableBottomBarItem(R.drawable.ic_home, "Home"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_search, "Search"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_profile, "Profile"));

expandableBottomBar.setItems(items);

  5. Expanding and Collapsing Items in ExpandableBottomBar:

    • Description: Allow items in ExpandableBottomBar to expand and collapse to reveal additional options or information.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Enable item expansion
expandableBottomBar.setIsItemExpanded(true, 1); // Expand the item at index 1

  6. Using Animations with ExpandableBottomBar in Android:

    • Description: Apply animations to enhance the visual experience when expanding or collapsing items in ExpandableBottomBar.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set custom item animation
expandableBottomBar.setItemAnimation(new SlideItemAnimation());

// Set custom bar animation
expandableBottomBar.setBarAnimation(new FadeBarAnimation());

  7. Setting up Titles and Subtitles in ExpandableBottomBar:

    • Description: Display titles and subtitles for items in ExpandableBottomBar to provide additional information.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set up items with titles and subtitles
List<ExpandableBottomBarItem> items = new ArrayList<>();
items.add(new ExpandableBottomBarItem(R.drawable.ic_home, "Home", "Your home base"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_search, "Search", "Find something"));
items.add(new ExpandableBottomBarItem(R.drawable.ic_profile, "Profile", "Your user profile"));

expandableBottomBar.setItems(items);

  8. Configuring Badges for ExpandableBottomBar Items:

    • Description: Add badges to ExpandableBottomBar items to indicate counts or notifications.
    • Code:
      // Java code
ExpandableBottomBar expandableBottomBar = findViewById(R.id.expandableBottomBar);

// Set up items with badges
List<ExpandableBottomBarItem> items = new ArrayList<>();
items.add(new ExpandableBottomBarItem(R.drawable.ic_home, "Home", "Your home base", 5));
items.add(new ExpandableBottomBarItem(R.drawable.ic_search, "Search", "Find something", 0));
items.add(new ExpandableBottomBarItem(R.drawable.ic_profile, "Profile", "Your user profile", 10));

expandableBottomBar.setItems(items);
Copyright © devanddep.com | All Rights Reserved