Android Studio Bottom Navigation View disappearing after adding menu items - android

I have made the menu and the Bottom Navigation View and its menu but when I add app:menu"#menu/bottom_navigation_menu" the whole Bar disappears and the app crashes when I try to run it.
Activity Main seems to be implemented correctly:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.troy.connor.lightswitch.MainActivity">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_navigation_menu"/>
</LinearLayout>
As well as the menu items:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/buttonSlider"
android:icon="#drawable/ic_slider"
android:title="Sliders"
/>
<item
android:id="#+id/buttonPalette"
android:icon="#drawable/ic_palette"
android:title="Palette"
/>
<item
android:id="#+id/buttonShuffle"
android:icon="#drawable/ic_shuffle"
android:title="Shuffle"
/>
<item
android:id="#+id/buttonSchedule"
android:icon="#drawable/ic_alarm_off"
android:title="Schedule"
/>
<item
android:id="#+id/buttonConnect"
android:icon="#drawable/ic_bt_off"
android:title="Connect"
/>
<item
android:id="#+id/buttonStats"
android:icon="#drawable/ic_timeline"
android:title="Statistics"
/>
</menu>

If you check the stack trace for the crash, you'll find this:
03-29 00:08:30.568 9850 9850 E AndroidRuntime:
Caused by: java.lang.IllegalArgumentException:
Maximum number of items supported by BottomNavigationView is 5.
Limit can be checked with BottomNavigationView#getMaxItemCount()
Indeed, if you check the documentation for BottomNavigationView, you will find:
It should be used when application has three to five top-level destinations.
The solution is simple enough: delete one of your menu items. If that is not an option for you, you will have to create your own implementation of bottom navigation rather than using BottomNavigationView.

Related

BottomNavigationView not inflating

I'm trying to inflate a BottomNavigationView in activity_main.xml but to no avail.
Here's my bottom_navigation.xml in the menu resource directory:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="nav_library"
android:icon="#drawable/svg_library"
android:title="Library" />
<item
android:id="nav_search"
android:icon="#drawable/svg_search"
android:title="Search" />
<item
android:id="nav_liked"
android:icon="#drawable/svg_heart"
android:title="Liked" />
</menu>
And here's my activity_main.xml:
<?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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation"
android:background="?android:attr/windowBackground" />
</RelativeLayout>
It seems that android:layout_height="wrap_content" does not detect the icons nor the title of the menu and as such, the height and width of the navigation bar are both 0.
Here's an image with the wrap_content attribute. (Not enough rep for an embed)
Please advise.
P.S This is my first question on Stack Overflow, so my question formatting might not be the best.
A bit late to the party. But I eventually figured it out that day. Was missing the prefix #+id/:
<item
android:id="#+id/nav_library"
android:icon="#drawable/svg_library"
android:title="Library" />

Android Studio How do I get my Bottom navigation view to show my menu

Im trying to get my material Bottom Navigation bar to show up but whenever i add " app:menu="#menu/nav_menu" " to my acitivty_main.xml, the Navigation bar disappears. How do I fix this?
activity_main.xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/fl_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"/>
<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"
app:menu="#menu/nav_menu"
/>
</RelativeLayout>
nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_profile"
android:icon="#drawable/ic_profile"
android:title="Favorites"
android:visible="true"/>
<item
android:id="#+id/navigation_steps"
android:icon="#drawable/ic_steps"
android:title="Steps"
android:visible="true"
/>
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_action_home"
android:title="Home"
android:visible="true"/>
</menu>
I'm not sure why it's not working. When i take away the app:menu part it shows a black navigation bar but as soon as I add the menu, the navigation bar disappears.
I think you need to set background color to bottomnavigation menu.
try adding
android:background="?android:attr/windowBackgroud" in your bottomnavigation menu.

Android : Customising Navigation App Drawer

I have the below design to implement for the Android Navigation App Drawer of the app and I am confused how to go about it.
In my design, there is a black strip on the left side, which also has an image. My query is how do I create that space in the app drawer ?
I tried to add a Layout inside the app drawer but couldn't. It only allows 'Items' and 'Groups' to be added. What are my possible options ?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
android:background="#color/colorBg"
<group android:checkableBehavior="single">
android:background="#color/colorBg"
<item
android:id="#+id/myasset"
android:background="#color/colorBg"
android:title="My Asset" />
<item
android:id="#+id/account"
android:background="#color/colorBg"
android:title="Account" />
<item
android:id="#+id/howitworks"
android:background="#color/colorBg"
android:title="How it works" />
<item
android:id="#+id/feedback"
android:background="#color/colorBg"
android:title="Feedback" />
<item
android:id="#+id/legal"
android:background="#color/colorBg"
android:title="Legal" />
<item
android:id="#+id/exit"
android:background="#color/colorBg"
android:title="Exit" />
</group>
</menu>
When you create new project in Android Studio, there is an option that help you build NavigationDrawer.
Default activity_main.xml in layout
<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="start">
<include
layout="#layout/app_bar_main"
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="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
And you can do anything with activity_main_drawe or nav_header_main.
You can create custom navigation drawer. Try below tutorial :
Custom navigation drawer 1
Custom navigation drawer 2
The solution that worked for me is Hamzeh Soboh's answer here.
https://stackoverflow.com/a/31716815/609235

