[英]How to increase icon size in android bottom navigation layout?
I am using the bottom layout navigation style in android that was recently introduced by google in design library 25. In all the tutorials and questions i see, the images in their icons are a normal size, but mine are extra small, despite the fact that the image I'm saving to drawable folder is 72x72.我正在使用谷歌最近在设计库 25 中引入的 android 底部布局导航样式。在我看到的所有教程和问题中,他们图标中的图像都是正常大小,但我的却非常小,尽管事实上我保存到可绘制文件夹的图像是 72x72。 Here is a screenshot:
这是一个屏幕截图:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_home"
android:title="test"
android:icon="@drawable/tabbarglossary"
app:showAsAction="always|withText"
/>
<item
android:id="@+id/menu_search"
android:title="test2"
android:icon="@drawable/mediationtabbar"
app:showAsAction="always|withText"
/>
<item
android:id="@+id/menu_notifications"
android:title="test3"
android:icon="@drawable/ic_action_name"
app:showAsAction="always|withText"
/>
</menu>
The icon size is hardcoded to 24dp in the item layout (see design_bottom_navigation_item.xml ) This can be changed programmatically:图标大小在项目布局中硬编码为 24dp(请参阅design_bottom_navigation_item.xml )这可以通过编程方式更改:
BottomNavigationView bottomNavigationView = (BottomNavigationView) activity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
final View iconView = menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
// set your height here
layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
// set your width here
layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
iconView.setLayoutParams(layoutParams);
}
EDIT编辑
For your problem that the icon covers your text:对于图标覆盖文本的问题:
You can override some default dimensions of the bottom navigation view.您可以覆盖底部导航视图的一些默认尺寸。 For example the height.
比如身高。
<dimen name="design_bottom_navigation_height" tools:override="true">56dp</dimen>
Check guidelines bottom navigation for default specs.检查默认规格的指南底部导航。
使用您的首选值设置app:itemIconSize
属性。
Add these two lines to your bottom navigation:将这两行添加到您的底部导航:
app:menu="@menu/main_bottom_navigation"
app:itemIconSize="@dimen/bottom_navigation_icon_size"
In dimens.xml
add:在
dimens.xml
添加:
<dimen name="bottom_navigation_icon_size" tools:override="true">32dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">72dp</dimen>
To increase the size of the icons, increase bottom_navigation_icon_size
.要增加图标的大小,请增加
bottom_navigation_icon_size
。 You may need to change the value of design_bottom_navigation_height
so that the text does not overlap or you get too much white space.您可能需要更改
design_bottom_navigation_height
的值,以便文本不会重叠或获得太多空白。
I would try using the Android Asset Studio to generate an generic icon for you, ensure that:我会尝试使用Android Asset Studio为您生成一个通用图标,确保:
Note : you can use a custom icon if you wish to do so.注意:如果您愿意,可以使用自定义图标。
It'll then generate you the corresponding drawable the with correct directory (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).然后它会用正确的目录(mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi)为你生成相应的drawable。
Having static drawable dimensions such as 72x72 in your case may change the size of the icon depending on the density of your phone, different phones will translate pixels differently.在您的案例中使用静态可绘制尺寸(例如 72x72)可能会根据手机的密度改变图标的大小,不同的手机会以不同的方式转换像素。
Just simply download the icons in a zip file and extract the drawable folders to your resources directory, this should solve your problem.只需简单地下载 zip 文件中的图标并将可绘制文件夹解压缩到您的资源目录,这应该可以解决您的问题。
Here:这里:
BottomNavigationView bottomNavigationView = (BottomNavigationView)
configurationActivity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView)
bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
final View iconView =
menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
final ViewGroup.LayoutParams layoutParams =
iconView.getLayoutParams();
final DisplayMetrics displayMetrics =
getResources().getDisplayMetrics();
layoutParams.height = (int)
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20,
displayMetrics);
layoutParams.width = (int)
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20,
displayMetrics);
iconView.setLayoutParams(layoutParams);
}
you can adjust the size of images as like you want.您可以根据需要调整图像的大小。 Happy Coding
快乐编码
在 dimens.xml 中覆盖:
<dimen name="design_bottom_navigation_icon_size" tools:override="true">'your size in dp'</dimen>
in Kotlin在科特林
For those who wana try it on android-X and want the only one item to change its size this is the code i have modified a little bit From @Minkoo对于那些想在 android-X 上尝试它并希望唯一一个项目改变其大小的人,这是我稍微修改过的代码来自@Minkoo
//the code start from here.... //代码从这里开始....
val bottomNavigationView: BottomNavigationView =findViewById(R.id.bottomNavigationView); val bottomNavigationView: BottomNavigationView =findViewById(R.id.bottomNavigationView); val menuView: BottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
val menuView: BottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
for (i in 0..menuView.getChildCount() - 1) { for (i in 0..menuView.getChildCount() - 1) {
if (i == 2) {
val iconView: View = menuView.getChildAt(i)
.findViewById(com.google.android.material.R.id.icon) as View
val layoutParams: ViewGroup.LayoutParams = iconView.getLayoutParams();
val displayMetrics: DisplayMetrics = getResources().getDisplayMetrics();
// set your height here
layoutParams.height =
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 38f, displayMetrics)
.toInt()
// set your width here
layoutParams.width =
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 38f, displayMetrics)
.toInt()
iconView.setLayoutParams(layoutParams);
}
}
For Androidx BottomNavigationView<\/strong>对于 Androidx BottomNavigationView<\/strong>
iterate over each child and change icon size with 'setIconSize()' method (consider @SuppressLint("RestrictedApi"))迭代每个孩子并使用'setIconSize()'方法更改图标大小(考虑@SuppressLint(“RestrictedApi”))
val menuView: BottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
for (i in 0 until menuView.childCount) {
if (i == 3) {
val displayMetrics: DisplayMetrics = resources.displayMetrics
(menuView.getChildAt(i) as NavigationBarItemView).setIconSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 41f, displayMetrics).toInt())
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.