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"

How to set full width for bottom navigation in Android

I am working in an Android app,In this I want to make set full width for bottom navigation tabs when I rotate the screen to landscape mode.
activit_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/Conslayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:animateLayoutChanges="true"
android:layoutMode="opticalBounds"
android:background="?android:attr/windowBackground"
app:itemBackground="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation"
app:itemIconTint="#color/color_selector"
app:itemTextColor="#color/color_selector" />
</android.support.constraint.ConstraintLayout>
In this view I want to set the bottom navigation tabs to take full with like the Tab layout in the screen.
Thanks.

I have a BottomNavigationView that fits the whole screen in landscape mode, I believe the key is to set android:background and app:itemBackground to the same color.
Here is my BottomNavigationView that fits the whole screen in landscape mode:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorBottomBar"
app:itemBackground="#color/colorBottomBar"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"/>
EDIT:
I misunderstood your question, so basically you want to stretch your buttons, I copied your layout exactly, and in the folderres in the subfolder values I created a file named dimens.xml, inside this file put this:
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
<dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>
And just run your project again, the buttons will stretch. This is a quick solution, make sure that you check out this answer, because you need to take care of other screen sizes, the answer in this link gives a full and detailed solution.

Try this it works for me in mobile as well as tab. Just set your own colors.
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:background="#color/light_blue_500"
android:layoutMode="opticalBounds"
android:theme="#style/BottomNavAppTheme"
app:itemBackground="#color/light_blue_500"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
This is my nav_item_color_state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDark" android:state_enabled="false" />
</selector>

Need to set your width to
"match_parent"

fitsSystemWindows in android studio layout preview

Question: android:fitsSystemWindows="true" in layout is not being taken into account in android studio layout preview. Why is this so and how can i make it show correctly in layout preview?
I am using a theme with the following flag
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
I have a layout file
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</android.support.design.widget.CoordinatorLayout>
This is how it look like in preview
This is how it look on device
As you can see, "Hello World!" is overlapped by system bar in layout preview (android:fitsSystemWindows is not working here) but is positioned below system bar on device (android:fitsSystemWindows is working here)

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.

Adding shadow below TabBar - Material Design

I have an actionbar and tab bar. I removed shadow below actionbar with
<item name="android:windowContentOverlay">#null</item>
Though, I want to add shadow under tab bar. I'm using SlidingTabLayout. My tab TextView:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabText"
android:layout_width="wrap_content"
android:layout_height="#dimen/actionbar_height"
android:textColor="#color/tab_color"
android:gravity="center"
android:textAllCaps="true"
android:singleLine="true" />
How to do that?

jmols answer results in a different shadow than what Google apps (e.g. Play Newsstand) use. This is my method, which results in the shadow looking exactly the same as Play Newsstand:
Create a drawable called shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#33000000"
android:angle="90">
</gradient>
</shape>
Then, set that shadow to your content layout, for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Your views here -->
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#drawable/shadow" />
</RelativeLayout>
Placed underneath your toolbar/action bar, this will look exactly the same as the implementation in Play Newsstand and Play Store.

Shadows are currently only supported on Api level 21 (as they are rendered in real time) and are not provided by the support library unfortunately.
Hence you will have to mimic the shadows yourself using a custom drawable on api levels < 21.
The easiest way to do this is:
take the shadow 9-patch from the Google IO app.
set that shadow to your main content layout, for example:
<RelativeLayout
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">
<Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:title="#string/toolbar_title"
android:elevation="#dimen/toolbar_elevation"/>
<FrameLayout
android:id="#+id/fl_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tb_toolbar"
android:foreground="#drawable/bottom_shadow"/>
</RelativeLayout>
Note: the only notable exception to this is CardView, this one does cast its own shadow on older api levels.
Have a look at this post for more information.

If you are using Android Material Design, to add a shadow to a view you need to specify the android:elevation attribute in your layout or call myView.setElevation() method in your code. You can have more on defining shadows with material design in the android documentation

Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.
android:elevation="10dp"
Below example:
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="10dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="10dp"/>
Same question: Link
be aware, if you have the following line in the manifest then shadows wont show:
android:hardwareAccelerated="false"
And another link to follow: Link