Android Bottom Navigation bar 4 Items not showing properly on some devices

Question

I got a little problem, as I'm trying to add 4 Icons to a Bottom Navigation Bar in Android.

On some devices it looks like this

But I want it to be looking like this

How to achieve that ? Thanks in advance

Don't know which code you need. Just added everything used by the viewpager for the Bottom navigation Bar

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_stdplan:
                            viewPager.setCurrentItem(0);
                            break;
                        case R.id.action_klausur:
                            viewPager.setCurrentItem(1);
                            break;
                        case R.id.action_hausaufgaben:
                            viewPager.setCurrentItem(2);
                            break;
                        case R.id.action_fehlzeiten:
                            viewPager.setCurrentItem(3);
                            break;
                    }
                    return false;
                }
            });



    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }


        @Override
        public void onPageSelected(int position) {
            if (prevMenuItem != null) {
                prevMenuItem.setChecked(false);
            }
            else
            {
                bottomNavigationView.getMenu().getItem(0).setChecked(false);
            }
            Log.d("page", "onPageSelected: "+position);
            bottomNavigationView.getMenu().getItem(position).setChecked(true);
            prevMenuItem = bottomNavigationView.getMenu().getItem(position);

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    stdplanFragment =new StdplanFragment();
    klausurenFragment =new KlausurenFragment();
    hausaufgabenFragment =new HausaufgabenFragment();
    fehlzeitenFragment =new FehlzeitenFragment();
    adapter.addFragment(stdplanFragment);
    adapter.addFragment(klausurenFragment);
    adapter.addFragment(hausaufgabenFragment);
    adapter.addFragment(fehlzeitenFragment);
    viewPager.setAdapter(adapter);
}

}

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_stdplan"
        android:checked="true"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/tab1"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_klausur"
        android:checked="false"
        android:icon="@android:drawable/ic_menu_agenda"
        android:title="@string/tab2"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_hausaufgaben"
        android:checked="false"
        android:icon="@android:drawable/ic_menu_manage"
        android:title="Hausaufgaben"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_fehlzeiten"
        android:checked="false"
        android:icon="@android:drawable/ic_menu_recent_history"
        android:title="@string/tab3"
        app:showAsAction="never" />
</menu>

Answer 1

I fixed it myself by changing the font size of the titles

Everyone else struggling with this: Just add these two lines to your dimens.xml

  <dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
  <dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>

Answer 2

It could be a problem from a smallest thing possible. Not sure if it has anything to do with the image icons you have used, but can you please see if the image icons happen to have any paddings ie in the image itself?

Also for debugging purposes please remove the titles or keep them empty and see if it aligns the image icons properly.

Can you please change the following,

app:showAsAction="never"

to

app:showAsAction="ifRoom"

I would try following this link just in case.