Develop Reference

My BottomNavigationBar icons goes outside of the screen

I am using BottomNavigationBar from here. I followed every instruction carefully and it works fine until I got this problem where icons pop out of the screen with too much of gap between them.
Menu_items.xml
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_Menu"
android:enabled="true"
android:icon="#drawable/menu"
android:title="#string/nav_menu"
android:visible="true"
app:showAsAction="withText"/>
<item
android:id="#+id/nav_Deals"
android:enabled="true"
android:icon="#drawable/fire_deals_icon"
android:title="#string/nav_deals"
android:visible="true"
app:showAsAction="withText"/>
.
.
.
</menu>
MainMenu.xml
<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:id="#+id/main_menu_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/TextcolorforWhite"
tools:context=".MainMenu">
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/main_nav"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:menu="#menu/nav_items"/>
<View
android:id="#+id/myProfileDivider"
android:layout_width="match_parent"
android:layout_above="#+id/main_nav"
android:layout_height="0.5dp"
android:background="#color/SettingsColor"/>
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:paddingBottom="57dp"
android:layout_above="#id/myProfileDivider">
</FrameLayout>
Is there any solution for this?

In MainMenu.xml (in case of using constraintLayout, as the main parent layout, which is better to use) change android:layout_width="match_parent" to android:layout_width="0" and add these:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Also you may have to omit: android:layout_alignParentBottom="true".

See this documentation
Don’t use more than five destinations. For those cases, try tabs or a navigation drawer.
Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.
Did you check your icon size
The recommended width is 24dp
The recommended height is 24dp

First remove android:layout_alignParentBottom="true" from your FrameLayout Second in your com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx add below item:
android:layout_alignParentEnd = "true"
android:layout_alignParentStart = "true"
android:layout_width="match_parent"

Content goes behind soft navigation bar for api 21 and up

Have upgraded app to use Material Design - Theme.AppCompat.Light.NoActionBar, Toolbar instead of ActionBar etc..
And have a problem.
Bottom content become to be hidden under soft NavigationBar (see picture below) on devices with APi >= 21
Have found solution to fix this:
in values-v21/styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorPrimaryDark">#color/green</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</styles>
if option <item name="android:windowDrawsSystemBarBackgrounds">false</item> - bottom content is visible, but statusbar become completely black. I cant change color to colorPrimaryDark (green in my case)
if option <item name="android:windowDrawsSystemBarBackgrounds">true</item> - bottom content is invisible, and statusbar is green, as expected.
I want to have statusbar colored(green) and visible bottom content..
Probably, issue is with toolbar. Is it pushes content down?
Any suggestions?
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
UPDATE:
As suggested #azizbekian, I've replaced container for fragmets to CoordinatorLayout(before FrameLayout) and applied android:fitsSystemWindows="true"
In this case bottom panel is visible, but not at the bottom..
Goal is to keep buttons athe bottom...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"/>
<!-- The main content view -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
layout of the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<FocusableScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/order_editor_layout"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/o_e_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</FocusableScrollView>
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/oe_bottom_pane"/>
</LinearLayout>
Here is result:
UPDATE#2
Activity Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
Replaced LinearLayour with CoordinatorLayout as root for activity.
As root element for content I've keep FrameLayout.
Applied android:fitsSystemWindows="true" to CoordinatorLayout.
This way, all content was slightly moved up and part of placed below the toolbar(you can see on image below - top elements are circle with + and - symbold. But on previous images there are text on the top.) Regarding bottom elements (buttons panel) - still placed below navigation bar but also slightly moved up. I've marked android:background="#color/red" to easier recognize position of this panel.
Seems, we are on the right way. All we need - to resolve problem - why content moved below the toolbar.. If tolbar will be top ui elemnt, buttons will be visible..

Apply android:fitsSystemWindows="true" to your root view.
See this post for detailed explanation.

android navigation view badge on menu icon

I'm using Navigation view for slide drawer, and setting options using app:menu property. I want to show the notification count on Menu Icon.
I have specified android:actionLayout in menu xml, but it is showing the badge to the right of title but I want it on top right corner of the Icon.
My Code is like this:
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="?attr/colorPrimary"
app:headerLayout="#layout/navigation_header"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/menu_main" />
main_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group
android:checkableBehavior="single">
.
.
.
.
<item
android:id="#+id/drawer_notification"
android:icon="#drawable/menu_notfication"
app:actionViewClass="android.widget.TextView"
android:actionLayout="#layout/menu_counter"
android:title="Notification"/>
<item
android:id="#+id/drawer_settings"
android:icon="#drawable/menu_setting"
android:title="Settings"/>
<item
android:id="#+id/drawer_faq_help"
android:icon="#drawable/menu_faq"
android:title="FAQ and Help"/>
.
.
.
</group>
menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/circle_bagde"
android:gravity="center_vertical"
android:padding="5dp"
android:text="12"
android:textColor="#android:color/white"
android:textSize="16sp" />
I want it like this:

You can Customize NavigationView also.
Just use Code like below.
<android.support.design.widget.NavigationView
android:layout_width="300dp"
android:layout_gravity="start"
android:id="#+id/navigationView"
android:layout_height="match_parent">
<include layout="#layout/drawer_layout"/>
</android.support.design.widget.NavigationView>
Now in include tag, Add a layout with the recycler and in the recyclerView's onCreateView give the recycler the layout you want and set whatever values you want to set in onBind method like you do normally.
Just remember to call findViewById for recycler in navigationView like : navigationView.findViewById(R.id.recyclerVIew)

