Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase icon size in android bottom navigation layout?

Tags:

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. Here is a screenshot:

enter image description here

The icons should be at least 2, maybe even 3 times that size. How can I do it? Here is my code in my bottom_layout.xml:

  <?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>

and in my activity_main.xml:

 <android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:focusable="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    design:menu="@menu/bottom_layout" />

Thanks

like image 668
jjjjjjjj Avatar asked Apr 12 '17 07:04

jjjjjjjj


People also ask

What is the height of bottom navigation bar android?

The height of the bottom Navigation bar is 48dp (in both portrait and landscape mode) and is 42dp when the bar is placed vertically.

How do I change the order of the bottom navigation bar in Android?

You can also adjust the order of the buttons on the Navigation bar. From Settings, tap Display, and then tap Navigation bar. Make sure Buttons is selected, and then you can choose your desired button setup at the bottom of the screen.


2 Answers

set app:itemIconSize property with your preferred value.

like image 150
Jonatan Avatar answered Oct 08 '22 03:10

Jonatan


The icon size is hardcoded to 24dp in the item layout (see design_bottom_navigation_item.xml) This can be changed programmatically:

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.

like image 20
beeb Avatar answered Oct 08 '22 03:10

beeb