i have two layouts that use a drawerLayout and they use the same code for the navigationView, the problem is that one of them changes the color of the selected item while the other doesn't even though it's the same exact code. here is the xml code:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view_passager"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/menu_passager" />
and java for the 1st layout:
#Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.acceuil_passager_item:
toolbar.setTitle("Accueil");
fm.beginTransaction().replace(R.id.frame_passager, new AcceuilPassagerFragment()).commit();
break;
case R.id.profile_item:
toolbar.setTitle("Profil");
fm.beginTransaction().replace(R.id.frame_passager, new PassagerProfileFragment()).commit();
break;
case R.id.historique_voyages_item_pass:
toolbar.setTitle("Historique des voyages");
fm.beginTransaction().replace(R.id.frame, new ListeTrajetsFragment()).commit();
break;
case R.id.futurs_voyages_item_pass:
toolbar.setTitle("Futurs voyages");
fm.beginTransaction().replace(R.id.frame_passager, new FutursVoyagesFragment()).commit();
break;
case R.id.log_out_item_pass:
Intent intent = new Intent(PassagerActivity.this, LoginActivity.class);
startActivity(intent);
mAuth.signOut();
finish();
Log.d(TAG, "onNavigationItemSelected: " + (mAuth == null));
break;
default:
break;
}
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
and the java code for the 2nd layout :
#Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.acceuil_item_conducteur:
setUpToolbar(item);
fm.beginTransaction().replace(R.id.frame_conducteur, new AcceuilConducteurFragment()).commit();
break;
case R.id.profile_item_cond:
setUpToolbar(item);
fm.beginTransaction().replace(R.id.frame_conducteur, new ConducteurProfileFragment()).commit();
break;
case R.id.historique_voyages_item_cond:
setUpToolbar(item);
fm.beginTransaction().replace(R.id.frame_conducteur, new HistoriqueVoyagesFragment()).commit();
break;
case R.id.log_out_item_cond:
Intent intent = new Intent(ConducteurActivity.this, LoginActivity.class);
startActivity(intent);
mAuth.signOut();
finish();
Log.d(TAG, "onNavigationItemSelected: " + (mAuth == null));
break;
default:
break;
}
drawer.closeDrawer(GravityCompat.START);
return true;
}
and here is the first layout
and the 2nd one
ps: "Profil" is selected in both layouts
For navigation view you have to write a color selector like: nav_view_item_background
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primary" android:state_checked="true" />
<item android:drawable="#android:color/transparent" />
</selector>
and set app:itemBackground="#drawable/nav_view_item_background"
For text color you have to same thing. Create a textColor selector and set app:itemTextColor
For Drawer Layout
return true (In Navigation item selection) change the color and selection.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group
android:id="#+id/menu_grp"
android:checkableBehavior="single">
Turned out checkableBehavior = "single" is what made the menu selected item checked and what was missing in my other layout
Related
I'm trying to change the text color of the selected item in the NavigationView. Using the information for the previous topic I set a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primaryColor" android:state_checked="true" />
<item android:color="#color/lightGrayColor" android:state_checked="false" />
</selector>
The primaryColor is blue. The NavigationView is as follows:
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/activity_nav_header"
app:menu="#menu/nev_menu"
app:itemIconTint="#drawable/menu_item_selector"
app:itemTextColor="#drawable/menu_item_selector" />
</androidx.drawerlayout.widget.DrawerLayout>
As you can see I set app:itemTextColor to menu_item_selector. But when I run the application, I see the selected item as grey. How does the NavigationView know which screen am I seeing right now? How do I fix it?
I'm using onNavigationItemSelected to switch between activities. Also I currently have only two windows - the dashboard and the logout. From the main screen I move to the dashboard (which contains the menu) and using the logout I go back to the main screen. Maybe the reason for it not working is because it does not know that the current screen is dashboard?
The dashboard java cotnains the following method:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
toolBar = findViewById(R.id.toolbar);
setSupportActionBar(toolBar);
drawerLayout = findViewById(R.id.drawer_layout);
navigationView = findViewById(R.id.nav_view);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolBar,
R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
View hView = navigationView.getHeaderView(0);
}
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.dashboard:
// CURRENT ACTIVITY
break;
case R.id.messages:
startActivity(new Intent(this, MessagesActivity.class));
break;
case R.id.settings:
startActivity(new Intent(this, SettingsActivity.class));
break;
case R.id.about:
startActivity(new Intent(this, AboutActivity.class));
break;
case R.id.logout:
startActivity(new Intent(this, MainActivity.class));
break;
}
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
For the initial look, you set a checked color to primaryColor, but overwrite it with lightGrayColor as you didn't specify the state that this color is available at; so you need to specify the state by android:state_checked="false"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primaryColor" android:state_checked="true" />
<item android:color="#color/lightGrayColor" android:state_checked="false"/>
</selector>
You can also set the default selected item at the app start by trying any of:
navigationView.getMenu().getItem(0).setChecked(true);
navigationView.setCheckedItem(R.id.nav_item);
Update
This is how it works with me
Step 1: Use the same selector:
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primaryColor" android:state_checked="true" />
<item android:color="#color/lightGrayColor" android:state_checked="false" />
</selector>
Step 2: use the xml attribute app:itemTextColor within NavigationView widget
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header_layout"
app:itemTextColor="#drawable/selector"
app:menu="#menu/navigation_menu" />
Step 3:
The previous step attribute won't work automatically as for some reason when you hit an item from the NavigationView menu, it doesn't consider this as a button check. So you need to manually get the selected item checked and clear the previously selected item. Use below listener to do that
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
int id = item.getItemId();
// remove all colors of the items to the `unchecked` state of the selector
removeColor(mNavigationView);
// check the selected item to change its color set by the `checked` state of the selector
item.setChecked(true);
switch (item.getItemId()) {
case R.id.dashboard:
// CURRENT ACTIVITY
break;
case R.id.messages:
startActivity(new Intent(this, MessagesActivity.class));
break;
case R.id.settings:
startActivity(new Intent(this, SettingsActivity.class));
break;
case R.id.about:
startActivity(new Intent(this, AboutActivity.class));
break;
case R.id.logout:
startActivity(new Intent(this, MainActivity.class));
break;
}
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
private void removeColor(NavigationView view) {
for (int i = 0; i < view.getMenu().size(); i++) {
MenuItem item = view.getMenu().getItem(i);
item.setChecked(false);
}
}
Now the text color will change perfectly.
Step 4:
To change icon colors, use the app:iconTint attribute in the NavigationView menu items, and set to the same selector.
<?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/nav_account"
android:checked="true"
android:icon="#drawable/ic_person_black_24dp"
android:title="My Account"
app:iconTint="#drawable/selector" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="Settings"
app:iconTint="#drawable/selector" />
<item
android:id="#+id/nav_logout"
android:icon="#drawable/logout"
android:title="Log Out"
app:iconTint="#drawable/selector" />
</menu>
Result:
For some reason, in my bottom navigation bar, my second item doesn't work
But the first one does, I can't figure out why.
when I press the navigation_building button , I don't reach the corresponding case.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:title="•"
android:enabled="true"
android:icon="#drawable/ic_home_black_18dp"/>
<item
android:id="#+id/navigation_building"
android:title="•"
android:enabled="true"
android:icon="#drawable/ic_domain_black_18dp"/>
<item
android:id="#+id/navigation_transfert"
android:title="•"
android:enabled="true"
android:icon="#drawable/ic_import_export_black_18dp"/>
<item
android:id="#+id/navigation_settings"
android:title="•"
android:enabled="true"
android:icon="#drawable/ic_settings_black_18dp"/>
</menu>
bottomNavigationView.setOnNavigationItemReselectedListener(new BottomNavigationView.OnNavigationItemReselectedListener() {
#Override
public void onNavigationItemReselected(#NonNull MenuItem item) {
Toolbar toolbar = findViewById(R.id.toolbar);
// Handle navigation view item clicks here.
switch (item.getItemId()) {
case R.id.action_logout: {
finish();
}
case R.id.navigation_home: {
loadFragment(new HomeFragment());
break;
}
case R.id.navigation_building: {
loadFragment(new BuildingFragment());
break;
}
}
You are setting NavigationItemReselectedListener. This is only triggered when the current selected navigation item is reselected. You are probably looking for NavigationItemSelectedListener.
I want to implement a BottomNavigationView and have added one of material.io's icons as a png to my drawables. When I insert it as:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:icon="#drawable/ic_dashboard_black_24dp"
android:title="#string/title_dashboard" />
<item
android:id="#+id/navigation_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/title_notifications" />
<!-- This is my item added to the normal template -->
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_more_horiz_black_24dp"
android:title="#string/title_more" />
</menu>
And use it in the main activity, It shows up, but the item will not highlight when pressed on the simulator, whereas the others will ( by highlight, I mean it will slightly blow up and change to the primary color, showing some text underneath). I tried both vectors and .pngs, nothing will work. I am running backwards compatible to Android 5.0 (Target Version 27).
The home Activity currently looks like:
public class HomeActivity extends AppCompatActivity {
private TextView mTextMessage;
private BottomNavigationView.OnNavigationItemSelectedListener
mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText(R.string.title_home);
return true;
case R.id.navigation_dashboard:
mTextMessage.setText(R.string.title_dashboard);
return true;
case R.id.navigation_notifications:
mTextMessage.setText(R.string.title_notifications);
return true;
case R.id.navigation_more:
mTextMessage.setText(R.string.title_more);
}
return false;
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
mTextMessage = (TextView) findViewById(R.id.message);
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}
}
The text view is set correctly, the icon just won't highlight.
your navigation method always return false, try return true when there is a case handled by the switch ;)
for example:
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText(R.string.title_home);
return true;
case R.id.navigation_dashboard:
mTextMessage.setText(R.string.title_dashboard);
return true;
case R.id.navigation_notifications:
mTextMessage.setText(R.string.title_notifications);
return true;
case R.id.navigation_more:
mTextMessage.setText(R.string.title_more);
return true; // this was my mistake...
default:
return false;
}
return false;
}
I have a working app with an overflow menu. All the code in the menu works, but no checkmarks are being shown after I click on a single-clickable, grouped menu item.
Am I doing something fundamentally wrong? I thought that this displaying of the checkmark was automatic to Android and that the system would do this for me. Android knows it is in a group, it knows that only one can be selected, and it knows which one I selected! So..... Android should know how to display the checkmarks.
Code
XML
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Calculator">
<group
android:checkableBehavior="single"
android:visible="true">
<item
android:id="#+id/ui_simple"
android:orderInCategory="100"
app:showAsAction="ifRoom|withText"
android:title="Regular"
android:checkable="true"/>
<item
android:id="#+id/ui_doge"
android:orderInCategory="100"
app:showAsAction="ifRoom|withText"
android:title="Doge"
android:checkable="true"/>
<item
android:id="#+id/ui_static"
android:orderInCategory="100"
app:showAsAction="ifRoom|withText"
android:title="Static"
android:checkable="true"/>
</group>
<item android:title="Display Mode"
android:orderInCategory="101" >
<menu>
<group android:checkableBehavior="single" android:visible="true" >
<item
android:id="#+id/mode_sign"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Sign Form"
android:checkable="true"/>
<item
android:id="#+id/mode_noun"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Noun Form"
android:checkable="true"/>
<item
android:id="#+id/mode_verb"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Verb Form"
android:checkable="true"/>
</group>
</menu>
</item>
</menu>
UI
Note: I have tried switching all the breaks to return true, but nothing happens.
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch (item.getItemId()) {
case R.id.ui_simple :
startActivity(new Intent(this, Calculator.class));
break;
case R.id.ui_doge :
startActivity(new Intent(this, CalculatorDoge.class));
break;
case R.id.ui_static :
startActivity(new Intent(this, CalculatorStatic.class));
break;
case R.id.mode_sign : display = BinaryOperation.Display.SIGN; break;
case R.id.mode_verb : display = BinaryOperation.Display.VERB; break;
case R.id.mode_noun : display = BinaryOperation.Display.NOUN; break;
}
return super.onOptionsItemSelected(item);
}
While #Elltz provides a valuable solution to a problem in the code, there are a total of 2 issues in the code.
Problem 1
Do not set a checkable XML attribute in both the Menu Group and the individual MenuItems.
since in the XML there is <group android:checkableBehavior="single" it shows that radio buttons are desired; therefore, no item within the group should have android:checkable="true"
<group
android:checkableBehavior="single" <!-- ONLY HERE -->
android:visible="true" >
<item
android:id="#+id/mode_sign"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Sign Form" />
<item
android:id="#+id/mode_noun"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Noun Form"/>
<item
android:id="#+id/mode_verb"
android:orderInCategory="100"
app:showAsAction="collapseActionView"
android:title="Verb Form"/>
</group>
Problem 2
Again, #Elltz provides a good solution; however, it is slightly more complex than what it needs to be.
For Single Selection Only
switch (item.getItemId()) {
case R.id.ui_simple : startActivity(new Intent(this, Calculator.class)); return true;
case R.id.ui_doge : startActivity(new Intent(this, CalculatorDoge.class)); return true;
case R.id.ui_static : startActivity(new Intent(this, CalculatorStatic.class)); return true;
// Single Selection - Radio Buttons
case R.id.mode_sign :
item.setChecked(true); // ONLY THIS....HERE
display = BinaryOperation.Display.SIGN;
return true;
case R.id.mode_verb :
item.setChecked(true); // HERE
display = BinaryOperation.Display.VERB;
return true;
case R.id.mode_noun :
item.setChecked(true); // AND HERE
display = BinaryOperation.Display.NOUN;
return true;
default : return super.onOptionsItemSelected(item);
}
For Single OR Multi Selection
// Single OR Multi Select - Radio Buttons or CheckBoxes
switch (item.getItemId()) {
case R.id.ui_simple : startActivity(new Intent(this, Calculator.class)); return true;
case R.id.ui_doge : startActivity(new Intent(this, CalculatorDoge.class)); return true;
case R.id.ui_static : startActivity(new Intent(this, CalculatorStatic.class)); return true;
case R.id.mode_sign :
item.setChecked(!item.isChecked()); // LIKE THIS...HERE
display = BinaryOperation.Display.SIGN;
return true;
case R.id.mode_verb :
item.setChecked(!item.isChecked()); // HERE
display = BinaryOperation.Display.VERB;
return true;
case R.id.mode_noun :
item.setChecked(!item.isChecked()); // AND HERE
display = BinaryOperation.Display.NOUN;
return true;
default : return super.onOptionsItemSelected(item);
}
No
Menu items in the Icon Menu (from the options menu) cannot display a checkbox or radio button. If you choose to make items in the Icon Menu checkable, you must manually indicate the checked state by swapping the icon and/or text each time the state changes.
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.ui_simple:
if (item.isChecked()){
item.setChecked(false);
}else{
item.setChecked(true);
}
startActivity(new Intent(this, Calculator.class));
break;
case R.id.ui_doge:
//same goes here and everyone
break;
....
}
}
Hope it helps
Alright, this might be simple but I dunno how to do it! I have my menu defined through XML, as shown below. It loads and everything.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/home"
android:title="Home" />
<item android:id="#+id/about"
android:title="About" />
<item android:id="#+id/quit"
android:title="Quit" />
</menu>
Now, going through onOptionsItemSelected(), how do I tell which menu item is selected?
This is from an example... What would the case's be?
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case 1:
Toast.makeText(this, "Home", Toast.LENGTH_LONG).show();
return true;
case 2:
Toast.makeText(this, "About", Toast.LENGTH_LONG).show();
return true;
case 3:
Toast.makeText(this, "Quit", Toast.LENGTH_LONG).show();
return true;
}
return false;
}
Your case statements should use the ids defined in your xml:
case R.id.home:
....
case R.id.about:
....
case R.id.quit:
....
default:
throw new IllegalStateException("oops, forgot to code something");
the default case is just good practice imho. :)