首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何显示BottomNavigationView of material menuItem (版本1.1.0-alpha08)的徽章?

在Material Design库中,BottomNavigationView 是一个常用的组件,用于在底部显示导航菜单项。要在 BottomNavigationView 的菜单项上显示徽章(Badge),你可以使用 BadgeDrawable 类。以下是如何在 BottomNavigationView 中显示徽章的步骤:

基础概念

徽章(Badge)是一种视觉指示器,通常用于显示未读消息数量、通知或其他重要信息。在Material Design中,BadgeDrawable 是一个用于在视图上绘制徽章的类。

相关优势

  • 清晰的信息传递:徽章能够快速传达重要信息,如未读消息数量。
  • 灵活性:可以自定义徽章的外观和行为,如颜色、大小和动画效果。
  • 集成性:徽章可以轻松集成到现有的导航组件中,如 BottomNavigationView

类型

  • 文本徽章:显示简单的文本信息。
  • 数字徽章:显示数字,常用于未读消息计数。
  • 图标徽章:结合图标和文本或数字。

应用场景

  • 消息应用:显示未读消息数量。
  • 购物车:显示购物车中的商品数量。
  • 通知中心:显示未读通知数量。

示例代码

以下是一个示例代码,展示如何在 BottomNavigationView 中显示徽章:

代码语言:txt
复制
<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications" />
</menu>
代码语言:txt
复制
// MainActivity.java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.badge.BadgeDrawable;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
            // Handle navigation item selection
            return true;
        });

        // Add badge to the notifications menu item
        BottomNavigationView menuView = bottomNavigationView.getChildAt(0);
        MenuItem menuItem = menuView.getMenu().findItem(R.id.navigation_notifications);
        BadgeDrawable badge = bottomNavigationView.makeBadge(menuItem.getItemId());
        badge.setNumber(5); // Set the badge number
        badge.setVisible(true); // Show the badge
    }
}

参考链接

常见问题及解决方法

问题:徽章没有显示

  • 原因:可能是徽章未正确添加到菜单项上,或者徽章的可见性设置为 false
  • 解决方法:确保使用 bottomNavigationView.makeBadge(menuItem.getItemId()) 创建徽章,并设置 badge.setVisible(true)

问题:徽章位置不正确

  • 原因:徽章的位置可能需要调整。
  • 解决方法:可以使用 badge.setVerticalOffset()badge.setHorizontalOffset() 方法调整徽章的位置。

通过以上步骤和示例代码,你应该能够在 BottomNavigationView 中成功显示徽章。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android Notes|BottomNavigationView 爱上 Lottie

return item; } } 对于基本的 MenuItem Icon 选中/默认切换,一般配合 menu 来食用,例如。...需要单独说明的属性: app:labelVisibilityMode:item 标签显示模式 auto:item 少于等于 3 个时,标题处于显示状态;大于等于 4 个,选中才显示标题; selected...:选中才显示标题; labeled:标题一直显示; unlabeled:只显示 icon,不显示标题。...身为猿猿,面对实际开发中遇到的问题,一定要采取多方案,首要保证内容、结果的输出,其次才是合理的循循渐进的优化。 2、BottomNavigationView Item 长按提示怎么搞掉?...参考资料 BottomNavigationView Material design - Bottom Navigation lottie lottie-android 提示 欢迎各位关注

