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?
Related
I want to overlap a AppBarLayout which contains a toolbar with a persistent bottomsheet(when it is in expanded state only).Please tell me at least a hint if it is possible.
This is my layout file where my AppBarLayout is defined
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".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
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:title="Home"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimaryDark">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
The included layout content_main is where my bottomsheet lives.
I got it.The bottomSheet will overlap the toolbar if there is no
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
The appbarlayout makes itself compulsary to be shown throughout the navigationdrawer (if the navigations are fragments).
I have an Activity that contains a ViewPager:
activity.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"/>
</FrameLayout>
The fragments this pager contains – which are all generated from the same layout – have a CoordinatorLayout and CollapsingToolbarLayout to provide a collapsing image-back titlebar:
fragment.xml:
<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"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Content here -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:elevation="8dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="72dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:background="#color/photo_placeholder"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="bottom">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Without the fitsSystemWindows flags in the activity layout, the image in the fragment properly displays behind the system status bar, while the text sometimes collapses behind the status bar when scrolled up. If I add the flags in – as shown above – the text issue is resolved, but the image now cuts off at the status bar. Keeping the collapsing toolbar code in the fragment, is there a way to fit the fragment's content to the system window?
Without fitsSystemWindows in the activity (preferred behaviour):
With fitsSystemWindows in the activity:
You haven't declared, that you want NestedScrollView also to fitSystemWindows. So, literally, you are prohibiting WindowInsets to be passed to children off NestedScrollView, thus ViewPager is not even aware about WindowInsets.
Apply android:fitSystemWindows="true" to NestedScrollView also.
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.
I have set up a DrawerLayout and a CoordinatorLayout in order to use a modern layout with a NavigationView and collapsing toolbar.
It works just fine until the device is rotated. Then the main_content is moved to a new permanent location. If I remove the appbar_scrolling_view_behavior from the main_content FrameLayout rotation works, but the content is no longer aware of the Toolbar.
Any advice?
activity_main.xml
<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:background="#00ff00">
<!-- ACTIONBAR START -->
<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:background="#ff0000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<!-- ACTIONBAR END -->
<!-- MAIN CONTENT START -->
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#0000ff"/>
<!-- MAIN CONTENT END -->
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView ...>
<!-- NavigationView code omitted ... -->
</android.support.v4.widget.DrawerLayout>
fragment_main.xml (loaded into main_content)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.MainFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"/>
</FrameLayout>
A few points that should collectively resolve your problem:
The height of the AppBarLayout determins the expanded size of the collapsing toolbar, whilst the Toolbar determins the collapsed size. As such, you should set the AppBarLayout height to something more than the Toolbar (i.e. 280dp) to see the collapsing behaviour.
Immediately inside the AppBarLayout should be a CollapsingToolbarLayout, which contains the Toolbar and, optionally, other views too (normally an ImageView with a parallax collapse mode)
For the toolbar to collapse and expand correctly, it relies on a ViewGroup that supports nested scrolling (RecyclerView or NestedScrollView. As such, in your example you should try either changing main_content from a FrameLayout to a NestedScrollView, or conversely change the FrameLayout that forms the root layout of Fragment into a NestedScrollView.
Here is an 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_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="240dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar_layout"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header_image"
android:src="#drawable/header_image"
android:scaleType="centerCrop"
android:contentDescription="#string/header_image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
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.