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.
Related
In short, I don't want the empty space below the icons of bottom navigation view. Here is how it looks.
Screenshot with layout bounds enabled in developer options
Screenshot without layout bounds enabled in developer options
This is what I have done in MainActivity layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:theme="#style/Theme.Breathe"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainFrag" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.9"
android:gravity="center">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_50sdp"
android:layout_marginRight="#dimen/_50sdp"
android:elevation="8dp"
app:itemIconTint="#drawable/bottom_navigation_color"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_navigation_menu" />
</LinearLayout>
This is what I have done on the Java side:
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
Log.d("Dark Mode","Dark mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40 );
shape.setColor(Color.DKGRAY);
bottomNavigationView.setBackground(shape);
break;
case Configuration.UI_MODE_NIGHT_NO:
Log.d("Light Mode","Light mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40);
shape.setColor(Color.WHITE);
bottomNavigationView.setBackground(shape);
break;
}
I have used java to set the shape drawable so as to implement light/dark theme based on system settings.
I have tried padding, it works but then the layout of the icons messes up on smaller display sizes. I am hoping there's another way to do it.
The issue was with the bottom navigation view conflicting somehow with the sticky immersive mode. Changing the way how I achieved full screen solved the problem.
Even though it's an old question.
For those that still encounter this. The problem is that on older phones with system built-in bottom navigation bar
like this
the system does NOT render correctly BottomNavigationView if the system navigation bar is transparent.
So quick fix: If your system navigation bar is transparent (from the Themes.xml or programtically) change it to solid and it should fix it.
Hello!
I just want to know if it's possible to make a bottom navigation bar like this, with this amazing blue center button. I just want the design (xml code). Can you help me?
Thanks!
I guess you can get the effect you want starting from this tutorial
then you have to work I guess the circle so that you can enlarge following another tutorial changing the size try this just to warm up and be confident for the concept, then you are going to find five solutions with the code here
<android.support.design.widget.CoordinatorLayout
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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
Everytime I launch a new activity from my MainActivity the new activity's statusbar turns white. For some reason this problem does not affect the Activity MainActivity which is initially loaded though.
I realize this behavior has been discussed enough on the thread Status bar turns white and does not show content behind it but most of the solutions suggested center around disabling your transparent statusbar and I couldn't get any other solutions to work for me.
This is the layout of one of my activities:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/search_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The attribute android:fitsSystemWindows="true" appears to have no effect here though, since all contents of my activity layout already fit the system window boundaries. It is only that the statusbar is colored completely white.
I rely on my transparent statusbar and thus can not disable it. Is there any other way to prevent the described behavior?
I have now identified two solutions for achieving the desired behavior:
Modifying window flags in the activity's onCreate method:
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
This will color the status bar grayish so that the system icons are visible again.
Modifying the background color of the activities root layout to match the desired statusbar color:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/colorPrimaryDark">
<FrameLayout
android:id="#+id/search_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I was able to find the last solution thanks to a friendly comment from Phoenix Wang.
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.
I'm building an app for Android using a viewPager, and things work just fine on a phone, but on a tablet there is a gray background on both sides of the tabs, the need is to change this background color to white.
On a phone it Looks just fine, sorry for ugly censoring
On a tablet the gray background appears
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#color/white" />
The styles I've tried to override are the ones below, I've tried to set most properties that contain the word "color" to white, but nothing has worked.
android:actionBarStyle
android:actionBarTabStyle
android:actionBarTabBarStyle
I base my theme on Theme.AppCompat.Light
I've also tried setting the background of the viewPager and actionBar in code, but it did nothing, I'm guessing it's a subview I need to get to. I've been googling my heart out but I can't find anything about this specific styling.
You can do something like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</RelativeLayout>