Android - Navigation Bar replace my Bottom Navigation Bar - android

The problem is in the title, I use a Bottom Navigation View/Bar, it works fine on smartphone without virtual Navigation Bar :
On my Samsung Galaxy S6 Edge without Navigation Bar
And with a virtual NavBar, the Bottom Navigation View disappear :
On my Huawei with virtual Navigation Bar
I tried to remove the Navigation Bar and force the application to go on Fullscreen and the Bottom Navigation View/Bar appeared.
It's why I think that the Navigation Bottom Bar is overrided by the Navigation Bar from the smartphone.
I want my Navigation Bottom Bar to be above the virtual Navigation Bar!
Help me to fix this bug please.
EDIT :
Here is the layout of this activity :
<?xml version="1.0" encoding="utf-8"?>
<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/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_fond_opacite"
android:fitsSystemWindows="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#+id/frame"
android:layout_above="#+id/bottomNavigationAvis"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
android:id="#+id/bottomNavigationAvis"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:bnv_active_color="#color/vraiment_pro_vert"
app:itemBackground="#color/vraiment_pro_fond_gris"
app:itemTextColor="#color/vraiment_pro_fond_gris"
app:bnv_active_text_size="#dimen/bottom_navigation_text_size_active"
app:bnv_colored_background="true"
app:bnv_inactive_text_size="#dimen/bottom_navigation_text_size_inactive"
app:bnv_with_text="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>

I solved it ! It was a problem with something in my code that was blocking the UI, unfortunately, sorry :)

Try setting the RelativeLayout height to match_parent as shown below.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</RelativeLayout>

Related

Android BottomNavigationView Icon and text label overlap each other in Emulator tablet

I have created layout with help of sdp Library and ssp Library, When testing in Nexus 10 API 24 emulator, BottomNavigationView show icon and text label which overlap each other. It work fine with mobile screen.
BottomNavigationView : android.support.design.widget.BottomNavigationView,
Bottom navigation height : #dimen/_43sdp equivalent to 56dp in mobile,
Bottom navigation icon size : #dimen/_18sdp,
Bottom navigation text label size : #dimen/_12ssp,
I am unable to understand whats going wrong. Please guide me.
Layout code:
<android.support.design.widget.CoordinatorLayout 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/cord_home_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.mainHome.MainNavigationActivity">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_view"
style="#style/BottomNavigation"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_navigation_height"
android:layout_gravity="bottom"
android:background="#color/white"
app:itemIconSize="#dimen/bottom_navigation_icon_size"
app:elevation="#dimen/_6sdp"
app:labelVisibilityMode="labeled"/>
<!--app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"-->
</android.support.design.widget.CoordinatorLayout>
Screenshot of tablet screen:
Just increase your bottom navigation view height. It will override default height. Let me know if it's not working because currently, I have done it.
<dimen name="design_bottom_navigation_height" tools:override="true">86dp</dimen>

BottomNavigationView not display properly

I want to remove the extra space from the navigation bar to the bottom of my screen.
As you can see below:
My BottomNavigationView leaves some space below it and I have no idea why.
The layout that contains theBottomNavigationView is very simple:
<?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"
android:id="#+id/layout"
tools:context=".NavBarActivity">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/menu"
android:background="#drawable/scroll_background"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/main_color_background"
app:itemIconTint="#color/secondaryTextColor"
app:itemTextColor="#color/secondaryTextColor"
app:menu="#menu/nav_items" />
</RelativeLayout>
I have checked that the problem is not coming from the custom background of the nav bar (I have checked it with some simple color and I got the same results)
Any ideas on why this is happening and how can I prevent it from happening?
Why your navigation background is circular?
Have you used main_color_background for circular background?
Remove that background which is making it circular and try it again. May be you have added some padding/margin in those background, which are leaving space.
So this is a funny solution:
In my phone, (galaxy j7 pro-2017) by default, there is some kind of black thin frame around every app and well, everything.
So I never had a problem, it just the way the phone is made.

