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

具有不同色调颜色的BottomNavigationView更改项目图标

BottomNavigationView是Android中的一个UI组件,用于在底部导航栏中显示多个项目图标。它通常用于切换不同的页面或功能模块。

具有不同色调颜色的BottomNavigationView更改项目图标可以通过以下步骤实现:

  1. 首先,确保你的项目中已经引入了BottomNavigationView组件的依赖库。可以在项目的build.gradle文件中添加以下依赖:
代码语言:txt
复制
implementation 'com.google.android.material:material:1.4.0'
  1. 在布局文件中添加BottomNavigationView组件。例如,在XML布局文件中添加以下代码:
代码语言:txt
复制
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu" />
  1. 创建一个menu资源文件,用于定义BottomNavigationView中的项目图标和标签。例如,创建一个名为"bottom_navigation_menu.xml"的文件,并添加以下代码:
代码语言:txt
复制
<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>

在上述代码中,你可以为每个项目指定不同的图标和标签。

  1. 在Activity或Fragment中找到BottomNavigationView,并为其设置监听器和颜色。
代码语言:txt
复制
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        // 处理项目选中事件
        return true;
    }
});

// 设置不同色调颜色
bottomNavigationView.setItemIconTintList(createColorStateList(
        ContextCompat.getColor(this, R.color.colorInactive), // 未选中时的颜色
        ContextCompat.getColor(this, R.color.colorActive) // 选中时的颜色
));

在上述代码中,你可以根据需要自定义未选中和选中时的颜色。

至此,你已经成功实现了具有不同色调颜色的BottomNavigationView更改项目图标。根据具体的业务需求,你可以根据选中事件来切换页面或执行其他操作。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

再不迁移到Material Design Components 就out啦

它使用AppCompat主题,设计支持库中小部件(包括具有自定义背景按钮)以及需要迁移各种其他元素。...MDC 1.1.0更改了一些默认小部件样式,以更好地符合“材料设计”准则。...但是,升级后,您可能会注意到某些控件颜色和其他属性某些意外更改。 ? 在上面的示例中,按钮发生了变化、文本和图标颜色发生了变化。FAB 现在变成了蓝绿色,并且文本字段看起来完全不同。不用担心。...MDC颜色调色板直接从 Material Design color system 中绘制。...MDC窗口小部件使用这些属性来为其背景,文本,图标等着色。要了解哪些小部件使用哪种颜色,需要检查源代码中默认小部件样式。 AppCompat和框架中还存在一些颜色,但不再适用于此新系统。

