This question already has answers here:
Why Floating action button Behind the BottomBar
(2 answers)
Closed 3 years ago.
I need to do a bottom navigation view in Android like this:
I tried, and now I have something like this:
How can I increase size of the + icon? It will be static and bigger then another icons all the time. Other icons will change color when activated, but the size will remain the same.
Activity xml:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#color/white"
app:layout_anchor="#id/bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_navigation_main"
tools:layout_editor_absoluteX="4dp" />
Bottom navigation view xml:
<item
android:id="#+id/action_home"
android:enabled="true"
android:icon="#drawable/ic_home"
android:title="#string/home"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/action_notification"
android:enabled="true"
android:icon="#drawable/ic_notification"
android:title="#string/notification"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/action_add"
android:enabled="true"
android:title=" "
android:icon="#drawable/ic_add_circle"
app:showAsAction="ifRoom"
app:itemIconSize="50px"/>
<item
android:id="#+id/action_schedule"
android:enabled="true"
android:title="#string/schedule"
android:icon="#drawable/ic_schedule"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_profile"
android:enabled="true"
android:title="#string/profile"
android:icon="#drawable/ic_profile"
app:showAsAction="ifRoom" />
What you are trying can be achieved by using a 'Floating Action Button' on top of the Bottom Bar.
The third item in your Bottom Bar can then just be a placeholder. No action, name and icon on it.
A layout for example with a Floating Action Button on top is presented in this post, see the post for more information regarding possibly the same issue you are facing.
You could also take a look at this. The newer Bottom Bar of Google that includes functionality with a Floating Action Button.
Related
I am trying to add 4 items in menu of Bottom Navigation View but I cant figure out how to make it swipeable. The screenshot looks like this. I have figured out the increase in size but once I get to know the swiping so that a complete name can be visible or either wrap text can be applied.
My menu file is;
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/menu_1"
android:title="Triggered Insan" />
<item
android:id="#+id/menu_2"
android:title="Carry Minati" />
<item
android:id="#+id/menu_3"
android:title="Hadd Bc" />
<item
android:id="#+id/menu_4"
android:title="Lakshay Chaudhary" />
</menu>
What I want to achieve is similar to this question (I can't comment so far, that is why I created the new question). I want this menu on the right side in the landscape mode (my activity allows only landscape). I need it to be scaled for any device size. It should have 5 items.
For now, I wanted to do this by NavigationView like this:
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_show"
android:layout_width="56dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:background="#android:color/white"
android:theme="#style/RightNav"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/nav_items_show" />
with style:
<style name="RightNav">
<item name="android:textSize">10sp</item><!-- text size in menu-->
<item name="android:listPreferredItemHeightSmall">90dp</item><!-- item size in menu-->
<item name="listPreferredItemHeightSmall">90dp</item><!-- item size in menu-->
</style>
and menu items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/a1"
android:title="a1" />
<item
android:id="#+id/a2"
android:title="a2" />
<item
android:id="#+id/a3"
android:title="a3" />
<item
android:id="#+id/a4"
android:title="a4" />
<item
android:id="#+id/a5"
android:title="a5" />
</menu>
I can switch between fragments etc. this is not the problem. I can't deal with the design only. The biggest issue is that I can't add the icons to match material.io rules. Another problem is that I need to scroll over menu items if the device is too small.
I do not ask you for doing it for me. I'm here for any kind of advice to do it myself. Thanks!
i want to add submenu into my bottom navigation view
and how do add into bottom navigation view?
i am try direct add into the menu item and it cannot run
bottom_navigation_menu.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">
<item
android:id="#+id/menu"
android:icon="#drawable/ic_menu"
android:title="#string/menu"
app:showAsAction="ifRoom"
android:enabled="true"/>
<item
android:id="#+id/promotion"
android:icon="#drawable/ic_promotion"
android:title="#string/promotion"
app:showAsAction="ifRoom"
android:enabled="true"/>
<item
android:id="#+id/order"
android:icon="#drawable/ic_order"
android:title="#string/order"
app:showAsAction="ifRoom"
android:enabled="true"/>
<item
android:id="#+id/location"
android:icon="#drawable/ic_location"
android:title="#string/location"
app:showAsAction="ifRoom"
android:enabled="true"/>
<item
android:id="#+id/more"
android:icon="#drawable/ic_more"
android:title="#string/more"
app:showAsAction="ifRoom"
android:enabled="true">
<menu>
<item
android:icon="#drawable/ic_more"
android:title="Sub item 1" />
<item
android:icon="#drawable/ic_more"
android:title="Sub item 2" />
</menu>
</item>
</menu>
For Add menu, you can use design:menu="#menu/bottom_navigation_menu" to your Bottom Navigation View.
Currently, You can't use subMenu in BottomNavigationView and only use maximum 5 menu items.
Check BottomNavigationView android developer doc.
If you want to have submenu for a menu item, your best shot is to have it in Navigation drawer as you cannot create a submenu inside BottomNavigationView.
Also, as per material design guidelines, there should be only 3 to 5 top level destinations(or menu items) in our BottomNavigationView. If you have less than 3 items, it is recommended to use tabs. And if you have more than 5 items, it is recommended to have the rest items inside Navigation drawer. Please refer the link below:
https://material.io/guidelines/components/bottom-navigation.html
I tried alomst every link on stackoverflow but I could not find the right solution to my question. I tried this...
<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:itemTextColor="#fff"
app:itemIconTint="#fff"
android:background="#393737"
app:headerLayout="#layout/nav_header_navigation"
app:menu="#menu/activity_navigation_drawer"/>
But its changing the text color of each item. Is there any to change text color of single item? I am talking about changing the text color of particular item i.e. if we have four items
sugar
bread
milk
egg
This list is embedded in menu of navigation view. If we want to change the color of milk to red. How to do that??
You need to do that programatically.
// Get the navigation view first.
mNavigationView = (NavigationView) findViewById(R.id.nav_view);
Now you need to get the menu item from the navigation view and set the icon here.
// Get the index of milk
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_red);
The idea is keeping two separate icons for milk. You may change the icon anytime when needed. So the complete pseudo code should look like
if(milkIsRed)
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_red);
else
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_white);
You need to customize your navigation drawer View for that you can use this link http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
XML look Like
<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>
I am using an actionbar with actionbar tab in an app. i have menu item and three tab with home icon in actionbar.
BUT When i run this app on emulator if menu item has property showAsAction with value "ifroom" then some of them are appear because of no more room
but the menu icon at the right upper corner is missing everytime i run this app.
Here is the image what is come in emulator :
and image below what i need :
here is my code for menu.xml:
<item android:id="#+id/menu_add" android:title="Add" android:icon="#drawable/icon" />
<item android:id="#+id/menu_DashBoard" android:title="DashBoard" />
<item android:id="#+id/menu_Master_Entry" android:title="Master Entry" />
<item android:id="#+id/menu_Product_Section" android:title="Product Section" />
<item android:id="#+id/menu_Retailers_Orders" android:title="Retailers Orders" />
<item android:id="#+id/action_search" android:icon="#drawable/search_icon"
android:title="Search" android:showAsAction="ifRoom" android:layout_gravity="left"/>
<item android:id="#+id/action_calender" android:title="Calender"
android:showAsAction="ifRoom" android:icon="#drawable/calender" android:layout_gravity="left" />
<item android:id="#+id/action_message" android:title="Message"
android:showAsAction="ifRoom" android:icon="#drawable/messageicon" android:layout_gravity="left"/>
Please help .. why it is come and what is the solution of this problem?
THANKS in advance. I only want that this menu dropdown at the last in actionbar should be shown in each screen size but it disappear in phone and shown on tab(10.1)
You can change android:showAsAction="ifRoom" to android:showAsAction="always"but this is not recommended.
If there is not enough room this items are added to more option at the end of the action bar where thr title of this item is shown in a drop-down (kind of) list.