Bottom navigation bar hides part of a view

In my app I want to display a simple Image,
On my Samsung Galaxy S7 Real device the image is fine, The bottom Navigation bar is not part of the view but part of the phone itself.
The whole of the Image is present.
On the Android Emulator the bottom navigation bar is part of the view and the image is partially hidden
Here is my simple Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/md_blue_50"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/toolbar"/>
<ImageView
android:id="#+id/photo_image_large"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"/>
</LinearLayout>
Here is the Android Emulator Screenshot
android emulator
Here is my Samsung Galaxy Real Device Screenshot
android real device
The problem also occurs in recycler Views in the app the bottom part of the image is cut off on the android emulator...
It's because of android:fitSystemWindows put it to false and it should be good
I had similar problems with BottomNavigationView (menu) this is solution :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_activity_main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/main_activity_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
app:itemIconTint="#color/color_main_white"
app:itemTextColor="#color/color_main_white"
app:menu="#menu/bottom_navigation_menu"/>
Try to change parameter android:layout_heigh to 0dp and add this android:layout_weight="1" for ImageView
you have to place the view above the bottom navigation bar so that the view wont hide in the bottom navigation bar

Android AppCompat ActionBar 2xHeight

I have a view which has a TabLayout in it. But the action bar is twice the height that it normally is.
I don't know if this is related to the TabLayout. The other views in the app which do not have a tabLayout, the action bar is the correct height
Has anyone experienced this? and if so what was the solution?
Here is a cut down version of my view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/tabFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
local:tabMode="fixed"
local:tabGravity="fill"
style="#style/Theme.AppCompat" />
</LinearLayout>
Update - I have since removed all the TabLayout code, and the ActionBar is still double the height it should be. I'm completely stumped on this one.
I can only think this has something to do with InvalidateOptionsMenu. I have tried changing it to use SupportInvalidateOptionsMenu.
I found out that in one of our base classes it was deciding whether the action was a tabbed mode or a navigation mode. I needed to remove the code which set it as the tabbed mode.

Strange padding on the bottom after hide and show the fragment using the transparent status bar in DrawerLayout

I used the way https://stackoverflow.com/a/27051852/3875363 to achieve the drawer behind the status bar, it seems fine before only stay for one view.
But I faced a strange case after I hide and show this fragment, a white padding appears on the bottom of the drawerlayout, it likes below.
I comment most codes to show a simple example.
The layout of activity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
The layout of fragment with drawer
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/action_bar_in_list"
layout = "#layout/toolbar"/>
</RelativeLayout>
<com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/debug_content"
android:background="#color/setting_item_group_title_text"
app:insetForeground="#4000"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:layout_height="match_parent"
android:layout_width="#dimen/navigation_drawer_width">
</com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
The layout of the second fragment:
<FrameLayout 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">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment"/>
</FrameLayout>
Once I hide the drawer fragment, show the second fragment, then I popup the back stack to return. The drawer fragment will seem like the image, a padding with the height of status bar always appear. So strange.
Try to remove android:paddingBottom from DrawerLayout.
android:paddingTop makes Drawer doesn't cover the Status Bar, but there is no reason to duplicate padding at the bottom.
EDIT:
After your update, I analyzed it once more and I think your issue can be caused by your unusual design. All guides suggest that DrawerLayout should be root element of view hierarchy (as in your example you provided). See here: link
So I suggest one of these solutions.
Use separate Activities to display Views with and without Drawer. (I recommend this, especially when your Drawer plays navigational role.)
Use one Activity with Drawer Layout as root and put Fragments as Drawer's main content. If you don't want Drawer to be openable use this method after changing Fragment:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
Try to remove the android attribute:
fitsSystemWindows = "true"
This worked for me.
According to the official documentation it's a
Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this
view to leave space for the system windows.

Categories

Resources