You can use SublimeNavigationView to do this.
if you don't want to use third party drawer then you can create Navigation Drawer with RecyclerView or ListView instead of NavigationView. and you can easily customize RecyclerView or ListView.

Navigation View Multiline Text

I have an app with a Navigation View for my DrawerLayout. I add programmatically items in the menu because I receive the information over the network. But sometimes, an item name can be very long and is just cut off with even having the ellipsize icon "..."
Does someone have an idea on how to have multiline for my menu items?
Thanks

Override design_navigation_menu_item.xml from the Android Support Design Library and modify the things you need (set android:ellipsize="end" and android:maxLines="2")
Your res/layout/design_navigation_menu_item.xml should look like this:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<CheckedTextView
android:id="#+id/design_menu_item_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawablePadding="#dimen/design_navigation_icon_padding"
android:gravity="center_vertical|start"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:ellipsize="end"
android:maxLines="2" />
<ViewStub
android:id="#+id/design_menu_item_action_area_stub"
android:inflatedId="#+id/design_menu_item_action_area"
android:layout="#layout/design_menu_item_action_area"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</merge>
However, you should just ellipsize the text to properly follow the Material Design guidelines.
You have not to override anything to just ellipsize the text:
Add a new style to the styles.xml
Set the new style to the NavigationView
res / values / styles.xml
<style name="TextAppearance">
<item name="android:ellipsize">end</item>
</style>
res / layout / activity_main.xml
<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"
app:theme="#style/TextAppearance" />

Just add app:itemMaxLines="2" attribute on the NavigationView tag like this:
<com.google.android.mayerial.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"
app:itemMaxLines="2" />
NOTE: Material dependency is--
implementation 'com.google.android.material.material:1.0.0'

Add a style to your NavigationDrawer and then include 2 lines in the style.
<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:background="#drawable/estilo"
android:fitsSystemWindows="true"
app:itemTextColor="#color/white"
app:theme="#style/NavigationDrawerStyle"
app:menu="#menu/activity_main_drawer" />
<style name="NavigationDrawerStyle">
<item name="android:lines">2</item>
</style>

Check out this answer. Default android slide menu is not very flexible, most likely you will have to create your custom view.
I really this tutorial from AndroidHive.

I had the same problem and I tried and tried, There was no progress with Menu, I don't say it was impossible but I couldn't find a way to break MenuItem lines.
But if you don't insist on using Menu I suggest you to use a ListView or RecyclerView in your layout like 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"
app:headerLayout="#layout/nav_draw_header">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_marginTop="160dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
As you can see there is no special thing to explain, no menu, just a RecyclerView, layout_marginTop value is same as header height, I'm sure you know the rest of the story (How to fire up RecyclerView), This approach gives more flexibility to NavigationView menu items (actually RecyclerView items).
If my answer is not clear enough to you let me know.
Here is the result:

You shouldn't change that.
Check out the material design guideline: https://material.io/design/components/navigation-drawer.html#anatomy

Add a style in your NavigationDrawer that declares the number of lines as 'two', like so:
<style name="NavigationDrawerStyle">
<item name="android:lines">2</item>
</style>
and in your view:
<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:background="#drawable/estilo"
android:fitsSystemWindows="true"
app:itemTextColor="#color/white"
app:theme="#style/NavigationDrawerStyle"
app:menu="#menu/activity_main_drawer" />

Selector for layout inside DrawerLayout doesn't work

I have a view aligned to the bottom of a navigation drawer that is not in list.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/readscreen_bg">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/loading_layout"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="#+id/navigation_drawer_content"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:background="#color/navdrw_bg"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_gravity="start" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_support_item_height"
android:id="#+id/support_project"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:background="#drawable/support_project_selector"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="#dimen/navigation_item_icon_size"
android:layout_height="#dimen/navigation_item_icon_size"
android:id="#+id/navigation_icon"
android:layout_marginLeft="#dimen/navigation_item_icon_left_margin"
android:layout_marginRight="#dimen/navigation_item_icon_right_margin"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_support"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/navdrw_bg"
android:text="#string/navigation_support_project"
android:textSize="#dimen/navigation_item_text_size"
android:id="#+id/navigation_name"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/navigation_icon"/>
</RelativeLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:layout_above="#+id/support_project"
android:layout_gravity="left"
android:dividerHeight="0dp"
android:divider="#null"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
It is, with id support_project. The problem is selector for this layout doesn't work.
support_project_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="true"
android:state_selected="true"/>
<!-- Pressed -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="false"
android:state_selected="true"/>
<!-- When not selected -->
<item
android:drawable="#color/navdrw_support_block_bg"/>
</selector>
I was trying many variants and nothing helped. Selector does install color when view is not clicked but when it is clicked it doesn't change it's color.
But layout is clickable, I do receive click event and can process it. The problem is only with click/activate color.
Colors in selector for active and normal state are 100% completely different.

There are multiple aspects you are handling not so good, here.
First, your selector possible states:
You should have an item tag per state you want to customize and one different android:state value per item tag. So, remove your android:state_focused attributes from both states (selected and pressed).
On your pressed state, you are using android:state_selected="true" when you should be using android:state_pressed="true". This will make your selector work when the item is actually pressed, not only when it is selected.
Second, in order to affect the selector to your RelativeLayout, you have to set it clickable by adding android:clickable=true attribute in your xml layout. RelativeLayout is not clickable by default, unlike a Button, for example.
For last, add android:duplicateParentState="true" to your RelativeLayout children Views, ImageView and TextView. This attribute allows the children to have the same state as the parent. When your RelativeLayout is selected or pressed, that state will be replicated by its children.
And you are done. Your selector is working.