im having an issue with layout. I am trying to get the constraint layout to be placed underneath the toolbar. However, it decides it wants to overlap the toolbar. I have tried using app:layout_behavior="#string/appbar_scrolling_view_behavior" with no luck.
The toolbar is creating in another xml file and called in using include.
Activity below
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:fitsSystemWindows="true"
tools:context="XXXXXX"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/test1234"
layout="#layout/app_bar_home"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/test1234">
**Bunch of constraints here etc**
**Bunch of buttons here**
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.DrawerLayout>
Here is an image of what it looks like
What it should look like
Edit
It is fine when shown in the design view of the android studio. However when opened on a phone or emulator it is still broken.
App still looks like the second image when emulated.
With the fixes below
I faced the same issue then i cracked it with this.
in your constraint layout, write this
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior
You're implying this attribute to the parent tag. You must add this to the ConstraintLayout or the main content of the drawer layout.
Related
I am creating a single activity application using jetpack navigation. Everything is working as expected. I have a requirement to make some fragments full screen.
Here is my layout xml.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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_drawer"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorSurface"
tools:context=".features.HomeActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/main_nav_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/main_navigation" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/main_header"
app:itemShapeInsetStart="0dp" />
</androidx.drawerlayout.widget.DrawerLayout>
As you can see I have used the android:fitsSystemWindows attribute in FragmentContainerView.
But this is not working as expected and after inspecting the layout using Layout Inspector I am seeing duplicate FragmentContainerView in the view hierarchy.
Here is a screen shot of the view hierarchy.
The problem this creates is that the first FragmentContainerView has the fitsSystemWindows attribute set to true but the second FragmentContainerView doesn't have that attribute set. I also tried the Advanced Navigation Sample and inspected the view and it also has the duplicate FragmentContainerView.
Can anyone please explain this to me? Thanks in advance.
Hello evreyone,
I get this error from my Layout XML: Multiple root error. So I tried a lot to fix it yet could not find any solution, please help me about it:
this is my code from file layout xml:
thanks a lot :)
You can have only one element in your XML that doesn't have a parent. By sparse information you gave us, you have at least two root elements: <RelativeLayout> and <android.support.v4.widget.DrawerLayout >.
To fix this error you just need to move </RelativeLayout> (closing tag) after DrawerLayout, that is to the end of the document. Or, probably better, move <android.support.v4.widget.DrawerLayout > to the beginning, enclosing other layouts.
However even if you do fix error you're getting this is not good implementation. You should read more about DrawerLayout.
you are getting Multiple root error in Layout because of
in Android every xml file there must be only one root layout
so try to add single parent to your layout
sample code
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- add here your other controlls or layouts-->
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_home_class"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view_home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home_class"
app:itemBackground="#android:color/transparent"
app:itemIconTint="#color/drawer_item"
app:itemTextColor="#color/drawer_item"
app:menu="#menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
I have a custom View within the NavigationView. The problem is no matter in what combination, fitsSystemWindows is not working within the NavigationView. and the top item in the drawer always stays behind the transcludent statusbar.
main_layout
<?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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryBottomBar"
android:fitsSystemWindows="true">
<include layout="#layout/navigation_main_drawer" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
navigation_main_drawer
<?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">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/default_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
So, if I've understood correctly, you want your custom view to get the necessary padding so that its contents are not clipped by the status bar right?
If that's the case then you need to set
android:fitsSystemWindows="true"
in your root DrawerLayout, and then set
android:fitsSystemWindows="false"
in your NavigationView component. Note that's false, not true :)
REASONING:
The new NavigationView component designed by Google uses the 'fitsSystemWindows' property to customize how its content relates to the status bar. Note that "customize" here is the key word, because the hardcoded behaviour for this particular component is that its contents should overlap the status bar and reach the top of the screen, while the status bar itself should be transparent to allow the drawer's content to be seen through it. This is specified as part of the new Material Design, as can be seen in https://material.io/guidelines/patterns/navigation-drawer.html.
So, the only way to disable this behaviour is to tell the NavigationView to not signal the fitsSystemWindow property, and only set this in the root DrawerLayout that contains all other views, which will do what you would expect and pad all its children views appropriately.
Note that this reasoning is confirmed also by this comment from Android developer Ian Lake in a blog post talking about this specific property.
P.S.
I would also remove all mentions to the 'fitsSystemWindows' property in all the child elements in your navigation_main_drawer XML, just in case, although it probably does have no effect whatsoever as it is..
I've been dealing with this DrawerLayout and NavigationViews and I don't seem to ba able to solve this issue. According to google guidelines the first navbar should cover the app bar and the second one should NOT.
How I achieve that? Whatever I do it either makes both of them cover or both of them not cover the app bar.
Since navigation view is pretty new I could not get any suitable answer googling and exploring overflow.com. Any guide, help, tutorial, sample... is highly appreciated.
Thanks before.
Here is my activity.xml
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<LinearLayout
android:orientation="vertical"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include
android:id="#+id/app_bar"
layout="#layout/app_bar">
</include>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer"/>
<android.support.design.widget.NavigationView
android:id="#+id/second_nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
/>
</android.support.v4.widget.DrawerLayout>
I don't know about NavigationView, but with other views a simple margin used to work. Try:
android:layout_marginTop="?attr/actionBarSize"
Got a weird problem. Contents of the fragment getting hidden under the action bar. Its a pretty basic drawer layout and a fragment.
New to android and don't know if this is how it is.
I used margin just to pull this down, as you can see below. But this doesn't sound correct to me... please throw some light where am I going wrong. Thanks in Advance.
It is the normal and expected behaviour if you set FEATURE_ACTION_BAR_OVERLAY (android:windowActionBarOverlay) . Here the documentation
Add an attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to your parent view of your fragment.
Another possible solution for many who see this question is to change the parent layout of the toolbar to LinearLayout (likely with a vertical orientation), as this type of layout does not allow its children to overlap.
For example, this layout in activity_main.xml will result in the fragment being below the toolbar, rather than behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"/>
</FrameLayout>
</LinearLayout>
Setting top margin of the fragment's layout to height of AcionBar worked, at last!!
android:layout_marginTop="?attr/actionBarSize"
Don't know if this is a better solution but for me this is the only working solution.