Can anyone help me, my bottom navigation bar looks like this:
I want to make it to look like this:
Offcourse, with blue color.
My code is below: Thanks everyone!!
layout.xml
<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:menu="#menu/main_manu"
app:itemBackground="#color/blue"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
/>
Application.java
final BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
Menu menu = bottomNavigationView.getMenu();
MenuItem menuItem = menu.getItem(2);
menuItem.setChecked(true);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_pocetna:
new ListaVoznji.Home().execute();
break;
case R.id.action_unos:
new ListaVoznji.Login().execute();
break;
case R.id.action_pregled:
Intent intent2 = new Intent(ListaVoznji.this,ListaSvihVoznji.class);
intent2.putExtra("voznja",voznja);
startActivity(intent2);
break;
case R.id.action_shutdown:
Intent homescreen=new Intent(ListaVoznji.this,LoginActivity.class);
log = 1;
homescreen.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(homescreen);
finish();
break;
}
return true;
}
});
Add app:labelVisibilityMode="labeled" in your layout in botton navigation
Just use the background attribute to change the whole background , and if you want to customize the item's text and icon color , you can do this by :
First create a drawable file name item_background , add to it the following lines :
<selector>
<item android:state_checked="true" android:color="#color/colorPrimary" />
<item android:state_checked="false" android:color="#color/colorAccent"/>
</selector>
Then in your bottom navigation view add attributes itemTextColor & itemIconTint with the value #drawable/item_background
Related
I'm building a shop android app which I need to set these items in bottom navigation view (Home, cart, favorites, more)
and I need to set badge on cart to view how many items in cart
I build bottom nav bar successfully but I can't add cart badge on icon.
this is my code in activity which I set menu for nav view.
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_products);
Objects.requireNonNull(getSupportActionBar()).hide();
context = this;
tools = Tools.getInstance(context);
prefs = Prefs.getInstance(context);
tools.DisplayLang(prefs.GetLang(),this);
nav = findViewById(R.id.bottom_nav_view);
nav.inflateMenu(R.menu.menu);
nav.setSelectedItemId(R.id.home);
getSupportFragmentManager().beginTransaction().replace(R.id.frag_container,new Home())
.commit();
nav.setOnItemSelectedListener(btm_nav);
}
NavigationBarView.OnItemSelectedListener btm_nav =
new NavigationBarView.OnItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
Fragment fragment;
switch (item.getItemId()) {
case R.id.home:
fragment = new Home();
getSupportFragmentManager().beginTransaction().replace(R.id.frag_container,fragment).commit();
break;
case R.id.fav:
fragment = new Favourite();
getSupportFragmentManager().beginTransaction().replace(R.id.frag_container,fragment).commit();
break;
case R.id.cart:
fragment = new Cart();
getSupportFragmentManager().beginTransaction().replace(R.id.frag_container,fragment).commit();
break;
case R.id.more:
PopupMenu menu = new PopupMenu(Products.this,
findViewById(R.id.more));
menu.getMenuInflater().inflate(R.menu.pop_up,menu.getMenu());
tools.setForceShowIcon(menu);
menu.show();
break;
}
return true;
}
};
#menu/menu
<?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/home"
android:title="#string/home"
android:icon="#drawable/home"/>
<item android:id="#+id/cart"
android:title="#string/basket"
android:icon="#drawable/cart"
app:actionLayout="#layout/cart_layout"/>
<item android:id="#+id/fav"
android:title="#string/fav"
android:icon="#drawable/fav"/>
<item android:id="#+id/more"
android:title="#string/more"
android:icon="#drawable/more"/>
</menu>
#layout/cart_layout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:src="#drawable/cart"
app:layout_constraintEnd_toStartOf="#+id/txt_count"
app:layout_constraintHorizontal_bias="0.458"
app:layout_constraintStart_toStartOf="#+id/txt_count"
app:layout_constraintTop_toTopOf="#+id/txt_count" />
<TextView
android:id="#+id/txt_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="668dp"
android:background="#drawable/cart_badge"
android:gravity="center"
android:padding="3dp"
android:text="0"
android:textColor="#color/white"
android:textSize="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.598"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I don't have any errors but my problem is that badge doesn't appear on cart icon. How can I do that ?
If you are using the Material Components library, then there is no need to create an extra layout for your badge, unless you want a custom badge. For adding badge to a menu item, first initialize a BadgeDrawable with your menu item's id. For example:
BadgeDrawable badge = nav.getOrCreateBadge(R.id.cart);
Here, nav is your bottom navigation view and R.id.cart is your menu item's id. After initialization, set the badge to be visible by badge.setVisible(true); and finally set the number on the badge by badge.setNumber(1);. You can even set the badge's background color by badge.setBackgroundColor(getResources().getColor(R.color.red)); and badge's text color by badge.setTextColor(getResources().getColor(R.color.white));. And finally when you want to remove the number just call badge.clearNumber();.
I want to build bottom navigation with activity for my app and after completing my bottom nav. layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="#+id/Bottomnav"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_gravity="bottom"
android:background="#FFFFFF"
app:menu="#menu/bottomnav_menus">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Next I gone into my Main activity for implementing onnavigationitemselectlistner, but after doing this method without any error my bottom nav. not working.
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId())
{
case R.id.live:
Intent intent = new Intent(MainActivity.this, LiveScore.class);
startActivity(intent);
return true;
}
return false;
}
});
my menu items :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:title=""
android:id="#+id/home"
android:icon="#drawable/baseline_home_black_24dp"
android:orderInCategory="1"/>
<item
android:title=""
android:id="#+id/live"
android:icon="#drawable/baseline_live_tv_black_24dp"
android:orderInCategory="2"/>
<item
android:title=""
android:id="#+id/video"
android:icon="#drawable/baseline_video_library_black_24dp"
android:orderInCategory="3"/>
</menu>
Please Comment If you want any other info.
make sure you are adding below code
navView.setOnNavigationItemSelectedListener(new ...);
navView.setOnNavigationItemReselectedListener(new BottomNavigationView.OnNavigationItemReselectedListener() {
#Override
public void onNavigationItemReselected(#NonNull MenuItem item) {
Toast.makeText(MainActivity.this, "Reselected", Toast.LENGTH_SHORT).show();
}
});
after
NavigationUI.setupWithNavController(navView, navController);
this
Try below, it works fine for me
menu xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_home"
android:icon="#drawable/ic_home_blue_48dp"
android:title="Home" />
<item
android:id="#+id/action_menu"
android:icon="#drawable/ic_apps_black_24dp"
android:title="Menu"
/>
<item
android:id="#+id/action_msg"
android:icon="#drawable/ic_chat_black_24dp"
android:title="Message Inbox"
/>
</menu>
xml
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
app:itemIconTint="#drawable/bottom_nav_colors"
app:itemTextColor="#drawable/bottom_nav_colors"
app:menu="#menu/bottom_navigation_items"/>
bottom listener
BottomNavigationView bottomNavigationView;
bottomNavigationView.setOnNavigationItemSelectedListener(new
BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item)
{
Fragment selectedFragment = null;
switch (item.getItemId())
{
case R.id.action_home:
//perform action
break;
case R.id.action_menu:
//perform action
break;
case R.id.action_msg:
//perform action
break;
}
FragmentTransaction transaction =
getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.container, selectedFragment);
transaction.commit();
return true;
}
});
replace this
switch (item.getItemId())
{
case R.id.live:
Intent intent = new Intent(MainActivity.this, LiveScore.class);
startActivity(intent);
return true;
}
return false;
by this
switch (item.getItemId())
{
case R.id.live:
Intent intent = new Intent(MainActivity.this,LiveScore.class);
startActivity(intent);
break;
}
return true;
by default, menu titles and icons display in bottom navigation view.
how can we hide/show titles/icons of menu items programmically or in XML?
note: hide/show one of these: 'titles' or 'icons' (not both)
menu :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home"
android:icon="#drawable/home"
android:title="#string/home"/>
<item
android:id="#+id/about"
android:icon="#drawable/about" />
<item
android:id="#+id/services"
android:icon="#drawable/services" />
<item
android:id="#+id/portfolios"
android:icon="#drawable/portfolios" />
<item
android:id="#+id/contact"
android:icon="#drawable/contact" />
</menu>
method:
private void bnvHelper(){
BottomNavigationView bnv = (BottomNavigationView)findViewById(R.id.bottom_navigation_view);
bnv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
int[] titles = {
R.string.home,
R.string.about,
R.string.services,
R.string.portfolios,
R.string.contact};
BottomNavigationView bnv = (BottomNavigationView)findViewById(R.id.bottom_navigation_view);
Menu menu = bnv.getMenu();
final int previousItem = bnv.getSelectedItemId();
final int nextItem = item.getItemId();
if (previousItem != nextItem) {
switch (nextItem) {
case R.id.home:
menu.getItem(0).setTitle(titles[0]);
menu.getItem(1).setTitle(null);
menu.getItem(2).setTitle(null);
menu.getItem(3).setTitle(null);
menu.getItem(4).setTitle(null);
break;
case R.id.about:
menu.getItem(1).setTitle(titles[1]);
menu.getItem(0).setTitle(null);
menu.getItem(2).setTitle(null);
menu.getItem(3).setTitle(null);
menu.getItem(4).setTitle(null);
break;
case R.id.services:
menu.getItem(2).setTitle(titles[2]);
menu.getItem(0).setTitle(null);
menu.getItem(1).setTitle(null);
menu.getItem(3).setTitle(null);
menu.getItem(4).setTitle(null);
break;
case R.id.portfolios:
menu.getItem(3).setTitle(titles[3]);
menu.getItem(0).setTitle(null);
menu.getItem(1).setTitle(null);
menu.getItem(2).setTitle(null);
menu.getItem(4).setTitle(null);
break;
case R.id.contact:
menu.getItem(4).setTitle(titles[4]);
menu.getItem(0).setTitle(null);
menu.getItem(1).setTitle(null);
menu.getItem(2).setTitle(null);
menu.getItem(3).setTitle(null);
break;
}
} return true;
}
});
}
The internet is filled with answers to a different question (How to sort items in a group? The answer is to use OrderInCategory. My question is how to sort or order the groups themselves?
In my app, I have to programmatically add/remove menu items in each group as well as show/hide entire groups at a time.
I have things setup something like this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:id="#+id/nav_menu_stuff1">
</group>
<group android:id="#+id/nav_menu_stuff2">
</group>
<group android:id="#+id/nav_menu_stuff3">
</group>
<group android:id="#+id/nav_menu_stuff4">
</group>
</menu>
And then in code, I add/remove:
getMenu().add(R.id.nav_menu_stuff1, some_id, 0, some_name);
getMenu().removeItem(some_id);
as well as show/hide entire groups at a time:
getMenu().setGroupVisible(R.id.nav_menu_stuff1, stuff1_is_visible);
getMenu().setGroupVisible(R.id.nav_menu_stuff2, stuff2_is_visible);
getMenu().setGroupVisible(R.id.nav_menu_stuff3, stuff3_is_visible);
getMenu().setGroupVisible(R.id.nav_menu_stuff4, stuff4_is_visible);
The problem for me is that Android doesn't maintain the order of the groups. At some point I clear all the items from a group in the middle (e.g stuff2) and then add items back in. When I do that, the group ends up at the bottom of the NavigationView. That's not where I want it.
How do we maintain the order of the groups?
Try this
use visible true/false rather than add/remove
navigationView = (NavigationView) findViewById(R.id.nav_view);
Menu nav_Menu = navigationView.getMenu();
nav_Menu.findItem(R.id.nav_settings).setVisible(false);
try this code:
menu bar xml:
<?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_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/nav_home" />
<item
android:id="#+id/nav_photos"
android:icon="#drawable/ic_photo_library_black_24dp"
android:title="#string/nav_photos" />
<item
android:id="#+id/nav_movies"
android:icon="#drawable/ic_local_movies_black_24dp"
android:title="#string/nav_movies" />
<item
android:id="#+id/nav_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/nav_notifications" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_settings" />
</group>
<item android:title="Other">
<menu>
<item
android:id="#+id/nav_about_us"
android:title="#string/nav_about_us" />
<item
android:id="#+id/nav_privacy_policy"
android:title="#string/privacy_policy" />
</menu>
</item>
like this:
java class use menu bar
private void selectNavMenu() {
navigationView.getMenu().getItem(navItemIndex).setChecked(true);
}
private void setUpNavigationView() {
//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Check to see which item was being clicked and perform appropriate action
switch (menuItem.getItemId()) {
//Replacing the main content with ContentFragment Which is our Inbox View;
case R.id.nav_home:
navItemIndex = 0;
CURRENT_TAG = TAG_HOME;
break;
case R.id.nav_photos:
navItemIndex = 1;
CURRENT_TAG = TAG_PHOTOS;
break;
case R.id.nav_movies:
navItemIndex = 2;
CURRENT_TAG = TAG_MOVIES;
break;
case R.id.nav_notifications:
navItemIndex = 3;
CURRENT_TAG = TAG_NOTIFICATIONS;
break;
case R.id.nav_settings:
navItemIndex = 4;
CURRENT_TAG = TAG_SETTINGS;
break;
case R.id.nav_about_us:
// launch new intent instead of loading fragment
startActivity(new Intent(MainActivity.this, AboutUsActivity.class));
drawer.closeDrawers();
return true;
case R.id.nav_privacy_policy:
// launch new intent instead of loading fragment
startActivity(new Intent(MainActivity.this, PrivacyPolicyActivity.class));
drawer.closeDrawers();
return true;
default:
navItemIndex = 0;
}
//Checking if the item is in checked state or not, if not make it in checked state
if (menuItem.isChecked()) {
menuItem.setChecked(false);
} else {
menuItem.setChecked(true);
}
menuItem.setChecked(true);
loadHomeFragment();
return true;
}
});
it helps you
I am using the new Android Design Navigation Drawer. I want to add a switch in the drawer. Is there a away to implement this?
this is the menu xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="#+id/nav_view_menu_group_1"
android:checkableBehavior="single">
<item
android:id="#+id/nav_view_menu_item_myschedule"
android:icon="#drawable/ic_navview_my_schedule"
android:title="#string/navview_menu_item_myschedule"
android:titleCondensed="#string/navview_menu_item_myschedule" />
<item
android:id="#+id/nav_view_menu_item_iolive"
android:icon="#drawable/ic_navview_play_circle_fill"
android:title="#string/navview_menu_item_iolive"
android:titleCondensed="#string/navview_menu_item_iolive"
android:visible="false"/>
<item
android:id="#+id/nav_view_menu_item_explore"
android:icon="#drawable/ic_navview_explore"
android:title="#string/navview_menu_item_explore"
android:titleCondensed="#string/navview_menu_item_explore" />
<item
android:id="#+id/nav_view_menu_item_map"
android:icon="#drawable/ic_navview_map"
android:title="#string/navview_menu_item_map"
android:titleCondensed="#string/navview_menu_item_map"
android:visible="false"/>
</group>
</menu>
How can I change one <item> to be switch:
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Switch"
android:id="#+id/switch1"
android:layout_gravity="center_horizontal" />
I am currently using the default layout:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer" />
Just Like this Image under Android Notification http://i.stack.imgur.com/M9nD7.png
I really Appreciate any feedback. Thank you.
One way I have found of doing this would be to use setActionView on the menuItem you want:
mNavigationView.getMenu().findItem(R.id.nav_connect)
.setActionView(new Switch(this));
// To set whether switch is on/off use:
((Switch) mNavigationView.getMenu().findItem(R.id.nav_connect).getActionView()).setChecked(true);
Probably want a click listener as well to change the state of the Switch:
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.nav_connect:
((Switch) menuItem.getActionView()).toggle();
return true;
}
}
}
I haven't tried, but you could probably use android:actionLayout="#layout/switch_layout" in xml and point to a custom layout you created.
Also could try using an ActionProvider which might offer a little more robustness. I haven't tried this method either though.
We can do it by the following way
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
//Get a reference to your item by id
MenuItem item = menu.findItem(R.id.menu_pick_color);
//Here, you get access to the view of your item, in this case, the layout of the item has a FrameLayout as root view but you can change it to whatever you use
FrameLayout rootView = (FrameLayout)item.getActionView();
//Then you access to your control by finding it in the rootView
YourControlClass control = (YourControlClass) rootView.findViewById(R.id.control_id);
//And from here you can do whatever you want with your control
return true;
}
If you only want to check for the changes in the switch, you can set onCheckedChangeListener only for the switch like so
((Switch) navigationView.getMenu().findItem(R.id.darkModeSwitch).getActionView())
.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(MainActivity.this, "Checked", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Unchecked", Toast.LENGTH_SHORT).show();
}
}
});
If you want to be cool use lambda
((Switch) navigationView.getMenu().findItem(R.id.darkModeSwitch).getActionView())
.setOnCheckedChangeListener((buttonView, isChecked) -> {
if(isChecked) {
Toast.makeText(MainActivity.this, "Checked", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Unchecked", Toast.LENGTH_SHORT).show();
}
});