Android snackbar looks to be attached to a nested scrollview - android

I have a weird problem where the Snackbar is being attached to the scroll view, so when a user scrolls the snackbar moves with the scrolling instead of staying position on the bottom of the screen.
I know it's caused by how I've set up my layout but I don't know a solution to either better setup my layout, or stop this behavior.
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
style="?attr/collapsingToolbarLayoutMediumStyle"
android:layout_width="match_parent"
android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
app:layout_collapseMode="pin"
app:title="" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/nav_graph" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
As you can see I'm wrapping the FragmentContainerView inside of a NestedScrollView which works and allows the CollapsingToolbarLayout to work as expected, as well as the child fragments content to scroll as I want.
Each child fragment just implements a basic layout a bit like:
<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"
android:fitsSystemWindows="true">
//... Lots of text views etc etc
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I tried removing the top level NestedScrollView and implementing it at each fragment, but that caused lots of issues with the CollapsingToolbarLayout and the child fragment content overlapping etc.
Is there a more straightforward solution to this?
Thanks for any input

Related

Restore scroll position of RecyclerView inside NestedScrollView after fragment transition despite assigning Id to XML element

I have an application with two fragments A and B.
Fragment A contains a list of items. When selecting one of the items, app navigates to fragment B. I used navigation component for this purpose.
Fragment A's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#color/background_color">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/background_color"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
android:minHeight="62dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:animateLayoutChanges="true"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:descendantFocusability="blocksDescendants"
android:nestedScrollingEnabled="false"
tools:listitem="#layout/item_product_with_add_button" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
After navigating back from fragment B to A, I would like to have exact same scroll position that I left it with. But the RecyclerView has a scroll position of 0 and displays some items at top of list.
According to XML layout, NestedScrollView has Id. I tried many suggested solutions but none of them solve my issue.

How to use Coordinatorlayout with Linearlayout?

<?xml version="1.0" encoding="utf-8"?>
<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=".activities.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Surface"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:title="#string/app_name" />
<androidx.fragment.app.FragmentContainerView
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:menu="#menu/menu_bottom_navigation" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This attribute app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" does not work inside LinearLayout, I tried to put BottomNavigationView outside LinearLayout, and the attribute above worked but I want to put FragmentContainerView above BottomNavigationView and at the same time make the attribute above work. How can I solve the problem?

Update your code like below:
<?xml version="1.0" encoding="utf-8"?>
<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=".activities.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/abl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Surface"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:defaultNavHost="true" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/menu_bottom_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I found a simple trick to solve the problem. Inside FragmentContainerView I'm showing a specific fragment and there is NestedScrollView inside the fragment.
I gave these attributes to the NestedScrollView
android:clipToPadding="false"
android:paddingBottom="Should be the same height of BottomNavigationView"
Now the content inside FragmentContainerView will be top of BottomNavigationView and never will touch BottomNavigationView.
The disadvantages of this way
It will leave extra space in the bottom but mostly
BottomNavigationView will cover it
If you give background color for NestedScrollView, The color will
touch BottomNavigationView
But at least it is working as I want.

Static BottomNavigation inside CoordinatorLayout but not as direct child

I have top level container with CoordinatorLayout and Toolbar that hides when scolling, this container contain fragments.
<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=".ui.screens.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
One of my fragments contain RecycleView and BottomNavigation
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:pp="http://schemas.android.com/tools"
android:id="#+id/cl_content"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView/>
</androidx.core.widget.NestedScrollView>
<BottomNavigation />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem that the BottomNavigation scrolls with the content, when the app start the BottomNavigation almost invisible, and when I scroll down the BottomNavigation became visible and vise versa, I need it to be static without scroll behavior, is there any configuration for that?
I guess the problem because BottomNavigation is not direct child of CoordinatorLayout but is there workaround?
Demo project(ignore slideshow and gallery):
https://github.com/pavelpoley/CoordinatorLayoutQuestion

Remove app:layout_behavior="#string/appbar_scrolling_view_behavior" from your content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/app_bar_main">
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE: After demo project has been updated with a more complex hierarchy provided solution above didn't work as expected.
I did a lot of research and couldn't find any clean solution to have BottomNavigationView inside CoordinatorLayout but not as a direct child.
The only solution was to move BottomNavigationView inside CoordinatorLayout as a child and then change its visibility based on androidx.navigation.NavController destination.
Source code: https://github.com/dautovicharis/CoordinatorLayoutQuestion/commits/master

You can make a couple of changes
Add exitUntilCollapsed flag to the Toolbar
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
Remove the app:layout_behavior from the NestedScrollView, and add it to root ConstraintLayout
By applying those, the layouts will be:
<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=".ui.screens.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And fragment:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:pp="http://schemas.android.com/tools"
android:id="#+id/cl_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView/>
</androidx.core.widget.NestedScrollView>
<BottomNavigation />
</androidx.constraintlayout.widget.ConstraintLayout>

Transparent AppBarLayout Toolbar and placing content behind them

So far I've managed to implement AppBarLayout and Toolbar with scroll flags and AppBar scrolling behavior and it all works great. My final goal is to implement something like this:
Netflix App Example
As you can see AppBar is transparent and the content is behind it. And everything else works perfectly.
From my observations when I put app:layout_behavior="#string/appbar_scrolling_view_behavior" (In my case I used app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior") tag CoordinatorLayout does not let me overlap Views (In this case AppBar should overlap my content).
This is my XML:
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawerLayout"
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:fitsSystemWindows="true">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<fragment
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="#navigation/root_nav_graph"
app:defaultNavHost="true"
/>
</FrameLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$Behavior"
>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The fragment holds layout with NestedScrollView as a Root.

Remove the attribute
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
from the Frame Layout. Also, set the attribute android:background="#android:color/transparent" to your toolbar.

RecyclerView last item is cut off onResume of fragment

Problem
RecyclerView functions properly and no view is cut when not opening a detailFragment. But it cuts off the last item of my RecylerView item whenever I return back from the detailFragment launched by the recylcerview item.
I only encounter this on my emulator which api 26. When I run it in my api 28 phone it works properly. But I think I might be missing something.
fragment_main
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:fitsSystemWindows="true"
android:background="#color/colorWhite">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/fragment_main_abl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="#color/colorWhite"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/fragment_main_ctbl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#android:color/white"
app:expandedTitleTextAppearance="#color/colorPrimaryText"
android:fitsSystemWindows="true">
<include layout="#layout/header_fragment_main"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/fragment_main_tb"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/fragment_main_tl"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_main_tl_height"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/colorUnselected"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/fragment_main_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
fragment_child
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/fragment_child_rv"
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
NOTE
I wish not to put bottom padding for my recyclerView. I have tried
this and it works but during the times that my recyclerView functions
properly an excess padding is seen at the bottom
I wish not to make use of nestedScrollView for my recyclerView if possible since I would like the recyclerView to recycle as much as possible

Replacing
app:layout_scrollFlags="scroll|exitUntilCollapsed"
with
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
solved my issue.

Categories

Resources