EDIT 2; This part of the code was OK. Check my answer for this, you might have a similar issue and I hope this solves your issue.
I've been checking a lot of posts with similar issues; they got me close, but I'm not able to make it right. I have a MainActivity, that hosts a Fragment loaded in the FrameLayout (id: fragment_container).
I want to hide the Toolbar when scrolling, but this only happens when I scroll the NavigationDrawer. When I scroll the RecyclerView, the Toolbar doesn't hide.
The Fragment contains a ViewPager, and each ViewPagerFragment has a RecyclerView.
I tried a lot of alternatives and this is the one that is closest to what I intend.
What I want to do:
hide toolbar when scrolling recycler view
What's going on right now:
http://gifmaker.cc/PlayGIFAnimation.php?folder=2016080211dGOklkBglH6HPrbVKq2rLE&file=output_lp5KmP.gif
My current main_activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.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:elevation="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways">
<Button
android:id="#+id/login_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_account_circle_white_24dp" />
<Button
android:id="#+id/favourites_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/favourite_button" />
<Button
android:id="#+id/bookmarked_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/bookmarked_button" />
<Button
android:id="#+id/history_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_history_white_24dp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
app:menu="#menu/menu" />
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/favourite_button"
app:fabSize="mini"
app:layout_anchor="#id/fragment_container"
app:layout_anchorGravity="bottom|right|end" />
EDIT; for some reason the CoordinatorLayout is not being displayed in the code I just posted. Everything is surrounded with a CoordinatorLayout!
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
Previous Code goes here.
</android.support.design.widget.CoordinatorLayout>
My issue was inside the Fragment. I had this line that was killing the effect:
recyclerView.setNestedScrollingEnabled(false);
I removed it and now it works great. I've been dealing with this for so long, wish I got it earlier. Hope this helps someone out there.
Related
When I switch from any fragment back to Shopping List with the bottom app bar, it gets pushed down off the screen and I don't know why. Switching between the Fridge Fragment and Pantry Fragment works great, but switching from either of those back to the Shopping List Fragment pushes the bar off the screen, as shown here:
Github repository with full code
Try with these changes for FrameLayout and I guess you won't need fragment_navigation.xml after that.
activity_main.xml:
<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">
<FrameLayout
android:id="#+id/relative_layout_for_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:backgroundTint="#color/colorPrimary"
app:hideOnScroll="true"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/ic_menu_white_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_shopping_cart_white_24dp"
app:fabSize="normal"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You also said that it happens when you switch to ShoppingListFragment which has another CoordinatorLayout in there.
You simply change fragment_shopping_list.xml codes as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shopping_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="141dp"
android:text="TextView" />
</RelativeLayout>
Or just don't use CoordinatorLayout in there then try.
I have an app with the one Activity, many Fragments model, where several Fragments have a RecyclerView to show cards with content. I also have implemented the BottomAppBar from Material Design 2.0, and everything is fine except when the AppBar blocks the last CardView in the RecyclerView.
In terms of layout, I have a RecyclerView inside ConstraintLayout inside a Fragment, which sits in a FrameLayout in the main activity.
The documentation shows that for the BottomAppBar to be hidden on Scroll, we need to implement RecyclerView inside a NestedScrollView. There is one question here on SO where the answer has stated the same as well, but there seems to be no actual documentation or examples to demonstrate how this is to be done, except for this article on Medium, which uses the NestedScrollView in an Activity directly, holding a CoordinatorLayout which holds a ConstraintLayout.
Note: I think it also works on magic, because duplicating the layout in my fragment doesn't have any effect at all in my app.
How do I use NestedScrollView here?
PS : I need to have the TextView, as I set the RecyclerView to VISIBILITY.GONE and set the TextView to VISIBLE when I have no data to display.
Fragment Layout
<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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="in.domain.APPNAME.Fragments.FragmentList">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewIncident"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="30dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/emptyView"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="No Incidents to display"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Activity 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:id="#+id/uberLayout"
tools:context=".APPNAME">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.bottomappbar.BottomAppBar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar"
tools:layout_editor_absoluteX="160dp"
tools:layout_editor_absoluteY="465dp" />
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>
you shouldn't put the BottomAppBar and the FloatingActionButton in a separate CoordinatorLayout. Ditch the CoordinatorLayout they're in, the ConstraintLayout around your FrameLayout and that may already solve the problem.
<?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:id="#+id/uberLayout"
tools:context=".APPNAME">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar" />
</android.support.design.widget.CoordinatorLayout>
I'm using a similar layout, the only difference being a <fragment> instead of a <FrameLayout>, and the BottomAppBar hides on scroll just fine. We don't need to use a NestedScrollView, if our scrolling content is a RecyclerView anyway, because RecyclerView implements NestedScrollingChild.
This interface should be implemented by View subclasses that wish to support dispatching nested scrolling operations to a cooperating parent ViewGroup.
I am currently working with BottomNavigationView and FloatingActionButton.
What i want to achieve is this below design:
And what i have tried:
<?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"
app:layout_insetEdge="bottom"
tools:context=".activity.BottomNavPrimary">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
Your design looks as if you want to use the new BottomAppBar from the MaterialComponents that will fully be release with Android P. Especially if the left icon stands for a kind of side navigation it could be the right navigation element.
However, you have to be aware, that the elements on the left and right of the FAB have a different purpose than a bottom navigation. Instead of being entry points to "primary destinations" in an app, the BottomAppBar is defined as:
A bottom app bar displays navigation and key actions at the bottom of mobile screens.
So it is for page actions (like opening the dashboard or search). More explanation can be found in the design documentation.
I haven't had a chance to implement it yet (because I really needed it with a bottom navigation), but here is the code documentation example:
<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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
So to me, it sounds as if you define your two page menu options and since the FAB is anchored to the bar it will push them to the sides.
The documentation also includes options for the optional FAB cradle that was shown during this year's Google I/O and shows how to handle menu and click handling.
Here is another useful link on how to set up gradle to include the new material components in your project.
I used this, to get something similar.
BottomNavigationView + FloatingActionButton
<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
style="#style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorPrimaryLight"
app:elevation="#dimen/padding_10"
app:layout_constraintBottom_toTopOf="#id/navigation"
app:layout_constraintLeft_toRightOf="#id/navigation"
app:layout_constraintRight_toLeftOf="#id/navigation"
app:layout_constraintTop_toBottomOf="#id/navigation"
app:layout_constraintTop_toTopOf="#id/navigation"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_add_black_24dp"
app:tint="#color/colorPrimary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="#drawable/bottom_navigation_icons"
app:itemTextColor="#drawable/bottom_navigation_icons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
My solution simple and cool.
Parent layout must be a CoordinatorLayout and use BottomAppBar with FloatingActionButton as you can see 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<-- your other views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/homePage"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable"
android:padding="#dimen/small_margin"
app:tint="#color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:padding="#dimen/small_margin"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_drawable"
app:backgroundTint="#color/colorPrimary"
app:layout_anchor="#id/navigation"
app:tint="#android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Result:
You could wrap your BottomNavigationView and your FloatingActionButton in a ConstraintLayout and use the following constraints on the FloatingActionButton:
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"
This will center your FloatingActionButton vertically and horizontally relative to your BottomnavigationView
I hope that is what you asked for.
Final code would look something like this:
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toTopOf="parent"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary" />
</android.support.constraint.ConstraintLayout>
I think you can do this with bottomAppBar and embed some button inside that like below
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:fabCradleDiameter="8dp"
style="#style/Widget.MaterialComponents.BottomAppBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btnReport"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_play"
android:layout_weight="1"
android:paddingRight="20dp"
/>
<ImageButton
android:id="#+id/btnPlayWords"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_show_chart"
android:layout_weight="1"
android:paddingLeft="20dp"
/>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabAddWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
New to android programming & struggling with right now. I'm using android studio's default "Navigation Drawer Activity". On top of that, I've added a Bottom Bar from https://github.com/roughike/BottomBar. But, after adding that my FAB has hidden behind the Bottom Bar.
Here is the Scrrenshot -
I know it's some kind of style issue. I tried to give bottomMargin for FAB. But, it's not working.
Here is my code -
app_bar_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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bhramaan.android.bhramaan.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/BhramaanTheme.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/BhramaanTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_gravity="bottom|end"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_behavior="shy"
android:background="#color/bottomBar"
app:bb_activeTabColor="#color/white"
app:bb_tabXmlResource="#xml/bottombar_tabs" />
</android.support.design.widget.CoordinatorLayout>
Need Some Guidance to solve this.
Add app:elevation="#dimen/text_margin" like this:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"
app:elevation="#dimen/text_margin" /><!--adding this line should resolve your problem-->
Here is a solution that works for our use case. Basically we wanted to hide bottom navigation view and the fab that belongs to it whenever the user scrolls in the screen.
For that purpose we have decided to use the app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" that comes out of the box for BottomNavigationView. All that is left is to anchor the fab to the BottomNavigationView and use the same layout_behavior on fab, too.
Here is an example of it:
<?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">
<include layout="#layout/inc_app_bar"/>
<fragment
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/main_nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/bottom_nav_graph"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/Theme.BottomNavigationView"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/main_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/main_bottom_nav_view"
app:layout_anchorGravity="top|end"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginEnd="#dimen/fab_margin_end"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:srcCompat="#drawable/ic_add_24px"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Other than that you can define your own layout_behavior for fab as explained in GitHub: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md too.
I hope that it helps :)
In advance I let other know this solution fits to my needs. I don't need fancy animations(which is ok, but not for my project requirements). What I did is to wrap the main content(FrameLayout), the FAB and the BottomNavigationView inside a RelativeLayout. Again, I think this could be done in a better way, so i'm open to suggestions.
<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.support.design.widget.AppBarLayout
android:id="#+id/admin_appbar_layout"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
tools:elevation="4dp">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/admin_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/customActionBar"
app:theme="#style/customActionBar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/H2_bold"
android:text="#string/activity_admin_name"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation_bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_new_item"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_action_new"
android:layout_alignParentEnd="true"
android:layout_above="#+id/bottom_navigation_bar"
android:layout_margin="#dimen/fab_dimen"
tools:elevation="2dp"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/black"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/admin_bottom_navigation_items"
tools:elevation="2dp"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I know the question may seems old, but hope this helps to someone else.
Its just margin issue. Just try to implement this code in your coordinatorLayout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="?attr/actionBarSize">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_plus" />
</FrameLayout>
And use this style in your style.xml file.
<style name="floating_action_button">
<item name="android:layout_marginBottom">16dp</item>
</style>
We're just doubling the margin. First BottomNavigationView, and Second the default margin of FAB.
Change your xml as this. Add some more properties to your Floating Action Button.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#android:drawable/ic_dialog_email" />
I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down. Toolbar should stay on its place without any scrolling.
My layout is like that:
<?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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.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" />
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.
If I put content area below Toolbar nothing scrolls...
If I put content area above Toolbar I am able to get the desired
effect, but obviously it's in the wrong position.
Of course it is in the wrong position since: http://www.google.com/design/spec/layout/structure.html#structure-app-bar
The app bar, formerly known as the action bar in Android, is a special
kind of toolbar that’s used for branding, navigation, search, and
actions.
So, you need to add a CollapsingToolbarLayout and the contents on it.
And:
I'd like to have a content area below my Toolbar. Its behavior should
be to scroll while scrolling up and to enter immediately while
scrolling down, Toolbar should stay on its place without any
scrolling.
To not to scrolling the Toolbar after adding that CollapsingToolbarLayout, you may want to add app:layout_collapseMode="pin" to that Toolbar.
Update:
Since my original suggestion did not work, another method to achieve the desired outcome would be to break out the Toolbar from the CoordinatorLayout. You can structure your layout XML as follows:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
If it's still not working, you should consider not using the include statement as this might be the source of the issues. Rather, bring in the layout definition directly into this layout and place under a NestedScrollView (apply app:layout_behavior="#string/appbar_scrolling_view_behavior" to this NestedScrollView). If you need additional help, post the contents of your content_main layout XML in your OP.
Original Response:
Make sure you define the app:layout_behavior for your main content, which defines that the scrolling of the main content should affect the AppBarLayout. Specifically, try this:
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />