Develop Reference

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" />

Image as background in menu item

As said in the question.
What I currently have:
Desired output:
On each column there would be a background image. I'm going to remove the text and just fill items with images. Is this possible? If yes, do I need different resolutions for background images?
Activity_main_drawer.xml:
<?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:checkableBehavior="single">
<item
android:id="#+id/nav_ITEM1"
android:title="#string/ITEM1"
/>
<item
android:id="#+id/nav_ITEM2"
android:title="#string/ITEM2" />
<item
android:id="#+id/nav_ITEM3"
android:title="#string/ITEM3" />
</group>
</menu>

Depending on what exactly you are looking to do, you could try add an icon:
<item
android:id="#+id/nav_ITEM1"
android:icon="#drawable/item1_image"
android:title="#string/ITEM1" />
EDIT / UPDATE: to set the 'background image' of a menu entry, try:
<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"
android:fitsSystemWindows="true"
app:itemBackground="#drawable/YOUR_DRAWABLE_HERE". <<<<<<<<<
app:headerLayout="#layout/nav_header_home"
app:menu="#menu/activity_home_drawer" />
Unfortunately, this sets the same image for each entry - but, it is a good starting point. Will update if I see a way of customising each entry.
LAST UPDATE, This allows you to define a unique background for each entry. Its not perfect, but maybe you can tweak it to work:
include 'app' in your xml for your menu:
xmlns:app="http://schemas.android.com/apk/res-auto"
Then, make a simple layout file that has an image:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/announce"/>
</FrameLayout>
In menu, update the item to point to the layout file you made above
<item
android:id="#+id/nav_gallery"
android:title=""
app:actionLayout="#layout/test" /> <<<<< HERE
Source: found some methods and ideas here: https://stablekernel.com/article/using-custom-views-as-menu-items/

DrawerLayout with NavigationView - not showing ripple effect on click

I have a problem with obtaining on-click effect visible at my drawer.
I have activity xml layout as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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"
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"/>
</android.support.v4.widget.DrawerLayout>
As you can see I put NavigationView into my DrawerLayout and then populate NavigationView using menu xml file.
My activity_main_drawer.xml looks as follows:
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
>
<group>
<item
android:id="#+id/id1"
android:title="Item 1"/>
<item
android:id="#+id/id2"
android:title="Item 2"/>
<item
android:id="#+id/id3"
android:title="Item 3"/>
<item
android:id="#+id/id4"
android:title="Item 4"/>
</group>
Unfortunately, when I do it that way I don't have any visual effect after clicking on item in that drawer menu. What I would like is to have so called "ripple effect". How can I do it?

I have also faced this problem
Please Remove this attributes:
clickable=true
focusableOnTouch=true
then apply ripple effect XML
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#android:color/transparent"
tools:targetApi="lollipop"> <!-- ripple color -->
<item android:drawable="#android:color/transparent" /> <!-- normal color -->
I Hope it will help you

You can use set the attribute itemBackground with ?android:attr/selectableItemBackground to get the ripple effect for your NavigationView items
<android.support.design.widget.NavigationView
/* ... other attributes... */
app:itemBackground="?android:attr/selectableItemBackground"/>

Ripple Effect can be added in following way.
Add itemBackground into NavigationView inside your xml file the following attribute:
app:itemBackground="#drawable/ripple_navigation_selector"
Also, inside the drawable-v21 folder, add ripple_navigation_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/ripplecolor" >
<item android:drawable="#color/accentColor" />
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>

If you are using appcompat you can add this to the XML for your navigation drawer item android:background="?attr/selectableItemBackground".
The above solution is taken from this answer.
Hope this helps you.

It might be due to slow performance, try adding a 200-300ms delay before doing anything at onClick.
public void itemClicked(MenuItem item) {
Handler theHandler = new Handler();
theHandler.postDelayed(new Runnable() {
#Override
public void run() {
//whatever you wish to do
}
}, 200);
}
Don't worry this much delay wont be visible to the user, but will show the ripple effect smoothly.

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 style Android Spinner with Material light theme on a dark background?

I can't figure out how to style this spinner in a dark-background drawer with the v21 Material theme. I've tried various approaches involving custom styles and nothing seems to make a difference with the appearance of this spinner.
Here's how it looks in the app, running on Android 5.0.1. The spinner, here with the selected item "Code on the Beach 2015", is in a drawer with a dark background (#DD000000), but the rest of the app is a light theme. The arrow shows as black - almost impossible to see on the device. I'd like to make it have a white arrow.
Here's my styles.xml file:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="app_theme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#E95624</item>
<item name="colorPrimaryDark">#BD4000</item>
<item name="colorAccent">#86d3c5</item>
<item name="windowActionBar">false</item>
</style>
</resources>
And here's the Main.axml file, the main layout for this activity, that contains the DrawerLayout and the Spinner:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:a="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
a:layout_width="match_parent"
a:layout_height="match_parent"
a:orientation="vertical">
<android.support.v7.widget.Toolbar
a:id="#+id/main_toolbar"
a:layout_width="match_parent"
a:layout_height="wrap_content"
a:minHeight="?attr/actionBarSize"
a:background="?attr/colorPrimary"
a:elevation="2dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
a:id="#+id/drawer_layout"
a:layout_width="match_parent"
a:layout_height="match_parent">
<FrameLayout
a:id="#+id/content_frame"
a:layout_width="match_parent"
a:layout_height="match_parent" />
<LinearLayout
a:id="#+id/left_drawer"
a:orientation="vertical"
a:layout_width="240dp"
a:layout_height="match_parent"
a:layout_gravity="start"
a:background="#DD000000">
<Spinner
a:id="#+id/event_spinner"
a:layout_width="match_parent"
a:layout_height="wrap_content"
a:padding="4dp" />
<ListView
a:id="#+id/left_drawer_list"
a:layout_width="match_parent"
a:layout_height="wrap_content"
a:choiceMode="singleChoice"
a:divider="#android:color/transparent"
a:dividerHeight="0dp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
And in case it is relevant, here is the code that sets the spinner's adapter (Xamarin C#):
var adapter = new ArrayAdapter<string>(SupportActionBar.ThemedContext, Resource.Layout.event_selector, events);
adapter.SetDropDownViewResource(global::Android.Resource.Layout.SimpleSpinnerDropDownItem);
_eventSelector.Adapter = adapter;
And here's my event_selector.axml (I changed textColor to #fff after taking screenshot, did not affect arrow color):
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="8dp"
android:textSize="16sp"
android:textColor="#fff" />
What modifications to my .axml or styles.xml files do I need to make to give this spinner a white arrow? Thanks in advance!

The key is to set the backgroundTint attribute to the color you want.
<Spinner
a:id="#+id/event_spinner"
a:layout_width="match_parent"
a:layout_height="wrap_content"
a:padding="4dp"
a:backgroundTint="#FFFFFF"/>