I'm trying to place two Fragments next to each other, but I can't get rid of a space between the ActionBar and my application contents :
Here is my XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:elevation="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.tce.manager.MainActivity"
tools:showIn="#layout/app_bar_main">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp"
android:name="com.tce.manager.DeviceListFragment"
android:layout_weight="3"
android:id="#+id/fragment_device_list" />
<FrameLayout
android:background="#android:color/darker_gray"
android:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2" />
</LinearLayout>
I already tried to change margins and padding for the Toolbar and AppBarLayout
Remove android:fitsSystemWindows="true"
If it's set to true, then it adjusts the padding of this view to leave space for the system windows.
Try removing the top padding between the action bar and fragment. Android Studio sometimes adds the top padding. Also, change the constraints so that Fragment renders properly
Related
I'm having difficulties getting AppBarLayout, NestedScrollView and BottomNavigationView working together properly. My problem is that when I set app:layout_behavior="#string/appbar_scrolling_view_behavior" on the NestedScrollView, it extends behind the BottomNavigationView as illustrated here.
So the issue is that the BottomNavBar overlays the content, instead of the content stopping at the top of the Nav.
I've tried many solutions, including wrapping the layout in a RelativeLayout and putting the BottomNavView in that instead of the CoordinatorLayout.
Here's the basic layout from the sample project I've attached.
<androidx.coordinatorlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.navigationadvancedsample.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here's a small sample project that reproduces the issue (based on the Navigation components sample from Google). Can someone please tell me what I'm doing wrong?
You just have to take BottomNavigationView out of the CoordinatorLayout and put both inside a RelativeLayout.
I was facing same problem and found the solution here. Hope it helps.
In your code, your NestedScrollView was taking up the whole screen. Using a vertical LinearLayout with weights you can make it to where the NestedScrollView stops at the top of the NavBar like you want.
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp" *** changed from match_parent to 0dp
android:layout_weight="1" *** added weight to fill remaining screen
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/> *** changed from 0dp to match_parent
</androidx.core.widget.NestedScrollView>
The way it now is set up takes into account the NavBar and expands the layout of the NestedScrollView to fill the remaining empty space on the screen. Now the NestedScrollView will not expand beyond the NavBar.
Not sure . But seem like working in preview . Putting nestedScrollView and BottomNavigation view inside a relative layout .
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav"
android:fillViewport="true" android:layout_marginBottom="-2dp">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>
I'm building an app and when I load the view with the BottomNavigationView, I have odd issues all the time, sometimes, I have an extra space and other times, the toolbar is wrongly located, for example:
With bottom navigation:
Without bottom navigation:
This is my code for the 1st image:
<?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"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</LinearLayout>
</RelativeLayout>
Toolbar:
<?xml version="1.0" encoding="UTF-8" ?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_recipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/colorPrimary"/>
And this is how it behaves with the CoordinatorLayout, after I set the paddingTop as ?attr/actionBarSize the FrameLayout moved some space, but it's still wrongly located.
With CoordinatorLayout:
<?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"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_above="#+id/bottom_navigation">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</RelativeLayout>
Without that addition, it just stays behind. I'm working in Android 8+, but I don't think it's the issue and I'm out of ideas how to coordinate that situation. Has anyone experienced it?
Thanks for any comment, especially of why it's happening since I cannot understand it.
I found the answer based on this line:
android:fitsSystemWindows="true"
I needed to add it to the root element more or less like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
And here is a description of the property:
System windows are the parts of the screen where the system is drawing
either non-interactive (in the case of the status bar) or interactive
(in the case of the navigation bar) content.
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
I found it here:
Why would I want to fitsSystemWindows?
I can't get the anchor to work. it doesn't follow the app bar being scrolled to the top.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="#color/testGray">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_info"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="140dp"
android:elevation="11dp"
android:layout_gravity="center_horizontal"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="center|bottom"
>
</FrameLayout>
<team.semicolon.amizeh.CustomViews.SongsListView
android:id="#+id/songs_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/frame_info"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="60dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
plus, I can't get the minHeight to work, It scrolls all the way to the top.
I want the frame layout to follow the app bar and anchor it but the app bar scrolls but the frame layout doesn't.
the frame_info doesn't follow the appbar when I scroll, as it was
supposed to do. when I scroll SongsListView to the top, the appbar
moves to the top too, but frame_info stays in place
First of all, i don't suggest such a layout. Like i said, make the CoordinatorLayout as the root of the layout.
Also, if you are trying to achieve FrameLayout follow AppbarLayout when scrolling, you'll need to add it inside a NestedScrollView then setting the NestedScrollView:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
To follow AppbarLayout.
Check my answer about where to using above code : appbar_scrolling_view_behavior https://stackoverflow.com/a/35181870/4409113
The elevation on my BottomNavigationView isn't woking, when I start my app all the other UI components get their specific elevation but the BottomNavigationView.
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:elevation="8dp"
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#color/white"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
What can I do?
Note: no color is transparent.
You should use the namespace xmlns:app="http://schemas.android.com/apk/res-auto" and use the app:elevation = "8dp" instead of android:elevation="8dp"
Shadow is drawn downwards (from the bottom of the view), you can see that android:elevation="8dp" is applied if you try to show Snackbar, you won't be able to see it.
If you want to add shadow that will be shown from the top of the BottomNavigationView you need to draw it manually.
How to have a good Toolbar when using the <item name="android:windowTranslucentStatus">true</item> flag ?
I tried to add almost every combinaison of fitSystemWindow to my view hierarchy but none is working !
Here is my layout with the best result :
<?xml version="1.0" encoding="utf-8"?>
<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/activity_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
tools:context="fr.pdegand.fullscreentoolbar.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:title="Test"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<EditText
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<View
android:background="#FF00FF"
android:layout_height="400dp"
android:layout_width="match_parent"/>
<View
android:background="#00FF00"
android:layout_height="400dp"
android:layout_width="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
But it has 2 problems : first, the Coordinator is using the colorPrimaryDark to fill the gap of the status bar and when the view is fully scrolled, the Toolbar doesnt disapear totally at the top of the screen.
The best result would be that the Toolbar itself stretch it's top to fill the gap so that the color behind the status bar would always match the color of the toolbar (my toolbar actually have dynamic coloring in my real app) and when the view is fully scrolled the toolbar should totally disappear at the top. And if possible without code. I know I could add some OnApplyWindowInsetsListener and manually handle the insets but I'm looking for a more generic solution that could be applied to all my screens.
Thank you for the help.