BottomNavigationView looks very bad

Question

I'm using android support library BottomNavigationView , it looks very bad in some versions of android .

this is my code :

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#fff"
    app:theme="@style/mydrawer"
    app:itemIconTint="@drawable/selector"
    app:itemTextColor="@drawable/selector"
    app:menu="@menu/bottom_navigation_items" />

in styles : 
 <style name="mydrawer">
        <item name="android:textSize">14sp</item>
    </style>

it looks good in my phone with android 6 but it look very bad on most of the phones , like this:

as you can see, the text size in enormous

how can I fix this ?

change textsize using dimensions .... then they will get the appropriate textsize according to screen sizes. — Umair, Jan 01 '18 at 13:16

score 1 · Answer 1 · answered Jan 01 '18 at 14:03

You specify one text size value for all devices:

 <style name="mydrawer">
     <item name="android:textSize">14sp</item>
 </style>

Instead of 14sp , you should specify value from dimens

 <style name="mydrawer">
     <item name="android:textSize">@dimen/bottom_bar_item_text_size</item>
 </style>

Create dimens.xml files for different screen sizes. You should create dimens.xml file for each screen size :

normal
large
xlarge
there are more of those, but those 3 are most common.

<dimen name="bottom_bar_item_text_size">14sp</dimen>

Your dimens.xml files will look like that :

Hope that helps

score 1 · Answer 2 · answered Jan 01 '18 at 14:09

1

You can use Bottom Navigation ViewEx for more customization and better appearence , usage is similar to that of normal view

check out the github

answered Jan 01 '18 at 14:09

this is yash

533
1
3
15

BottomNavigationView looks very bad

2 Answers2