I have bottom navigation bar and viewpager inside coordinator layout, every fragment inside viewpager has own collapsing toolbars,
but app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" doesn't work for me.
Also I don't want to do bottomNav.setVisibility(View.GONE); by listening the my nested scrollviews (inside fragments), because it hasn't animation. this is my last option.
My Activity
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".market.MarketActivity">
<com.example.x.custom.NonSwipeableViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="labeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:layout_insetEdge="bottom"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:itemTextColor="#drawable/bottom_navigation_selector"
app:menu="#menu/bottom_navigation_menu"
android:theme="#style/Widget.BottomNavigationView"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
One of the fragments (In the content view there is an nested scrollview. I set its layout 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=".testproject.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_height="140dp"
android:minHeight="56dp"
app:elevation="0dp"
android:layout_width="match_parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:expandedTitleGravity="bottom|left"
app:expandedTitleMarginStart="14dp"
app:expandedTitleMarginBottom="60dp"
app:collapsedTitleTextAppearance="#style/CollapsingToolbarTextStyleBlack"
app:expandedTitleTextAppearance="#style/CollapsingToolbarTextStyleBlack"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:titleMarginStart="0dp"
android:gravity="top"
android:layout_marginBottom="48dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorFullWidth="false"
app:tabTextColor="#color/warm_grey"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/lipstick"
android:layout_gravity="bottom"
app:tabTextAppearance="#style/TabLayoutTextStyle"
android:paddingRight="6dp"
android:paddingLeft="6dp"
>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/main_market">
</com.google.android.material.tabs.TabItem>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/high_yield"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/perpetuals"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/special_situations"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_market"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Those links didn't work
Hide/Show bottomNavigationView on Scroll
Show/hide BottomNavigationView on scroll in CoordinatorLayout with AppBarLayout
When scroll bottom navigation bar does not hide - BottomNavigationBehavior
BottomNavigationView does not hide on scrolling inside fragment, if fragment contains AppBarLayout
it's too altho the
BottomNavigationView
is in the Activity so it's will work only if you are scrolling in the Activity.
you can do something like this https://stackoverflow.com/a/44778453/7373745
Related
My appBar has one CollapsingToolbarLayout, in the CollapsingToolbarLayout there is a constrainLayout. ConstrainLayout height is 200dp and it contains one tablayout in bottom. In the first place of opeing fragment I can collapse the toolbar by dragging the constrain layout but after switching to the second tab I can't drag the constrain layout to collapse the toolbar.
After removing the viewPager adapter and tool bar code in java there is no issue now the viewpager is blank but I can collapse the tool bar by dragging the constrainLayout. Second thing I'm using ScrollView in viewpager Fragment after that I'm able to collapse the toolbar by dragging in the viewPager. Is there any solution to collapse the toolbar by dragging the view pager without scroll view in the Viewpager fragment?
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Fragments.Profile">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.Material3.CollapsingToolbar"
android:background="#color/original">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="54dp"
app:layout_collapseMode="parallax" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/searchTabLayout"
android:layout_width="match_parent"
android:layout_height="54dp"
android:background="#00FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:tabGravity="fill"
app:tabIndicator="#drawable/tab_round_line"
app:tabIndicatorAnimationDuration="450"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="#033600"
app:tabIndicatorFullWidth="false"
app:tabIndicatorHeight="2.5dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabRippleColor="#color/clickRipple"
app:tabSelectedTextColor="#color/nameColor"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabUnboundedRipple="true">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab3" />
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/profileViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I use a CollapsingToolbarLayout and a BottomAppBar reacting to scroll changes in a CoordinatorLayout (collapsing and hiding on scroll). As I can't use a NestedScrollview as parent of the RecyclerView because it leads to issues when I need to use scrollToPosition() or when an item is dragged out of the bounds (It doesn't scroll to move the item), the scroll behaviors are not working for the CollapsingToolbarLayout and the BottomAppBar.
I tried android:nestedScrollingEnabled="true" but it was not working
How can I keep the scroll-related behaviors in the CoordinatorLayout without NestedScrollview ?
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/Theme.Todolist.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.ActionBar"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.Todolist.PopupOverlay"
app:title="Mes tâches"
app:titleTextColor="#color/iconTint"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false"
android:paddingBottom="32dp"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:hideOnScroll="true"
app:menu="#menu/bottom_app_bar"
app:navigationIcon="#drawable/ic_menu_black_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/add_task_text"
app:backgroundTint="#color/floatingAddButton"
app:layout_anchor="#+id/bottomAppBar"
app:layout_anchorGravity="top|center"
app:maxImageSize="50dp"
app:srcCompat="#drawable/ic_add_black_48dp"
app:tint="#color/addIconTint" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Use android:nestedScrollingEnabled="true"
I have the following main layout and a recyclerview in my fragment. The problem i am facing is that the bottom navigation view is hidden by default and appears only when i scroll down the navigation view appears.
Before scrolling down
After scrolling down the bottomnavigationview appears
Another issue i am facing is that after scrolling down and changing the fragment the toolbar disappears
content_home.xml
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.HomeActivity"
tools:showIn="#layout/activity_home">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/nav_item_foreground"
app:itemTextColor="#drawable/nav_item_foreground"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/navigation" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/navigation" />
</RelativeLayout>
This is the main activity layout
activity_home.xml
<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"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBar"
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_home" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
There is an issue in your content_home.xmlYou are using app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" in BottomNavigationView.
That's why it is happing.
Remove hide_bottom_view_on_scroll_behaviorfrom app:layout_behavior.
I have a recycler view in viewpager but the last row of recycler view is not fully visible (ie partially visible) as the Bottom navigation view is overlapping the viewpager. How can I fix this issue?
activity_main.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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.booksummary.booksummaryvideos.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#fff"
android:elevation="4dp"
android:gravity="start"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
android:elevation="16dp"
app:itemIconTint="#drawable/selector"
app:itemTextColor="#drawable/selector"
app:menu="#menu/navigation" />
<!--android:background="?android:attr/windowBackground"-->
</android.support.design.widget.CoordinatorLayout>
The problem is that the BottomNavigationViewis in fact overlapping yourViewPager...
You can either change your layout so that the ViewPager ends above the BottomNavigationView
or
You need to set bottom padding to the size of the BottomNavigationView on the RecyclerView and also (to ensure the padding is after the last item) clipToPadding="false"
Trying to use the new support design library. In my layout I want the ToolBar to stay at the top of the screen, but have the TabLayout go off the screen when the user scrolls down. But it looks like the ViewPager goes underneath the AppBarLayout. I used this blog post for reference
https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
This is the layout, within the ViewPager holds Fragments that consist of recycler views
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/material_grey50"
android:clickable="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabLayout" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_list"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar_list"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:elevation="3dp"
android:src="#drawable/ic_videocam_white_36dp"
app:backgroundTint="#color/accent"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
Don't forget to set this in the viewpager:
app:layout_behavior="#string/appbar_scrolling_view_behavior"