3.7K21
  • 听说谷歌Baba更新了 Material UI ...

    本文预计阅读:10分钟 听说谷歌Baba的IO大会更新了一些新奇的小玩意~ 新东西忒多,这里先重点关注下有关:Material UI。 最近的状态啊,真是千万头草泥马奔腾而过。。。...来瓶哇哈哈,精神抖擞来一波~ 简单回顾 Material Design,是谷歌在14年的IO大会上提出的一种新的理念,也被称为新的设计语言(也被称为“原材料设计”),称它为设计语言不为过,但是实际上,这仅仅是谷歌提倡的一种新的设计风格...// 2.修改编译版本为 android - P compileSdkVersion 'android-P' Step 3:移除项目工程中依赖的v7包以及添加material依赖 dependencies...那下面按照步骤操作一次: Step 1:在布局中添加BottomNavigationView: material.bottomnavigation.BottomNavigationView...这里再次简单描述相关细节: Bottom Sheets具有五种状态: STATE_COLLAPSED: Bottom Sheets是可见的,但只显示可视(部分)高度。

    3K20

    1. Jetpack源码解析---看完你就知道Navigation是什么了?

    ,后者就是我们要设计的Navigation布局文件. 2.1.3 navigation_main.xml 在Android Studio3.2版本以上里面内嵌了Navigation的设计面板工具,我们可以在...2.2 BottomNavigationView使用 2.2.1 配置文件 和上面的步骤类似:也是配置好 navigation.xml布局以及 BottomNavigationView所对应的menu...查看它的方法实现: ? 我们看到它重载了很多方法,包括我们上面提到的NavigationView、ToolBar、BottomNavigationView、DrawerLayout。...在初始化的时候通过addDestination()放到数组mNodes中,而mId则就是我们的MenuItem的ID,所以很清楚了吧。 4....到这里基本的代码实现已经了解的差不多了,然后我回到了入口,通过初始化NavController,调用NavigationUI中的方法绑定NavigationView、ToolBar、BottomNavigationView

    2.6K30

    Android学习(简单使用Bottom Navigation Activity来实现底部导航栏)

    好系统自带的模板往往可以起到事半功倍的效果。下面我们就来看看如何使用Bottom Navigation Activity来完成简单的底部导航栏功能。...那么如何更改点击后的页面呢? 自定义切换页面(Fragment) 这里我们使用framgment来切换页面。...return true; } return false; } }; // 设置默认进来是tab 显示的页面...还是先看一下效果,一个button和一个textview,点击button显示现在的时间: 文件结构 之前版本创建后只有一个java文件,现在是有多个文件: dashboard,home,notifications...fragment用来显示ui界面,而viewmodel则是给ui界面提供数据,view里的每一个控件在viewmodel里都有一个对应的数据对象,如果要更新view上的ui界面,只需要更新viewmodel

    2.5K10

    ASM字节码插桩

    以往手动形式埋点 以往的埋点方式都是人为进行定义名称和选择性埋点,版本迭代多次后造成埋点数量持续增加。...,无法还原用户使用场景 * 每个版本迭代都需要PM,RD进行埋点梳理,时间进行消耗 全埋点 * 无法在每个按钮,页面加载调用代码,只需要在应用初始化加载即可 * 用户行为触发自动上报,无需PM...思考应该在哪个页面进行埋点 * 可配置化,可以选择过滤上报页面,事件,或者特定页面增加属性上报 * 版本迭代不需要重新进行埋点 如何进行?...ASM的设计和实现是尽可能的小和尽可能快,所以它非常适合在动态系统中使用(但当然也可以以静态方式使用,例如在编译器中使用)。 更多关于框架ASM的远离和具体使用在这里就不赘述了。 如何使用?...;)Z', 'Landroid/support/design/widget/BottomNavigationView$OnNavigationItemSelectedListener

    1K50

    1. Android_Jetpack组件---Naviagtion源码解析

    ,后者就是我们要设计的Navigation布局文件. 2.1.3 navigation_main.xml 在Android Studio3.2版本以上里面内嵌了Navigation的设计面板工具,我们可以在...2.2 BottomNavigationView使用 2.2.1 配置文件 和上面的步骤类似:也是配置好 navigation.xml布局以及 BottomNavigationView所对应的menu...查看它的方法实现: ? 我们看到它重载了很多方法,包括我们上面提到的NavigationView、ToolBar、BottomNavigationView、DrawerLayout。...在初始化的时候通过addDestination()放到数组mNodes中,而mId则就是我们的MenuItem的ID,所以很清楚了吧。 4....到这里基本的代码实现已经了解的差不多了,然后我回到了入口,通过初始化NavController,调用NavigationUI中的方法绑定NavigationView、ToolBar、BottomNavigationView

    2.2K10

    1. Jetpack源码解析---看完你就知道Navigation是什么了?

    ,后者就是我们要设计的Navigation布局文件. 2.1.3 navigation_main.xml 在Android Studio3.2版本以上里面内嵌了Navigation的设计面板工具,我们可以在...2.2 BottomNavigationView使用 2.2.1 配置文件 和上面的步骤类似:也是配置好 navigation.xml布局以及 BottomNavigationView所对应的menu菜单文件...查看它的方法实现: 我们看到它重载了很多方法,包括我们上面提到的NavigationView、ToolBar、BottomNavigationView、DrawerLayout。...fragment的相关信息: 在初始化的时候通过addDestination()放到数组mNodes中,而mId则就是我们的MenuItem的ID,所以很清楚了吧。...到这里基本的代码实现已经了解的差不多了,然后我回到了入口,通过初始化NavController,调用NavigationUI中的方法绑定NavigationView、ToolBar、BottomNavigationView

    2.2K20

    安卓软件开发:使用Jetpack Compose实现高级NimNavBottomApp

    一、项目背景 展示 Jetpack Compose 如何简化 UI 的编码,如何使用 Material 3 提供的组件实现现代化的 Android 应用设计。...这个Demo,我实现了一个常见的底部导航栏App,包括多个页面切换、选中状态的高亮显示、徽章通知的显示等功能。...二、项目开发 2.1 介绍Badges UI组件 底部导航栏的每个菜单项展示图标和标签,还可以显示通知徽章。徽章可以提醒用户有未读的消息or待处理的任务。...中高级开发者看这个视频了解如何通过底部导航栏实现徽章的动态更新。...3.2 徽章的动态更新 需要根据用户的操作或者后端的反馈,动态更新每个导航项的通知徽章。为此,通过一个Map存储每个页面的通知数量,根据页面的变化动态显示或隐藏徽章。

    264101

    Base封装之我的最简MVP架构

    而MVP中view通过presenter访问model,大大的减小了耦合性,业务逻辑都交给P处理,通过P访问V层更改UI。MVP模式可以分离显示层与逻辑层,它们之间通过接口进行通信,降低耦合。...理想化的MVP模式可以实现同一份逻辑代码搭配不同的显示界面,因为它们之间并不依赖与具体,而是依赖于抽象。...对象,那么我们每个P里面一般都用构造去初始化这个View,类多了之后感觉很烦,而View层里的一些常用的方法我们也可以封到base里面,比如loading的显示隐藏,空布局和错误布局的显示… 2.Base...; import android.view.MenuItem;import android.view.View; import android.widget.Button;import android.widget.TextView...@Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch

    1.4K90

    Base封装(一)--我的最简MVP架构

    而MVP中view通过presenter访问model,大大的减小了耦合性,业务逻辑都交给P处理,通过P访问V层更改UI。MVP模式可以分离显示层与逻辑层,它们之间通过接口进行通信,降低耦合。...理想化的MVP模式可以实现同一份逻辑代码搭配不同的显示界面,因为它们之间并不依赖与具体,而是依赖于抽象。...对象,那么我们每个P里面一般都用构造去初始化这个View,类多了之后感觉很烦,而View层里的一些常用的方法我们也可以封到base里面,比如loading的显示隐藏,空布局和错误布局的显示… 2.Base...; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.TextView...() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    59410

    Angular 6正式版发布,都有哪些新功能

    学习更多关于如何使用ng update , 开始学习如何创建您自己的 ng update 语法,可以参考 rxjs 的 package.json 的入口,它关联了 collection.json。...Angular Material + CDK 组件 最值得一提的是用于显示分层数据的树形控件,遵循数据表组件的模式,CDK 包含树的核心指令,而 Angular Material 则提供与顶层的 Material...Angular还更新了徽章(badge)和底部菜单栏的组件,徽章用于显示小而有用的信息,例如未读信息的数量。...之前只有 v4 和 v6 是 LTS 版本,但为了使开发者从一个主版本更新到另一个主版本更容易,并给予项目充足的时间来规划更新,Angular 团队表示从 v4 开始,将扩大对所有主版本的长期支持。...如何更新到 Angular 6.0.0 读者可以访问 update.angular.io 来得到升级应用的信息和指导。

    4.2K20
    领券