I have this menu:
Which I created like so:
menu_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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.ZZZZ.global.YYYY.XXXX">
<item
android:id="#+id/nearbyButton"
android:title="Nearby"
android:onClick="showNearbyPressed"
android:state_selected="true"
/>
<item
android:id="#+id/browseAtoZButton"
android:title="Browse A to Z"
android:onClick="showAtoZPressed"
android:state_selected="true"
/>
</menu>
And I place this in the activity XML like so:
<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="#Ccc"
app:menu="#menu/menu_navigation"
/>
The problem is that if I click on "Browse A to Z", then the "Nearby" remains highlighted. " Browse A to Z" stays the same. What I was expecting was that the browse button will get the highlighted blue/purple color, and Nearby will become grey. But this does not happen.
How do I change this?
Is it perhaps a font thing and I have to manually change the font/color when you click on it?
I've tried:
navigation.performClick();
And:
navigation.setSelectedItemId(R.id.nearbyButton);
Any ideas as to what I am missing here?
First, remove android:state_selected="true" from your menu items. Update your menu_navigation.xml as below:
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.ZZZZ.global.YYYY.XXXX">
<item
android:id="#+id/nearbyButton"
android:title="Nearby"
android:onClick="showNearbyPressed" />
<item
android:id="#+id/browseAtoZButton"
android:title="Browse A to Z"
android:onClick="showAtoZPressed" />
</menu>
Handling items state
You need to provide a ColorStateList resource, and set this resource as background for the app:itemIconTint and app:itemTextColor attributes:
Update BottomNavigationView as below:
<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="#Ccc"
app:menu="#menu/menu_navigation"
app:itemIconTint="#drawable/item_bg"
app:itemTextColor="#drawable/item_bg" />
Here is the item_bg.xml:
<!-- item_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/blue" android:state_checked="true" />
<item android:color="#color/white" />
</selector>
Hope this will help~
Related
How to change menu item text color in xml file
in drawable file the code looks like this file name: bottom_nav_menu_item_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color= "#color/bottom_nav_menu_item_selected_color"
android:state_checked="true"
android:state_selected="true"/>
<item
android:color= "#color/bottom_nav_menu_item_unselected_color"
/>
</selector>
Bottom Navigation Menu Bar looks like this in activity_main.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_nav_menu_bar"
app:menu="#menu/bottom_nav_menu_items"
app:itemTextColor="#drawable/bottom_nav_menu_item_text_color"
android:background="#color/white"
/>
Can add more info with SS or gif about current behaviour so exact solution can be provided
But as you asked question about changing color of BottomNavigationView text change then you can use as mentioned below
tab_text_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:color="#color/unselectedTab" />
<item android:state_selected="true" android:color="#color/selectedTab" />
<item android:color="#color/unselectedTab" />
</selector>
In Activity xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_nav_menu_bar"
app:menu="#menu/bottom_nav_menu_items"
app:itemTextColor="#drawable/tab_text_selector"
android:background="#color/white"
/>
Can I know why the texts inside the navigation drawer are not the same?
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
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=".activities.MainActivity"
tools:openDrawer="start">
...
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_navigation_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
----------
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Other">
<menu>
<item
android:icon="#drawable/ic_star"
android:title="Rate the app" />
<item
android:icon="#drawable/ic_share"
android:title="Share the app" />
<item
android:icon="#drawable/ic_shield"
android:title="Privacy policy" />
<item
android:icon="#drawable/ic_document"
android:title="Terms of services" />
</menu>
</item>
</menu>
Notice some items have bold texts and some items have regular texts.
Why is that happening?
I'm using Material Design 3.
The solution
<style name="styleName" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">#font/font_regular</item>
</style>
Then add this inside NavigationView
app:itemTextAppearance="#style/styleName"
So I want a navigation bar at the bottom of the screen with 4 items but for some reason only the first one is showing and the others appear only when i click them.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
app:itemTextColor="#color/black"
app:menu="#menu/navigation_bar_bottom_menu" />
My menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_home"
android:title="#string/navigation_bar_home_text" />
<item
android:id="#+id/nav_inbox"
android:title="#string/navigation_bar_inbox_text" />
<item
android:id="#+id/nav_notes"
android:title="#string/navigation_bar_notes_text" />
<item
android:id="#+id/nav_profile"
android:title="#string/navigation_bar_profile_text" />
</menu>
The bar is displayed like this just with the first item showing:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/gray_background"
app:itemIconTint="#color/nav_item_state_list"
app:itemTextColor="#color/nav_item_state_list"
app:labelVisibilityMode="labeled"
android:theme="#style/Widget.BottomNavigationView"
app:menu="#menu/bottom_navigation_items"/>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimaryLite"
android:state_pressed="true"/>
<item android:color="#color/colorPrimaryLite"
android:state_checked="true"/>
<item android:color="#color/grayDark"
android:state_checked="false"/>
<item android:color="#color/white"/>
</selector>
Here is the example
Create a color file
navigation_item_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/black" />
<item android:color="#android:color/darker_gray" />
</selector>
then put to color folder (if you don't have color folder -> just create it manually)
Then
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemTextColor="#color/navigation_item_text_color" />
More
If you bottom menu item have icon, you can change icon color like
app:itemIconTint="#color/navigation_item_text_color"
How do you underline menu items in navigation drawer?
expectation:
reality:
#menu/activity_navigation_drawer:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_open_account"
android:title="#string/na_navigate_open_account" />
<item
android:id="#+id/nav_login"
android:title="#string/na_navigate_login" />
<item
android:id="#+id/nav_stock_signals"
android:title="#string/na_navigate_stock_signals" />
...
</group>
navigation drawer activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<include
layout="#layout/app_bar_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fitsSystemWindows="true"
android:background="#color/primary_asphalt_dark"
app:headerLayout="#layout/nav_header_navigation"
app:menu="#menu/activity_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Tell me if some more code needed.
Each group ends with a line separator. Consequently, if each item in your menu has its own group you will achieve the desired graphical output:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/nav_open_account_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_open_account"
android:title="#string/na_navigate_open_account" />
</group>
<group android:id="#+id/nav_login_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_login"
android:title="#string/na_navigate_login" />
</group>
<group android:id="#+id/nav_stock_signals_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_stock_signals"
android:title="#string/na_navigate_stock_signals" />
</group>
...
</menu>
Note that the different ids for each group are required for this to work.
Press twice Shift
Open file design_navigation_menu_item.xml from com.android.support:design-26.1.0
Copy the file design_navigation_menu_item.xml into \app\src\main\res\layout to override it
Add android:paddingStart="#dimen/design_navigation_icon_padding" to CheckedTextView, make the file looks like this:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<CheckedTextView
android:id="#+id/design_menu_item_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawablePadding="#dimen/design_navigation_icon_padding"
android:paddingStart="#dimen/design_navigation_icon_padding"
android:gravity="center_vertical|start"
android:maxLines="1"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"/>
<ViewStub
android:id="#+id/design_menu_item_action_area_stub"
android:inflatedId="#+id/design_menu_item_action_area"
android:layout="#layout/design_menu_item_action_area"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</merge>
In your activity_main.xml add to your NavigationView app:itemBackground="#drawable/drawer_item_background_selector", it should be like this:
<android.support.design.widget.NavigationView
...
app:itemBackground="#drawable/drawer_item_background_selector"
.../>
Create drawable/drawer_item_background_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/drawer_item_background_selected" android:state_pressed="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_checked="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_focused="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_activated="true" />
<item android:drawable="#drawable/drawer_item_background_default" />
</selector>
Create drawable/drawer_item_background_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/drawer_transparent" />
<stroke
android:width="1dp"
android:color="#color/appGrayLight" />
<padding
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp" />
</shape>
I want to design like the image given below: when I select any button it should appear up arrow with background color on selected button.
Use button selector for it like this. or follow this link http://www.mkyong.com/android/android-imagebutton-selector-example/
button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed_yellow"
android:state_pressed="true" />
<item android:drawable="#drawable/button_focused_orange"
android:state_focused="true" />
<item android:drawable="#drawable/button_normal_green" />
</selector>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/imageButtonSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/new_button" />
</LinearLayout>