CODEWITHSUNDEEP
androidbottomnavigationview
faq700
faq700

Reputation: 111

BottomNavigation style

I have BottomNavigationView

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    app:itemTextColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    android:background="?android:attr/windowBackground"
    android:foreground="?attr/selectableItemBackground"
    app:itemIconTint="@android:color/white"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

when I use default styles in manifest everything is ok:

<application
    android:name=".model.MyApp"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

enter image description here

When I override default styles like this

 <style name="base" parent="Theme.AppCompat.Light.NoActionBar" >
    <item name="android:background">@color/grey_dark_bg_md</item>
    <item name="android:textColor">@color/white</item>
</style>

and manifest:

    <application
    android:name=".model.MyApp"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/base">
    <activity
        android

I get problems. Non active bottom navigation images cuts

enter image description here

whats wrong with styles?

Upvotes: 11

Views: 18981

Answers (2)

Đức L&#234; C&#244;ng
Đức L&#234; C&#244;ng

Reputation: 414

example BottomNavigationView in your xml layout file

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu"
            style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
            />

style attribute can be set to 1 of these:

  1. @style/Widget.MaterialComponents.BottomNavigationView
  2. @style/Widget.MaterialComponents.BottomNavigationView.Colored`
  3. @style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface
  4. @style/BottomNavigation <!-- this is your custom theme

your custom BottomNavigation in "themes.xml"

 <style name="BottomNavigation">
        <item name="android:background">?attr/colorSurface</item>
        <item name="backgroundTint">@null</item>
        <item name="elevation">@dimen/m3_sys_elevation_level2</item>
        <item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
        <item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
        <item name="itemRippleColor">@color/mtrl_navigation_bar_colored_ripple_color</item>
        <item name="itemIconTint">@color/mtrl_navigation_bar_colored_item_tint</item>
        <item name="itemTextColor">@color/mtrl_navigation_bar_colored_item_tint</item>
        <item name="itemPaddingTop">@dimen/m3_bottom_nav_item_padding_top</item>
        <item name="itemPaddingBottom">@dimen/m3_bottom_nav_item_padding_bottom</item>
        <item name="android:minHeight">@dimen/m3_bottom_nav_min_height</item>
        <item name="enforceTextAppearance">true</item>
        <item name="enforceMaterialTheme">true</item>
        <item name="labelVisibilityMode">labeled</item>
    </style>

you may need to hide label by set labelVisibilityMode attribute value to unlabeled

you may need to change attribute itemIconTint, itemTextColor, itemTextAppearanceInactive, itemTextAppearanceActive, by adding file res/color/bottom_navigation_tint.xml and set these attributes with this file name

<item name="itemTextAppearanceInactive">@color/bottom_navigation_tint</item>
<item name="itemTextAppearanceActive">@color/bottom_navigation_tint</item>
<item name="itemIconTint">@color/bottom_navigation_tint</item>
<item name="itemTextColor">@color/bottom_navigation_tint</item>

file res/color/bottom_navigation_tint.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true" />
    <item android:alpha="0.6" android:color="?attr/colorOnPrimary" />
</selector>

Upvotes: 3

Quang Le
Quang Le

Reputation: 351

You can set style for BottomNavigationView as below:

  1. Declare custom style in your styles.xml file.
<style name="BottomNavigation">
    <item name="android:background">@color/indigo</item>
    <item name="itemBackground">@drawable/navigation_bar_item_bg</item>
    <item name="itemIconTint">@color/navigation_bar_txt_color</item>
    <item name="itemTextColor">@color/navigation_bar_txt_color</item>
    <item name="paddingStart">@dimen/bottom_navigation_padding</item>
    <item name="paddingEnd">@dimen/bottom_navigation_padding</item>
</style>
  1. Apply this style to your BottomNavigationView via style attribute.
<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"
    style="@style/BottomNavigation"/>

Upvotes: 15

Related Questions