3.2K30
  • Adobe Lightroom Classic 2021安装教程

    【UI 改进】  现在,同步、色调曲线和颜色具有更新外观,无论新用户还是经验丰富用户,都能够更轻松地从这些基本工具中获得最大价值。  ...“同步”图标显示同步的当前状态,将鼠标悬停在图标上方可查看有关当前状态更多信息。单击“同步”图标将打开一个弹出菜单,其中包含基于当前同步状态更多选项和详细信息。  ...在应用局部调整时使用新“色相”滑块来更改选定区域色相。  2、滑块顶栏是参考色相栏,底栏是色相滑块。“色相”滑块和“色相”滑块中心颜色基于所选区域颜色。...要创建 ISO 自适应预设,请执行以下操作:  1、标识两个或多个具有要用于创建预设不同 ISO 值图像。  2、对这些图像进行必要编辑。...例如,为不同 ISO 图像设置不同“减少明亮度杂色”值。  3、选择这些图像,然后单击创建预设。有关创建预设更多信息。

    2.4K60

    BottomNavigationView使用,配合ViewPager、修改图标大小、去掉文字等

    目录 1、布局 2、常用属性 3、设置监听 4、默认选中 5、配合ViewPager 6、添加角标 7、修改图标大小 8、去除波纹效果 9、Github MaterialDesign中一个底部导航栏...app:itemIconTint 图标颜色 app:itemTextColor 文字颜色 app:menu 导航菜单 app:labelVisibilityMode 文字显示状态,等于labeled时候...BottomNavigationViewitem也选中,BottomNavigationViewitem选中时候让ViewPager切换page 6、添加角标 查看:BottomNavigationView...添加角标(BadgeView) 7、修改图标大小 源码开放方法: /** * Set the size to provide for the menu item icons...app:itemBackground="@null" 我目前简单粗暴方案,设置波纹颜色和背景颜色一致,达到看不出效果。。

    1.4K60

    不懂设计产品不是好开发

    如果这些类别在语义上可以分为两组,我就会首先为第一组挑选3种具有类似调和性颜色。然后,我将为第二组找到每种颜色互补色。 色彩理论是一个巨大的话题,而且它并不简单。为背景找到合适颜色需要进行实验。...因为一些Material组件可能会在阴影、边界等方面使用不同primaryColor色调。 Material设计指南中给我们提供了这样一个工具,来方便开发者设置这些颜色。...它们可以以光栅或矢量图像形式下载。比起光栅图像,我更喜欢矢量图像,因为它们是可伸缩,而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...图标字体是用字体中字形绘制,但不是字母,而是图标和形状。在Android项目中,我们将SVG文件中材质设计图标作为XML文件添加到资源文件夹中。...然而,在Flutter项目中,我们不需要明确地将它们添加到项目中,因为所有的图标都可以作为字体字形一次性添加。

    2.5K20

    Refactoring UI

    图标(尤其是实心图标) 一般都很 "重",而且覆盖面积很大 当你把图标放在一些文字旁边时,图标往往会给人突出感觉 与文字不同图标的 "重量 "是无法改变, 因此要创建平衡,就需要通过其他方式来淡化它...,填补空白,直到得到所需颜色项目中最深文字选择一种颜色,从而挑选出最深灰色 为项目中最浅色背景选择一种颜色, 从而挑选出最浅灰色 如果可以的话,尽量避免频繁添加新色调。...人眼对色彩感知方式不同,每种色调都有其固有的感知亮度 将一种颜色 RGB 分量代入这个公式, 就能计算出该颜色感知亮度 从最暗色调到最亮色调,感知亮度并不是简单线性变化,而是存在三个不同局部最小值...,而不仅仅是变浅或变深 由于不同色调具有不同感知亮度,改变颜色亮度另一种方法就是旋转色调 要使颜色变浅,可将色调向最近色调旋转 60°、 180° 或 300° 要使颜色变暗,可将色调向最近色调旋转...# 更改背景颜色 这对于强调单个板块以及在整个页面部分之间增加一些区别非常有效 如果想要更有活力,你甚至可以使用轻微渐变色 为了达到最佳效果,应使用相差不超过 30° 两种色调 # 使用重复图案

    75730

    从零到壹 | 打造全新游戏次元空间

    (2)颜色降噪:多彩图标单独来说具有不错视觉表现,但整体上缺乏关联性,且作为“基础图标”以及从“品牌性”“一致性”方面考虑也存在着挑战,对于品牌色透出不够完善,因此需要进行整体颜色降噪”,增强品牌色调感知...色调延续 主色调设计主要考虑两个方面:1.游戏中心本身存在于手机QQ,用户对于手机QQ具有强烈品牌色调感知,因此对于游戏中心本身,希望可以起到一个延伸和承接;2.基于次元空间-科技感本身颜色感知...最终确定游戏中心色调为蓝色调,并且使用大跨度渐变效果,让颜色具有炫光感觉。 颜色拓展及分类 手机QQ游戏中心作为一个多元化游戏平台,很难使用单一颜色来表达完整内容层次。...因此基于不同颜色性格,以蓝色为主调,拓展出“红黄绿”三种颜色作为辅助使用颜色,用来表达不同内容感知。...依据功能调性、冷暖、以及用户常规普识性感知,结合以上四种色调调性划分,对不同类型功能进行赋予不同点缀色彩。

    62720

    Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)

    一、启动白屏优化   首先我们处理白屏问题,首先我想更改一下启动页样式,之前是一片白,现在我改成绿色,绿才有安全感,要想代码过得去,样式就得带点绿,手动滑稽。...,而你颜色值样式什么都没有很规范的话,不建议你直接在自己项目进行操作,要花很多时间去改。   ...这里改动其实不在nav_menu.xml中 而在NavigationView中,如下图所示: 通过itemIconTint改图标颜色,通过itemTextColor改文字颜色即可。 5....BottomNavigationView   在AppHomeActivity中是通过BottomNavigationView去进行底部导航,那么它item有一个选中效果,还有未选中效果,同时还需要适配深色模式...属性去设置图标颜色,这里在深色模式下改成白

    1.1K10

    2018年最好医疗网站设计及配色赏析

    网站整体色调优雅大方,不同层次紫色卡片设计能循序渐进对顾客进行引导。CTA部分设计以深紫色做为强调,吸引点击,从而增加转化。 3. ...那么,在医疗类网站设计中,有哪些可以遵守设计原则呢? 网站色调搭配是一个影响网页重要因素。不同颜色会产生不同效果。 ? (1)红色:红色会使人兴奋,并且感到紧张不安。...搭配:不能大面积使用,只能小块地与其他色彩搭配起点缀作用。 (7)白色:白色是网页设计中通用颜色,它具有容易突出彩度特性。 搭配:搭配黑色显得高贵具有都市气息,但不适合作为医疗网站主色调。...在高保真网页原型中,色彩运用也同样是网页设计加分项目颜色搭配得当原型项目更有助于获得投资和赢取客户机会。那么,你需要是选择一款支持色料库原型设计工具,而非单色线框图工具。...国产原型设计工具Mockplus中可直接通过色号或使用拾色器来设置组件、图标颜色。对于网页设计、App设计都是非常友好。 ?

    1.5K20

    Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)

    添加好之后,点击Sync进行项目同步,同步时会自动下载这些依赖库并配置到你项目中。...可以看到,底部导航栏已经出来了,而且还可以点击,点击之后还有动画效果,并且图标和文字颜色还有变化,因为实际上我只是放了灰色图标而已。...那么这些工作就都是BottomNavigationView帮我们完成,的确是省了不少事情,当然这个动画效果和点击之后颜色都是可以让开发者自行改。...不过在运行之前把BFragment中接收参数并且弹Toast代码删掉,否则切换时候拿不到这个参数,就会ANR。 运行看看吧。 ? 下面来改一下切换后图标颜色和文字颜色吧。...,这里传入刚才传入颜色样式。

    9.8K42

    Android Notes|BottomNavigationView 爱上 Lottie

    以前大部分项目底部导航栏关于图片部分实现,要么两套图 selector 切换,要么通过着色器 tint 进行渲染,总之最后呈现效果便是在点击时两张图静态切换,说 Low 吧,也还凑合,但是总是没那么高大上...项目重构时,韩总说了,之前方式呈现效果太 Low 了,这次重构要求底部要动。(内心默默来句,你咋不上天。) 先来看个两者间对比效果吧~ 效果对比 原有两张静态图切换: ? 小动画浪起来: ?...= bottomNavigationView composition = result.value } } /** * 获取不同模式下 Lottie json 文件 */...下面是我陷入误区思路: 我想着因为是通过 playAnimation 开始执行动画从而过渡到最后颜色,那么对应 endAnimation 应该是直接能回到初始状态。...apply { playAnimation() } // 这里判断如果当前点击和上一次点击索引不同,则将上一次点击索引位置 MenuItem Icon 替换

    3.7K21

    成为优秀UI设计师,必须了解UI设计规范

    2  多用布尔运算 在做图标的时候,能用基本图形进行布尔运算时候,尽量不要使用钢笔,这样做好处有如下几点: 让你图标更加规范 对图形结构理解更加深刻 后期更改形状更加方便 2.png 3  独特风格...在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。...那么,在图标的设计中,我们也必须强调“品牌性”,简单说就是把品牌中抽象概念变成具象化图形,把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题作品,提升自己平面设计能力。...标注规范 如何把标注思路整理清晰——结构化思维进行拆解,将大问题拆解成小问题,逐一击破! 3.png 标注主要是以下四种不同属性内容:尺寸、文字、间距、颜色。...2  命名格式 一个大型项目会分很多模块,每个模块由不同设计师来独立完成,还有人会专门管理公共组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型切图,还有一种就是各个模块特有的切图

    83940

    Illustrator 2022 for mac (AI 2022中文版)

    该软件具有优秀绘图工具和性能,可用于创建标志、插画、网页图像、海报等各种类型设计作品。...用户可以根据自己喜好选择不同主题颜色和布局。 高级绘图工具:AI 2022中文版提供了丰富绘图工具,包括画笔、路径、形状、文字等,使设计师可以轻松创建各种类型矢量图形。...新颜色管理工具:AI 2022中文版新增了颜色主题和颜色调整工具,让用户可以更轻松地管理颜色,实现更精准配色。...改进插图库和图标集:AI 2022中文版内置了许多插图库和图标集,为设计师提供了更多素材选择。...在AI 2022中文版中,增加了许多新功能和改进,例如: 增强现代化界面,提供更快、更流畅工作体验。 新颜色主题和颜色调整工具,使设计师可以更轻松地管理颜色

    44930

    Material Design Lite,简洁惊艳前端工具箱

    一、设计语言 github项目地址:https://github.com/google/material-design-lite 拟真 vs....: 在Material Design中,屏幕里看上去平整一个 App 界面,事实上不同控件之间都拥有 着层级关系。...在每个调色板中,色调为500颜色为基准色,其他颜色是基准色在不同色调(50-900, A100-700) 下表现。 在右边示例代码中,我们绘制了Material Design完整调色板集。...每一行是一个调色板, 每一列表示一个色调。你可以将鼠标移动到一个颜色上,查看其RGB值。...工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500颜色为基准色。状态栏应当选择 调色板中比基准色略深色调为700颜色

    94910

    首个开发者版公布,三方图标随壁纸变色,电量管理系统也安排上了

    根据谷歌给出发布计划,正式版最早在8月放出: 那这版安卓又增添了哪些新功能?来一起看一看~ 界面语言隐私全面更新 在Android 13中,最显眼是界面的变化,尤其是主题图标的改变。...之前我们在给手机换壁纸时候,App图标颜色一直不会改变,有时候看起来很违和。 这次谷歌把动态颜色功能扩展到了所有应用上。...开发者只需要提供一个单色图标,在用户更换壁纸时,桌面上图标就会根据壁纸色调自动调整。...例如我们把界面改为深色模式之后,应用图标也随之变为深色: 面对不同色调壁纸,App颜色也会随之更改: 这项功能最初会在Pixel手机上应用,不过谷歌也正在和制造商沟通,把它拓展到其他设备上。...这个新系统会根据当前电量给不同App分配“信用点”,用来管理排队任务。

    73920

    Material Design Lite ,简洁惊艳前端工具箱

    不同控件之间层级关系会使用阴影作为表示,而阴影深浅,代表正是这个 控件在 Z 轴高度: ?...在每个调色板中,色调为500颜色为基准色,其他颜色是基准色在不同色调(50-900, A100-700) 下表现。 在右边示例代码中,我们绘制了Material Design完整调色板集。...每一行是一个调色板, 每一列表示一个色调。你可以将鼠标移动到一个颜色上,查看其RGB值。...工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500颜色为基准色。状态栏应当选择 调色板中比基准色略深色调为700颜色。...在页面中要使用图标字体,只需要应用上面定义material-icons样式: face 上面的示例创建了一个笑脸图标,face用来指定要显示图标

    1.3K30

    使用 TailwindCSS 中 color-mix() 构建自定义调色板

    ,分为两个部分:较浅颜色色调变体)和较深颜色(阴影变体)。...使用 color-mix() 生成具有色调和阴影变体调色板 color-mix()是一个 CSS 函数,它接受两种颜色并根据给定颜色空间返回所需混合颜色变体。...和blendingColor可以是任何 CSS 支持颜色值,但我们也可以使用color-mix()不同颜色空间进行颜色混合,从 sRGB 到 HSL。...结果颜色将根据所选颜色空间而有所不同。在这篇文章中,我们将使用 sRGB 作为我们色彩空间。...接下来,我们将应用相同方法来生成阴影变体。 生成阴影变体 虽然色调是由颜色与白色混合产生变体,但作为较暗变体,阴影是由我们目标颜色与黑色以某种强度级别混合产生颜色

    49920

    重磅!iOS应用黑暗模式设计终极指南(附套件下载)

    对,这就是语义化颜色。除了给每个元素提供颜色之外,您还可以给它提供一种语义颜色,该语义颜色会同时具有两种模式两种颜色。...这就是与开发人员进行“和谐”对话所需全部知识。 05 填充颜色和灰色 iOS准则提供了4种填充颜色(也为灰色)和6种其他灰色可供选择。它们是界面上所有元素理想选择,例如字形(图标),UI控件等。...08 强调色(Tint Color) Apple提供了9种不同强调颜色,可在整个应用程序中使用。它们可用于文本,图标或形状。我将下面的强调色改为不同颜色,你会发现他们会变成这样: ?...但是,这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下颜色是稍有差异,请务必注意。...另一个例子,如上图,对于明暗模式,同一文本具有两种不同颜色。有时很难在两种模式下都选择通过对比度测试相同颜色。因此,您可以为两种模式选择2种不同颜色

    3.3K10

    高效地将 TailwindCSS 与 Nuxt 结合使用

    您可以根据自己喜好更改为任何名称。 如果您对TailwindCSS和Nuxt.js工作原理有基本了解,那么对遵循本教程将会有所帮助。...theme: {}, variants: {}, plugins: [], purge: {} } 让我们看一下该文件中定义属性: theme- 我们在其中设置所有项目的附加自定义主题...,其中键是颜色深浅(通常从 50 到 900),值是颜色代码。...例如,以下代码定义了一个名为 调色板sea-buckthorn,其色调范围为 50 到 900,以及每种色调颜色代码: module.exports = { theme: { extend...真正挑战来了。我们如何决定每个颜色主题深浅?有很多方法可以做到这一点,从基于某种颜色理论手动计算阴影或使用外部工具为我们执行相同任务。

    59520

    图表美化教程|图案与形状填充

    注意我刚才选用素材是从PPT美化大师形状中插入矢量素材(可编辑形状),当然如果是使用像素图的话也可以,不过颜色无法更改。...在填充形状时候,一定要填充前自定义好形状颜色,否则填充之后是无法更换颜色。 填充咖啡: 图片填充: 下面的WiFi标识是一个(位图)像素图,无法更改颜色。...不过要是能够找到挺精致而且颜色也很协调图标的话,填充效果也是棒棒哒,如果觉得填充值后图标太大了,没关系,将数据条之间间距调小,图标就会自动等比缩放(前提是勾选层叠)。...至于间距多少合适,自己看着调啦~ 图案填充: excel图案填充功能非常有趣,里面内置了大概42款不同图案样式,而且你可以自己定义前景色、背景并调制出自己喜欢图案样式。...前景色与背景色调制规则(前景色一定要用深色,背景色使用同一色系浅色) 只有你想不到,没有它做不到,这种纹理填充风格,非常类似于咨询公司研究报告中图表风格。

    1.4K60
    领券