I just added the BottomNavigation into my android app, but two of my four icons in there don't have the right color.
This is how it looks like in Android Studio Preview:
And this is how it looks like on the device:
All the icons are in my drawable folder.
This is the xml for the BottomNavigation:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/colorAccent"
app:itemTextColor="#color/colorAccent"
app:menu="#menu/bottom_navigation_main" />
And this is the xml for the items:
<item
android:id="#+id/action_home"
android:enabled="true"
android:icon="#drawable/ic_home_white_48dp"
android:title="#string/home"
app:showAsAction="always" />
<item
android:id="#+id/action_requests"
android:enabled="true"
android:icon="#drawable/ic_collections_white_48dp"
android:title="#string/requests"
app:showAsAction="always" />
<item
android:id="#+id/action_profile"
android:enabled="true"
android:icon="#drawable/ic_account_circle_white_48dp"
android:title="#string/profile"
app:showAsAction="always" />
<item
android:id="#+id/action_recents"
android:enabled="true"
android:icon="#drawable/ic_schedule_white_48dp"
android:title="#string/recents"
app:showAsAction="always" />
Hope you can help me.
While making a selector, always keep the default state at the end, otherwise only default state would be used. You need to reorder the items in your selector as:
And the state to be used with BottomNavigationBar is state_checked not state_selected.
Related
okay, Google Keeps-Notes and Lists App have a navigation drawer like this,
Google Keeps-Notes and Lists App Navigation Drawer(Original)
I want to do same exact as I mention in this image. I want this
'EDIT'
I want that EDIT (the TextView) at right side of navigation drawer.
I achieved this far,My Navigation Drawer
<group>
<item android:title="LABALS"
android:actionLayout="#layout/main_nav_drawer_edit">
<menu>
<item
android:id="#+id/navigation_drawer_lable"
android:title="Label 1" />
<item
android:id="#+id/navigation_drawer_create_new_label"
android:title="Create new label" />
</menu>
</item>
what should I do to achieve this, Is it possible?
Create a custom View and apply to the app:actionLayout attribute of your <item>.
<item
android:id="#+id/grp_labeled"
android:title="LABALS"
app:actionLayout="#layout/main_nav_drawer_edit">
<menu>
<item
android:id="#+id/navigation_drawer_lable"
android:title="Label 1" />
<item
android:id="#+id/navigation_drawer_create_new_label"
android:title="Create new label" />
</menu>
</item>
layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EDIT"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
like this?
I have a navigation bar with three tabs.
I'd like to add a fourth and have them scroll. Instead when I add a fourth, the icons shrink and the names disappear until one of he tabs is selected.
Is it possible?
setLabelVisibilityMode gives the option for label to be displayed permanently against the items.
BottomNavigationView doesn't allow scrolling functionality as it is against the design guidelines.
Don’t.
Bottom navigation bar destinations don’t scroll.
If you were insistent, you could create a similar design using a RadioGroup and a series of ToggleButtons similar to this answer.
You can use this for showing both text and icons on BottomNevigationView for 3 to 5 items and stop shifting.
app:labelVisibilityMode="labeled"
1. Add this some line of code in BottomNevigationView as shown
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="#dimen/seventy_dp"
android:layout_semitransparent="true"
android:background="#color/colorBottomNev"
android:showAsAction="always|withText"
app:itemIconTint="#drawable/bottom_navigation_colors"
app:itemTextColor="#drawable/bottom_navigation_colors"
app:itemTextAppearanceActive="#style/BottomNavigationViewTextStyle"
app:itemTextAppearanceInactive="#style/BottomNavigationViewTextStyle"
app:menu="#menu/bottom_navigation_menu"
app:labelVisibilityMode="labeled"/>
2. Add Menu Items like as follows:-
<?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_catalogue"
android:icon="#drawable/catalogue"
android:title="#string/catalogue"
android:enabled="true"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_contracts"
android:icon="#drawable/contract"
android:title="#string/contracts"
android:enabled="true"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_prospects"
android:icon="#drawable/prospect"
android:title="#string/prospects"
android:enabled="true"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_performance"
android:icon="#drawable/performance"
android:title="#string/performance"
android:enabled="true"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_advance"
android:icon="#drawable/advance"
android:title="#string/advance"
android:enabled="true"
app:showAsAction="ifRoom" />
</menu>
3. Add this style in style.xml file:
<style name="BottomNavigationViewTextStyle">
<item name="android:fontFamily">#font/montmedium</item>
<item name="android:textSize">10sp</item>
<item name="android:duplicateParentState">true</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
</style>
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<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>
</resources>
I am trying to put active/inactive drawables for bottomnavigationview menu items. Going through several post in SO and browsing in Google I could find only setting colour for active/inactive state using app:itembackgroundColor what I want to achieve is set drawable when selected.
I tried this for menuitems
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/home_navigation_view_home_selector"
android:checked="false"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_dashboard"
android:icon="#drawable/home_navigation_view_oppurtunity_selector"
android:checked="false"
android:title="#string/title_oppurtunity" />
<item
android:id="#+id/navigation_notifications"
android:icon="#drawable/home_navigation_view_leads_selector"
android:checked="false"
android:title="#string/title_leads" />
<item
android:id="#+id/navigation_settings"
android:icon="#drawable/home_navigation_view_settings_selector"
android:checked="false"
android:title="#string/title_settings" />
</menu>
where
home_navigation_view_home_selector/
home_navigation_view_oppurtunity_selector/
home_navigation_view_leads_selector/
home_navigation_view_settings_selector
are selector for each item.
home_navigation_view_home_selector.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_home_selected"
android:state_checked="true" />
<item android:drawable="#drawable/ic_home_black_24dp" />
</selector>
the bottomnavigationview code is as follows
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/navigation" />
but doesn't seem to work.
Any help will be appreciated.
Try:
navigation.setItemIconTintList(null);
in your code.
Bottom Navigation View uses color tinting by default, so you have to disable it.
I set an icon for BottomNavigationView but it not show .
My code:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation" />
Menu :
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_tab_bhxh"
android:title="#string/main_tab_social_bhxh"
app:showAsAction="ifRoom" />
<item
android:id="#+id/navigation_dashboard"
android:icon="#drawable/ic_tab_bhxh"
android:title="#string/main_tab_social_bhyt"
app:showAsAction="ifRoom" />
<item
android:id="#+id/navigation_notifications"
android:icon="#drawable/ic_tab_bhxh"
android:title="#string/main_tab_social_news"
app:showAsAction="ifRoom" />
and my program :
If you have any suggest , please tell my know .
After tried some image with different background , I resolved my issue with icon background color is white .
Actually we have some text fields and icons in navigation menu drawer.we want some text fields are become transparent color and remaining items are in full black color..only icons are become a transparent not text in my app.so any one fix this issue?
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_dashboard"
android:enabled="true"
android:icon="#drawable/ic_dashboard_black_24dp"
android:title="Dashboard" />
<item
android:id="#+id/nav_my_business"
android:icon="#drawable/ic_business_center_black_24dp"
android:title="My Business" />
<item
android:id="#+id/nav_trending_gifs"
android:icon="#drawable/trending_gifts"
android:title="Trending Gifts" />
<item
android:id="#+id/nav_orders"
android:icon="#drawable/ic_description_black_24dp"
android:title="Orders" />
<item
android:id="#+id/nav_cards"
android:icon="#drawable/ic_card_giftcard_black_24dp"
android:title="E-Gift Cards & Vouchers" />
<item
android:id="#+id/nav_manage_my_store"
android:enabled="false"
android:icon="#drawable/ic_store_black_24dp"
android:title="Manage my store" />
<item
android:id="#+id/nav_payments"
android:enabled="false"
android:icon="#drawable/ic_payment_black_24dp"
android:title="Payments" />
<item
android:id="#+id/nav_mnager"
android:icon="#drawable/ads_manager"
android:enabled="false"
android:title="Ads Manager" />
<item
android:id="#+id/nav_reviews_ratings"
android:enabled="false"
android:icon="#drawable/ic_rate_review_black_24dp"
android:title="Reviews & Ratings" />
<item
android:id="#+id/nav_wallet"
android:enabled="false"
android:icon="#drawable/ic_account_balance_wallet_black_24dp"
android:title="Wallet" />
<item
android:id="#+id/nav_help"
android:enabled="false"
android:icon="#drawable/ic_help_black_24dp"
android:title="Help/Support" />
<item
android:id="#+id/nav_about"
android:enabled="false"
android:icon="#drawable/ic_info_black_24dp"
android:title="About" />
</group>
You can use tint color for icons to visible in any color. Something like this
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
**app:itemIconTint="#color/menu_icon"**
app:itemBackground="#color/menu_group_colour"
android:background="#android:color/black"
app:itemTextColor="#ffffff">
<include layout="#layout/navigation_item"/>
</android.support.design.widget.NavigationView>