android navigation drawer item without icon, display text only

I want to add a menu item entry without icon to navigation drawer in my android app.
I have checked the samples at NavigationDrawer
and read through the tutorial at Android Developer training article.
I edited the sample menu to add new menu items "My Text 1" and "My Text 2" as per this xml file following this image:
<?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_camera"
android:icon="#drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="#+id/nav_slideshow"
android:icon="#drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="Tools" />
<item
android:id="#+id/example"
android:title="My Text 1" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
<item
android:id="#+id/sample"
android:title="My Text 2" />
</menu>
</item>
</menu>
If i remove the two lines declaring icons for "Share" and "Send", then "My Text 2" gets aligned to the left as shown in this image
But i want to keep the icons of other items, and just add a text item, i hope there is some parameter that allows no icon menu item in groups.
I tried using android_icon="#android/color:transparent", but that doesn't/can't solve the problem either.
I dont want to provide any icons for my menu items, but i expect that text to align to the left. Is that achievable? If yes, how?
No custom layout here.
You have to create a second group with an ID (even dummy) then in this group put all the items without any icon.
Note: every time the group ID changes Android adds a separator line.
<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:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_menu_dummy1"
android:title="#string/nav_menu_home"/>
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_menu_dummy2"
android:title="#string/nav_menu_profile"/>
</group>
<group android:id="#+id/dummy">
<item
android:id="#+id/nav_info"
android:title="#string/nav_menu_info"/>
<item
android:id="#+id/nav_settings"
android:title="#string/nav_menu_settings"/>
</group>
Create your custom layout for the Navigation Drawer and do whatever you want with that:
This is my xml file for custom design of drawer 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/rl_topbar"
layout="#layout/inflate_topbar" />
<FrameLayout
android:id="#+id/fl_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/rl_topbar" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/ll_navbar_container"
android:layout_width="#dimen/navbar_width"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#color/color_255_255_255"
android:orientation="vertical">
<!--This is my custom layout how I want, you can design as you want and include it-->
<include
android:id="#+id/ll_navbar"
layout="#layout/inflate_navbar" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
<!--Add progress bar-->
<!--Add other views-->
</RelativeLayout>
Now in your activity of this xml file take the references of views and make click events or other changes easily.
A simple alternative would be to use a custom layout instead of a menu.
It'll be a simple change. Simply, you can just create a custom layout as you would in any other layout but instead of indicating the corresponding menu within the NavigationView, instead of using the app:menu="#menu/drawer_view" attribute.
You can simply follow the layout structure of in your Activity.
<android.support.design.widget.CoordinatorLayout
<android.support.v4.widget.DrawerLayout
<RelativeLayout/>
<LinearLayout/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
There's no fundamental difference between the structure of the tutorial and that of this layout except, I've chosen to use a LinearLayout instead of a menu resource for the side menu (obviously the rootlayout for the side view will be at your discretion but for your use-case LinearLayout fits best.).
An Example
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_activity_main"/>
<include layout="#layout/layout_side_view"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
You'll notice in this layout that there are two include statements in place of the layouts before as shown in the structure before. One for the actual content of the activity and one for the side view. I'll show you an example of your requested use case layout below:
layout_side_view.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/with_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:drawableLeft="#drawable/icon"
android:drawableStart="#drawable/icon"
android:drawablePadding="15dp"
android:gravity="start|center_vertical"
android:text="TextView 1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/without_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:gravity="start|center_vertical"
android:text="Text View 2"/>
</LinearLayout>
</LinearLayout>
You can then simply customize your layout and where you want a TextView with an icon on the left use the DrawableLeft | DrawableStart attribute, and if you don't want an icon simply just don't use it.
I hope this helps.
Note:
I would look into what the DrawerLayout does and why it is structured that way, the content goes below the menu for what reason? Looking into these things helps you develop an understanding where you can customize layout structures to your liking.

How to position menu items in Navigation View?

My question is related to recently released Navigation View from Design Support Library.
I want to position Log In at the bottom of the Navigation View, how I can do this?
My menu XML right now, look like this :
<?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/navigation_sub_item_1"
android:icon="#drawable/ic_action_event"
android:title="#string/home" />
<item
android:id="#+id/navigation_sub_item_2"
android:icon="#drawable/ic_action_person"
android:title="#string/profile" />
<item
android:id="#+id/navigation_sub_item_3"
android:icon="#drawable/ic_action_labels"
android:title="#string/tags" />
<item
android:id="#+id/navigation_sub_item_4"
android:icon="#drawable/ic_action_settings"
android:title="#string/log_in" />
</group>
</menu>
Here is my 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:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white_1000">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/main_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Do you want your "Log In" item to be fixed at the bottom of the Navigation View?
You can do that by nesting additional views/layouts within NavigationView. NavigationView extends FrameLayout, so you can wrap it around child views.
I posted more information on NavigationView footers here. Also see the other answers in that post for more layout options.
Edit
FYI: If you use the "fixed footer" approach, you are basically removing the footer item (e.g. "Log In" in your example) from the menu. That means you have to implement click and other handlers yourself.
I think navigation menu works like a listview. So Items will be placed in a list.
If you want one item to be placed at the bottom, you can customise within the NavigationView Tag in layout xml

Categories

Resources