I have an AppBarLayout nested inside of a CoordinatorLayout
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.michael.blemanager.Activities.ColorPickerActivity.Color1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_color1"/>
</android.support.design.widget.CoordinatorLayout>
Here is the included layout content_color1
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.michael.blemanager.Activities.ColorPickerActivity.Color1"
tools:showIn="#layout/activity_color1">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/default_background"
>
/....
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Now for some reason the AppBarLayout overlaps the ConstraintLayout
See where the tool bar overlaps the color circle? How do I prevent the overlap?
Wrap your include tag inside a FrameLayout using layout_behavior of appbar_scrolling_view_behavior like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_color1"/>
</FrameLayout>
Change CoordinatorLayout to ConstraintLayout.
I had the same problem and that worked for me.
Related
I have a main activity that I use for all my activities which has this layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
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="wrap_content">
<android.support.v7.widget.Toolbar
style="#style/ToolBar"
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
And inside of one of my fragments I have this layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/tabs_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/TabLayout"
app:tabIndicatorHeight="0dp"/>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Is it possible I can disable the Scrolling View Behavior for the #+id/tabs_app_bar_layout only? Basically I have two AppBarLayouts, one for the Toolbar and one for bottom navigation tabs. I want the scrolling view behavior to only affect the Toolbar.
What is the best way I can disable the scrolling behavior for only certain child views?
I've tried to clone the Google Playstore UI.
So, I've a NavigationView, CoordinatorLayout -> AppBarLayout -> Toolbar, TabLayout, ViewPager. A tab has a layout where there are n horizontal RecyclerViews within 1 vertical RecyclerView.
My questions:
Toolbar gets hidden on scrolling up iff the areas of the vertical list where the horizontal list items aren't visible (the gray background in the screenshot attached) are touched to scroll. If I am scrolling up by touching the inner list the scrolling takes place but the toolbar doesn't hide.
How do I hide the tab header as well on scroll up.
My layout files:
activity_navigation_drawer.xml:
Main activity layout
<?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"
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/layout_main_content_nav_drawer"
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/header_navigation_drawer"
app:menu="#menu/menu_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
layout_main_content_nav_drawer.xml:
included in the above layout
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.aishwarya.materialdesign1.NavigationDrawerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/layout_content_nav_drawer"/>
</android.support.design.widget.CoordinatorLayout>
layout_content_nav_drawer.xml:
included in the above layout
<?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:id="#+id/content_navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.aishwarya.materialdesign1.NavigationDrawerActivity"
tools:showIn="#layout/layout_main_content_nav_drawer">
<FrameLayout
android:id="#+id/fl_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
fragment_home_screen.xml:
fragment that contains the TabLayout & ViewPager. I open this from my main activity to display the content.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tl_sliding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/color_primary"
app:tabTextColor="#android:color/black"
app:tabIndicatorColor="#color/color_primary"
app:tabIndicatorHeight="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
I have a custom view that scrolls vertically using a ScrollView but when I put it inside of an android.support.v7.widget.Toolbar it will no longer scroll. The same thing happens if I use a NestedScrollView too. Is it possible to use a ScrollView inside of a Toolbar? If not, then are there alternative approaches to achieve the same thing?
Here's some example code of what I'm doing:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<com.me.NormallyScrollableView
android:id="#+id/myView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
In short, not with the AppBarLayout. You have to remove that in order to get the desired scroll inside of the toolbar.
your view hierarchy should be something like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<com.me.NormallyScrollableView
android:id="#+id/myView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
<!-- Have to create Margin, since AppBarLayout is not first view in Coordinator layout (which it expects) -->
<FrameLayout
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_width="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
But at this point, CoordinatorLayout is useless for this screen in your app...
So to some up, its not possible with the view hierarchy you have setup.
Good Luck and Happy Coding!
I think it's not possible to do that but I suggest to use this
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:padding="#dimen/activity_horizontal_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
I have weird problem of colliding
My main xml
<?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"
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">
<include
layout="#layout/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="250dp"
android:background="#DDDDDD"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
My content.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".main.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Adding android:layout_marginTop="?attr/actionBarSize" this to all fragment layouts solves the problem but why? I think it is because of include technique that is used in main layout but since toolbar is always there and framelayout is another widget, but it starts calculationg from top of app bar.
Because you are using a CoordinatorLayout as parent of your Fragment layout.
You haven't any explicit behavior defined there so it will use his default behavior, that's why the Fragment layout is "under" your AppBarLayout.
A simple way to solve this is to add the layout_behavior attribute to fragment_container:
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
Hello so I want to achieve this with the toolbar and I have seen many tutorials which explain how to do it with all the layout in one XML file.
However, I do not know how to solve this problem in the following use case
I have an XML file which defines my toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="wrap_content"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/app_bar_top_padding"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then I include this toolbar in an activity layout (linear layout root) which contains a frame layout as a container for a fragment
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
Now this fragment is inflated dynamically and the fragment is a recycler view.
Can someone point me into how I link CoordinatorLayout with this common arrangement?
Thanks !
EDIT Have solved this issue but let me know if there is a mistake
My Activity Layout
<?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/drawer_layout"
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
My Toolbar layout which has the scroll flags
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle">
</android.support.v7.widget.Toolbar>
That shouldn't be a problem as long as the Toolbar is added to a CoordinatorLayout, wrapped in an AppBarLayout. If you've tried it and still have problems, show the code you've tried and we can work through that.