Bottom Navigation Icons are Cropped Android

Question

I'm assembling an app with a Botton navigation bar in Android with Android Studio. With two icons it looked fine, but when I added four, the icons look cropped. I can't find any other error like this. Any suggestions are welcomed.

Cropped icons bottom nav 4 options

Here is the code for the Bottom Navigation (bottom_navigation.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/action_lines"
        android:enabled="true"
        android:icon="@drawable/ic_lines_off"
        android:title="Lines"
        android:background="@android:color/transparent"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_contacts"
        android:enabled="true"
        android:icon="@drawable/ic_contacts_off"
        android:title="Contacts"
        android:background="@android:color/transparent"
        app:showAsAction="ifRoom" />


    <item
        android:id="@+id/action_conversations"
        android:enabled="true"
        android:icon="@drawable/ic_conversations_off"
        android:title="Conversations"
        android:background="@android:color/transparent"
    app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:enabled="true"
        android:icon="@drawable/ic_settings_off"
        android:title="Settings"
        android:background="@android:color/transparent"
        app:showAsAction="ifRoom" />

</menu>

In my activity.xml I call the bottom menu like this:

    <android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:itemIconTint="@drawable/bnv_tab_item_foreground"
    app:itemTextColor="@drawable/bnv_tab_item_foreground"
    app:menu="@menu/bottom_navigation" />

Question Update:

I tried changing

     app:showAsAction="ifRoom"

for

      app:showAsAction="always"

And it doesn't solve the problem. There is no change to the issue. And it does not show the tag in every icon as it should. Only on the selected one.

One way of solving it is adding a Theme to the bottom navigation call in activity, like this:

android:theme="?attr/toolbarNavigationButtonStyle"

I have no clue why it works, but it solves the issue apparently in lots of devices exept in Samsung Galaxy Note 8

Here is "bnv_tab_item_foreground"

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorAccent" />
    <item android:color="@android:color/darker_gray"  />
</selector>

score 0 · Answer 1 · answered Aug 03 '18 at 05:51

0

Try changing a value for the property below:-

app:showAsAction="always"

and if still, your problem persists, please provide the file "bnv_tab_item_foreground"

answered Aug 03 '18 at 05:51

PRERNA GUPTA

49
5

score 0 · Answer 2 · answered Aug 03 '18 at 16:11

0

Use Support Library 28. Then, just add app:labelVisibilityMode="labeled" to your BottomNavigationView XML declaration.

Hope this helps

answered Aug 03 '18 at 16:11

contrasting

376
3
6

score 0 · Answer 3 · answered Sep 23 '20 at 08:03

I believe this is being caused by your layout not fitting into the System window, and you can easily fix this by going to the Layout you have the Bottom Navigation and at the root layout add android:fitsSystemWindows="true" just like I did below

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
 
  <!--things come here -->

</RelativeLayout>

Bottom Navigation Icons are Cropped Android

3 Answers3