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.
Related
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.
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
whenever i open my navigation drawer frame layout contents are getting shown in background i even tried setting the frame's color white
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
tools:context="com.example.sumanravi.knowmycity.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_layout"
android:background="#color/white">
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical">
<ListView
android:layout_width="200dp"
android:layout_height="match_parent"
android:id="#+id/navList"
android:choiceMode="singleChoice">
</ListView>
</LinearLayout>
If what you want to do is to hide the contents of a layout, you can:
Hide the whole layout (setting visibility to View.GONE or View.VISIBLE)
Change the alpha (setting alpha on the layout itself)
Remove all of the layout's children (please don't use this method, it's stupidly slow)
Containing views will always have their parent's background drawn underneath them. Another fun way to hide the content is to use the drawer listener: https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html#onDrawerSlide(android.view.View, float) - look for onDrawerSlide(View, float) method and (for example) change the View's alpha as you go.
Another thing you could do with FrameLayouts is to set the foreground: set forground color in framelayout in android programatically
But generally, content under navigation drawers is always (at least partially) visible. If you're trying to hide it, you're probably not following the guide.
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>
Since upgrading to SDK 21 I've been trying to use the elevation property but it never seems to work.
I want to elevate a frame above others so I'm setting the following
android:elevation="4dp"
but there's no sign of shadow. I've tried buttons and framelayouts but not got any elevation
So here's the full tag
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:elevation="4dp"
>
Am I missing something else I need to add
Make sure that the background for the container holding the FrameLayout is not transparent.
According to this Z = Elevation + TranslationZ
so try this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:elevation="4dp"
android:translationZ="4dp">
You need to add a background to it something like:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="#drawable/dialog_background">
Instead of using white color. Otherwise the shadows won't work. Also, is it not necessary to use android:translationZ attribute since that just adds to the elevation, but is not required if you don't want animation.