I need to implement a Bottom Navigation View in my android app. The middle icon needs to be an image, the company logo. But when I run the app it appears only a grey filled rounded icon. The images above show what I want and what I'm getting.
What I want:
What I get:
I already tried others questions in this website, but every answer tells to change the iconTintList from XML with a drawable, but the center icon is a vector with more than one color.
When I tried to set null to setIconTintList method, works for the middle icon but the others icons change to original color too.
//This doesn't work to other icons, only for the middle one
mBottomNav.setItemIconTintList(null);
I also tried to get the menu and set the icon tint list only for the middle one, like the code above, but doesn't work too.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
mBottomNav.getMenu().findItem(R.id.nav_buy).setIconTintList(null);
}
This is the XML implementation:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/kmv_background"
app:itemIconTint="#drawable/bottom_nav_item_color"
app:itemTextColor="#drawable/bottom_nav_item_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation" />
This is the java implementation:
mBottomNav = findViewById(R.id.bottomNavigationView);
mBottomNav.setOnNavigationItemSelectedListener(this);
Thanks for any help!
I don't think there's a short way. Use this first:
mBottomNav.setItemIconTintList(null);
Then do the designs yourself. Don't forget to separate the buttons as clicked and not clicked.
Example Home Button XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--Clicked-->
<item android:drawable="#drawable/homeclicked" android:state_checked="true" />
<!--Not Clicked-->
<item android:drawable="#drawable/homenotclicked" android:state_checked="false" />
</selector>
And add them to the view:
Example bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/homebuttons"
android:icon="#drawable/homebuttonxml />
<!--Other Buttons...-->
</menu>
And finally, Link view to bottomnavigationview
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:labelVisibilityMode="unlabeled"
app:elevation="0dp"
app:menu="#menu/bottom_navigation">
</com.google.android.material.bottomnavigation.BottomNavigationView>
For a particlar icon, this can be used:
MenuItemCompat.setIconTintMode(binding.bottomNav.menu.getItem(3), null);
Related
I am trying to add bottom navigation view like below:
But it is coming like below:
I tried all the options, but I don't seem to quite get through, everything I do is only changing the color but I am not able to quite achieve what I want to.
Code below
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/action_search"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="start"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/navigation_menu"
tools:layout_editor_absoluteX="8dp"
android:background="#232323"
app:itemTextColor="#color/PrimaryText"
app:itemIconTint="#null"/>
Navigation Menu :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/action_add_expense"
android:icon="#drawable/addincome"
android:title="Add Income" />
<item android:id="#+id/action_add_income"
android:icon="#drawable/addexpense"
android:title="Add Expense" />
</menu>
set the Icon TintList to null programatically and you will be able to show your icons without any tint.
bottomNavigationView.setItemIconTintList(null);
I have a bottomnavigation view that sets an icon depending on the state if it's checked or not.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/icon_tree"
android:title="Tree"
android:icon="#drawable/bottomnav_icon_home">
</item>
</menu>
bottomnav_icon_home:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_home_black" android:state_checked="false"/>
<item android:drawable="#drawable/icon_home_green" android:state_checked="true"/>
</selector>
How ever bottomnavigation is automatically highlighting the icon when android:state_checked is true.
How do I completely disable bottomnavigation's icon selection highlight?
I've tried setting app:itemIconTint="#drawable/bottom_navigation_selector" to #null however that doesn't work
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/bottom_navigation_menu"
android:background="#color/colorWhite"
app:itemTextColor="#drawable/bottom_navigation_selector"
app:itemIconSize="28dp"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:labelVisibilityMode="labeled"/>
bottom_navigation_selector:
<?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/forestGreen" />
<item android:color="#color/colorBlack" />
</selector>
If i understood you right, android by default sets a tint on your bottom navigation icons on selection and you would like it to be removed right.
I know how to do that in your java class not xml though.
You'll need to set setItemIconTintList method of your BottomNavigationView to null. So in wherever you set the layout write code as :
BottomNavigationView btmNav = findViewById(R.id.bottom_navigation);
btmNav.setItemIconTintList(null);
Let us know if this works for you.
try to add this line in the dimens.xml
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">#dimen/design_bottom_navigation_text_size</dimen>
You can create custom style.
There are two steps.
1- Create custom bottom_navigation_bar_icon_color.xml in drawable folder. This is the selector showed the icon highlighted or default. So you can highlight all icons or show them as default. Choose one of the following when creating your bottom_navigation_bar_icon_color.xml
Icons highlighted: <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true"/>
Icons default: <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
bottom_navigation_bar_icon_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
</selector>
2- Add following custom style to themes.xml or styles.xml. bottom_navigation_bar_icon_color used in itemIconTint and itemTextColor
<style name="BottomNavigationThemeCustom">
<item name="enforceTextAppearance">true</item>
<item name="enforceMaterialTheme">true</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="itemIconTint">#drawable/bottom_navigation_bar_icon_color</item>
<item name="itemRippleColor">#color/mtrl_navigation_bar_colored_ripple_color</item>
<item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
<item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
<item name="itemTextColor">#drawable/bottom_navigation_bar_icon_color</item>
</style>
3- Use your new style for bottomNavigationBar
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
style="#style/BottomNavigationThemeCustom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_menu" />
4- If you want to hide the bottomNavigationBar on Scroll add following attribute to bottomNavigationBar
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
You consider create your own implementation of bottomNavigation?
When I implement the Google BottomNavigationView, I got a lot of issues, so I create a new one like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<View android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grayBottomNavigationDelimiter"/>
<RadioGroup android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorNavigationBar"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/homeButton"
android:drawableTop="#drawable/ic_home_black_24dp"
android:text="#string/navigation_home_text"
style="#style/RadioButtonStyle"/>
...
So, can see this is easier than imagine, did you?
To add it through XML: For the attribute IconItemTint and ItemTextColor, simply use the same color that you've used for icons by default. In that case, the highlight color and default color will be the same. Will give you the required ripple effect on selecting but highlight wont be visible.
For my black color icon, I've used this:
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
My entire bottom nav looks like this:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_more_options_menu" />
As the title says, i am trying to add a custom image.png to my bottom Navigation bar but i can't find exactly how.
I tried:
Vector asset and image asset does not show my image.png
create a selector xml for my image and added it to my nav menu but it just shows a grey square instead of image
I think the solution must be simple but can't find anything related on this forum.
Thanks in advance.
Edit:
bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/airplane"
android:icon="#drawable/vegetables"
android:title="Vegetable"
/>
</menu>
vegetables.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/veg" android:state_checked="false"/>
<item android:drawable="#drawable/veg1" android:state_checked="true" />
</selector>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:background="?android:attr/windowBackground"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I recommend use a vector image.
Android by default in bottom navigation view component all SVG object displays in white color. The check symbol object is in the circle but his color is converted to white and so it has became invisible.
One solution is to redraw the SVG image. But sometimes it is not posible. The other solution is to tell the bottom navigation view to display original picture colors. You can do it in the activity code setting:
At create() just set:
bottomNavigationView.setItemIconTintList(null);
Update your icon in navigation.xml like below:
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_navigation_more"
app:showAsAction="always|withText"
android:title="#string/title_more" />
Here example of ic_navigation_more.xml:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>
Create menu file for your bottom navigation
Set icon for every menu item that you have by android:icon="#drawable/your_drawable"
In xml file where you declared BottomNavigationView add app:menu="#menu/your_menu"
Try to use the Custom image with the navigation menu item id
For kotlin:
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val BVMenu = navView.getMenu()
BVMenu.findItem(R.id.navigation_home).setIcon(R.drawable.ic_favorite_black_24dp);
For Java:
Menu navView = bottomNavigationView.getMenu();
navView.findItem(R.id.navigation_home).setIcon(R.drawable.ic_favorite_black_24dp);
Your image.png must have a transparent area, NavigationView will color it just like the notification icon on statusbar
android:icon="#drawable/your_drawable"
and to solve colour problem tint
I don't think that you can add a .png image as a navigation view unless you set the icon tint list "setItemIconTintList" to null.
in my case
//navView.setItemIconTintList(null)
In your xml file add the menu property to the BottomNavigationView tag:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
app:menu="#menu/menu_navigation_items" /> `
The #menu/menu_navigation_items is a menu with < item> tags. In each item tag add the icon property:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/id1"
android:enabled="true"
android:icon="#drawable/your_icon"
android:title="Your Title"
app:showAsAction="ifRoom" />
<item
android:id="#+id/id2"
android:enabled="true"
android:icon="#drawable/your_icon"
android:title="Your Title"
app:showAsAction="ifRoom" />
</menu>
How do I make a basic icon button without text or background? For example, just a simple vector image from #drawables that, when clicked, shows that circular response thing around it. I don't want the icon to have any background color to it. Just an icon that can be clicked, that's literally it.
I can only figure out how to do it by creating a menu and setting the icon as an item with app:showAsAction="always". It seems like there must be a better way to do this.
Edit: Here's an example of what I want to achieve. It's very basic. Just a clickable icon with responsive feedback when touched. https://material-ui.com/components/buttons/#icon-buttons
It's exactly the same as creating the following. I just thought there was likely an easier way to do this without having to create and load a menu just for one single icon:
<menu 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"
tools:context="com.mycompany.myapp.MainActivity">
<item
android:id="#+id/action_contacts"
android:icon="#drawable/ic_contacts_24"
android:title="#string/action_contacts"
app:iconTint="#android:color/white"
app:showAsAction="always" />
</menu>
First create a vector drawable and then add to the ImageView like
this:
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/ic_delete" />
You can use a MaterialButton, ImageButton and even an ImageView for this. Here's an example of how you'd do it with an ImageView...
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"
android:src="#drawable/your_icon" />
All you need to do is set the selectableItemBackground, this will use your theme's primary color (or maybe the secondary color, I can't remember).
Now if you want a different color for ripple effect, for example a grey ripple, then you can create the drawable yourself...
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#dddddd">
<item android:id="#android:id/mask">
<color android:color="#dddddd" />
</item>
</ripple>
and set the view background below..
android:background="?attr/selectableItemBackground"
it'll work with any view provided the view is clickable
Yes, you can use ImageView if you like, but if you want to generate the complete image (including frame/borders) yourself you don't have to go that far. You could practically use plain View (except that you'd have to supply android:layout_width/height explicitly). Just use Button and have the android:background specify a selector which will select between images.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clear1" android:state_pressed="true"/>
<item android:drawable="#drawable/clear0"/>
</selector>
Having reviewed a lot of material, I still did not find a solution. As you can see on git below, when you tap on the botton navigation icon, it has gray animation from the center to the edges. Is there a way to disable this animation?
Gray animation
Here's my XML
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:elevation="0dp"
app:itemIconTint="#color/bottomNavigationIconColor"
app:itemTextColor="#drawable/nav_item_text_color_state"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_main" />
and nav_item_text_color_state
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="false"
android:color="#color/bottomNavigationIconColor" />
<item
android:state_checked="true"
android:color="#005EFF" />
</selector>
Update
Found solution to this. To disable this gray ripple effect just add app:itemBackground="#null" to xml.
Use app:itemRippleColor="#color/your_color" to set your custom color for tap effect or app:itemRippleColor="#null" for no effect
Found solution to this, just add app:itemBackground="#null" to xml.
Set app:itemBackground to null doesn't work now.
The new way is:
app:itemBackground="#android:color/transparent"