I have CollapsingToolbarLayout which depends on scrolling of RecyclerView in Fragment in ViewPager. The problem is that ViewPager is too high and out of bounds of CoordinatorLayout, independently whether it has "match_parent" or "wrap_content" layout_height. Thus ViewPager scrolls even if RecyclerView has only few items.
And other problem is that I can not make static elements in fragments in ViewPager. I want make FAB floating over the RecyclerView, but the FAB is located under the bottom bound of the screen until I will scroll it up.
Here some code
Main Layout:
<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:fitsSystemWindows="true"
android:background="#android:color/white">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="122dp"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbar"
app:expandedTitleMarginStart="56dp"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:id="#+id/tabLayout"
android:background="#color/default_green"
app:tabIndicatorColor="#color/white"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Fragment:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/recyclerView"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/bookMark"
android:fitsSystemWindows="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_shape3x"
android:layout_gravity="end|bottom"
app:fabSize="normal"
app:backgroundTint="#color/default_green"
android:layout_margin="16dp"
app:elevation="4sp"
app:borderWidth="0dp"
android:contentDescription=""/>
</android.support.design.widget.CoordinatorLayout>
I managed to solve this proplem in such way. First of all I blocked AppBarLayout from scrolling like explained here.
And then I placed FAB directly to the CoordinatorLayout and lincked it's hidding to the ViewPager scrolls like here.
Also I wanted an EditText floating over the one of the fragments, which are inside ViewPager. I placed it inside CoordinatorLayout and made it sliding up and down, when ViewPager scrolls.
Related
I am trying to implement pull to refresh but I'm having an issue with SwipeRefreshLayout not wrapping the child view's height. In the view preview and in a live build it appears to have 0 height.
The layout as as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/child_layout" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
I have also tried making the SwipeRefreshLayout the parent of the AppBarLayout without any success as well as putting a singular LinearLayout inside of the SwipeRefreshLayout. The only thing that seems to prevent the height of the swipe layout from being 0 is to set it statically but I want it to be dynamic based upon the height of the child view.
Is there something I'm missing here? It seems like there may be a bug with SwipeRefreshLayout because replacing it with a LinearLayout that also wraps the content works as expected.
The problem is your SwipeRefreshLayout is inside the Toolbar and AppBarLayout. You must wrap AppBarLayout with another layout and put SwipeRefreshLayout below the AppBarLayout. An example is at the below.
<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"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
tools:context="com.vsahin.moneycim.View.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:fitsSystemWindows="true"
app:expanded="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:background="#drawable/gradient_background">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
if your SwipeRefreshLayout height is wrapping the content of your child_layout, then your child_layoutheight should be set to match_parent OR both SwipeRefreshLayout and child_layout height should be set to match_parent as shown in the Android Documentation
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Child View-->
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
SwipeRefreshLayout is a transparent View, so best solution to set it match_parent it will not conflict with other Views and don't include View or Layout within it, keep it clean
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<include layout="#layout/child_layout" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
SwipeRefreshLayout has to be in top to overlay other layers and be clickable
I'm trying to create an activity with an CoordinatorLayout, Viewpager and in there a normal view with a FAB. The layout I'm trying to create is:
- CoordinatorLayout
- ViewPager
- View with FAB
- View
- etc
So in my case I need to include the FAB in the view inside the ViewPager.
My problem is right now (in a simplified application):
https://gfycat.com/VacantAdmiredBedlingtonterrier
The problem in the GIF is that the FAB moves out of the screen. It moves exactly the height of the toolbar.
What I want is that the FAB would stay put at its position but inside the viewpager and in the view.
The XML of this view is:
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text" />
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
As shown in the XML is that the FAB is not in the scrollview but is inside the FrameLayout, which would represent a ViewPager.
Is there any way to make this FAB stay put at it's position but keeping the view inside a viewpager?
I have an outer CoordinatorLayout that has, as AppBar, the Toolbar and a TabLayout bar and, as content, a ViewPager with appbar_scrolling_view_behavior:
<android.support.design.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"
tools:context=".MainActivity" >
<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"
app:layout_scrollFlags="scroll|enterAlways|snap">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout android:id="#+id/tabs"
android:layout_width="match_parent" android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager android:id="#+id/container"
android:layout_width="match_parent" android:layout_height="match_parent"
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="end|bottom" android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
When a tab is selected, the ViewPager is updated with a FrameLayout containing another CoordinatorLayout.
This one should display a collapsable Google Map fragment on top of a RecyclerView (showing a vertical list of items).
<FrameLayout 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.support.design.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/nearby_content"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity" >
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<fragment
android:id="#+id/mapFragment"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_overlapTop="184dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
The expected behavior is that when the user touches inside the map, the map itself should receive the gesture and therefore pan the view.
While if the user scrolls upwards starting the gesture from inside the visible part of the list, the list (RecyclerView) should slide over the collapsing Map, until the AppBar is reached. At that point further scrolling up should slide only the list.
The problem arises when the gesture is not too much slow: part of the scrolling (roughly the equivalent of the TabLayout height) is consumed by the RecyclerView before it reaches the AppBar.
Also, after scrolling all the way up the list, scrolling down first expands the map and then slides the list (leaving the first part of the list hidden), when it should do the viceversa.
Before scrolling up
After scrolling all the way up and down a bit
I'm not very sure about the answer but you can try adding android:nestedScrollingEnabled="false" inside your recycler view:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_overlapTop="184dp"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Hope it helps.
As the title suggests, I have an activity that has a FrameLayout that houses my Fragments [I am NOT using a Tabs, just Transactions]. I also have a NavigationDrawer and Toolbar. All of these things work fine.
The issue is that I'm trying to add a CollapsingToolbarLayout to the Activity layout and have RecyclerView in the Fragment scroll and control the collapsing of the CollapsingToolbarLayout.
With the setup shown below, I'm able to use the NavigationDrawer, see the Toolbar and the expanded CollapsingToolbarLayout with NO image inside (odd issue there). I load the Fragment into the FrameLayout which contains a RecyclerView with 10 test views. This scrolls fine below the CollapsingToolbar but it does not collapse.
Activity Layout XML
<android.support.v4.widget.DrawerLayout
android:id="#+id/dl_drawer_layout"
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.support.design.widget.CoordinatorLayout
android:id="#+id/cl_dashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/abl_dashboard"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/ctb_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/the_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_dashboard_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#mipmap/the_image"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<include
android:id="#+id/toolbar"
layout="#layout/overlay_toolbar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fl_dashboard_fragmentframe"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nv_navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/overlay_drawer_header"
app:menu="#menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>
Fragment Layout XML
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_fragment_dashboardhome"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</android.support.v7.widget.RecyclerView>
I don't understand why this isn't working and I've run through a lot of documentation and examples with no luck. Any help or suggestion would be greatly appreciated.
It turned out that the layout I was using for the Toolbar did not have the correct height value.
overlay_toolbar.xml
<android.support.v7.widget.Toolbar
android:id="#+id/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/get_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:theme="#style/actionbar_getblue">
</android.support.v7.widget.Toolbar>
Adjustment to overlay_toolbar include call in Activity XML
<include
android:id="#+id/toolbar"
layout="#layout/overlay_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
After that single adjustment to the height the CollapsingToolbarLayout began working perfectly.
app:layout_behavior should be applied to RecyclerView or any other View capable of nested scrolling such as NestedScrollView.
See this tutorial from codepath: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
You can use app:layout_behavior="#string/appbar_scrolling_view_behavior" on RecyclerView you have in fragment.
I'm using the layout below, The CoordinatorLayout holds inside it AppBarLayout (With Toolbar and TabLayout inside it) and a placeholder RelativeLayout, so I could add and replace fragments on it.
I'm experiencing margin errors, the fragments I add on the RelativeLayout will always over expand beyond the bottom of the screen (in the amount similar to the size of the AppBarLayout height), I've tried setting it's height to wrap_content and match_parent, in both cases it goes overboard.
if I remove the app:layout_behavior="#string/appbar_scrolling_view_behavior" from the RelativeLayout the top of it will be under the AppBarLayout which is also not the desired outcome.
<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_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#ffffff"
app:tabMode="scrollable"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="20dp"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
I have figured out the problem on showing fragment below toolbar when using the coordinator layout. The problem in my case is:
In this image it shows the Fragment is overlapped by Toolbar.
Now just put your AppBarLayout and FrameLayout inside LinearLayout like below,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainappbar"
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:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Now your problem is solved. And it will be like this.
The final image.
You will also see this issue if you have a ScrollView inside the fragment. So make sure you use a NestedScrollView instead:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
Had the same issue. Changing RelativeLayout to FrameLayout with parameter app:layout_behavior="#string/appbar_scrolling_view_behavior" solved my problem.
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
The issue has been solved by updating the recyclerview library (to com.android.support:recyclerview-v7:22.2.0)
The fragment I was loading had a recyclerview in it.