I have my coordinator layout some thing like this:
<CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:animateLayoutChanges="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collappbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:background="#android:color/transparent"
app:layout_collapseMode="parallax" />
<include layout="#layout/custom_toolbar"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:visibility="gone"
app:layout_collapseMode="parallax"
android:orientation="horizontal"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#android:color/background_light"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/gray" />
</CoordinatorLayout>
Problem is ,the recycler view which i set inside view pager,some times scrolls inside the collapsable header,even when the header is not collapsed,and also collapsing is not smooth.
Related
I have a layout with collapsing toolbar and tabs as shown in attached image below
I want to show my tab layout on top while scrolling the list in anyone of the tabs
I have tried some links link1 and end with below result as shown in image below
I want to hide my toolbar ,profile image and textview completely while scrolling the list in any tabs
following is the layout xml code that I used
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/background_color"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/mobilebanner"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="abc"
android:gravity="center_horizontal"
android:lineSpacingExtra="8dp"
android:textSize="20sp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/background_color"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black" />
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="400dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center_horizontal|center"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/user" />
</android.support.design.widget.CoordinatorLayout>
I have the following layout:
<CoordinatorLayout layout_height="match_parent">
<AppBarLayout layout_height="match_parent">
<CollapsingToolbarLayout layout_height="match_parent">
<ImageView> //Fullscreen picture
<LinearLayout> //Some text and icons
<Toolbar layout_height="?attr/actionBarSize"> //No title
<TabLayout layout_height="?attr/actionBarSize"> //Drawn on top of the invisible Toolbar
</CollapsingToolbarLayout>
</AppBarLayout>
<ViewPager layout_height="wrap_content"/>
<FloatingActionButton/>
</CoordinatorLayout>
Now, the ViewPager has 3 fragments, each with a RecyclerView inside it. I believe this should be a regular design pattern. The ViewPager sits below the AppBarLayout, which starts full screen, so you have to scroll down to see the ViewPager content.
The problem is when I fling on the AppBarLayout, the fling event prevents any further scroll until it stops flinging (until velocityY = 0). But this takes up to 2 or 3 seconds sometimes, so in the meanwhile, the touchpad remains unresponsive.
What is worse, if I try to scroll on one of the children RecyclerViews, the screen will flicker so badly and the RecyclerView will suddenly appear at the scrolled position once the AppBarLayout fling has ended. This is horrible!
I've already tested this smooth AppBarLayout library and while it fixes some issues, it introduces some other bad ones (the ViewPager is drawn on top of everything, and not below the TabLayout).
UPDATE: FULL 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=".ActivityActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<!-- ALSO TRIED app:layout_behavior="com.package.utils.FlingBehavior" -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="center|top"
app:expandedTitleMarginTop="#dimen/activity_horizontal_margin_extra"
app:expandedTitleMarginBottom="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/background_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:tintMode="screen"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Probando probando"
android:textColor="#color/white" />
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="120dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom|center"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/activity_horizontal_margin" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="100dp"
android:fitsSystemWindows="true" />
</LinearLayout>
<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.TabLayout
android:id="#+id/activities_options_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:scrollbars="horizontal"
app:tabMode="fixed"
app:tabContentStart="48dp"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/activities_options_container"
android:layout_width="match_parent"
android:focusable="false"
android:layout_marginTop="0dp"
android:visibility="visible"
android:elevation="4dp"
app:behavior_overlapTop="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
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_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#drawable/ico_share" />
</android.support.design.widget.CoordinatorLayout>
AND ONE OF THE FRAGMENTS, THEY ARE ALL THE SAME:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/activity_vertical_margin_large"
android:visibility="invisible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>
Help!
Thanks
i used this for the same purpose
<?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:gravity="right"
android:orientation="vertical"
tools:context="com.cafeagahi.app.AccountActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_pages"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
This is my xml file.On Scrolling the toobar is not scrolling at all.It remains Sticky ,only the elements of recycler view scroll
<CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/collappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="192dp"
app:layout_collapseMode="parallax"
android:background="#android:color/transparent"
/>
<include layout="#layout/toolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:layout_marginBottom="50dp"
android:background="#color/light_gray"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#color/gray"
app:tabTextAppearance="#style/tabLayoutStyle"
app:tabSelectedTextColor="#color/selected_text_color"
app:tabIndicatorColor="#color/more_comment_color"
android:background="#android:color/background_light"
android:layout_gravity="bottom"
/>
</CoordinatorLayout>
The Collapsable toolbar is not collapsing.Please help me in finding out what is missing from the code
Use like this it will work :
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/backgroundlayout"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="left"
app:contentScrim="#ffffff"
app:expandedTitleMarginEnd="0dp"
app:expandedTitleMarginStart="0dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="192dp"
android:background="#android:color/transparent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Please refer the below link,
https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
Appbar behaviour works only if the content view has a RecyclerView or any other View capable of nested scrolling such as NestedScrollView.
Recycler view scrolls without collapsing toobar. This is my Main layout.
<CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/collapp_bar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="220dp"
app:layout_collapseMode="parallax"
android:background="#android:color/transparent"
/>
<include layout="#layout/custom_toolbar" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
android:id="#+id/nestedScrollView"
android:layout_marginBottom="10dp"
>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="#+id/recyclerView"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#color/gray"
app:tabSelectedTextColor="#color/selected_text_color"
app:tabIndicatorColor="#color/more_comment_color"
android:background="#android:color/background_light"
android:layout_gravity="bottom"
/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:layout_anchor="#id/tab_layout"
app:layout_anchorGravity="bottom|center"
android:layout_marginTop="-20dp"
/>
</CoordinatorLayout>
This is the layout which I am setting in View Pager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recyler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_listview" /></android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
My Recycler view scrolls,even without collapsing toolbar sometimes.Alsothe scrolling is not smooth.In recyClerView of view pager i have a header item and then the list of items.Sometimes it get stuck at Header at top and need to pull it down.
For every RecyclerView that is has a scrolling parent (such as ScrollView or NestedScrollView) you should disable nested scrolling like this:
yourRecyclerView.setNestedScrollingEnabled(false);
For your smoothing problem it seems that there is a bug with AppBarLayout and there are some libraries for fixing that. One that I know but I've never used is:
https://github.com/henrytao-me/smooth-app-bar-layout
I am using coordinator layout with a custom collapsing view and tablayout.
Here is the 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:fresco="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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/cardParentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:actualImageScaleType="centerCrop"
fresco:overlayImage="#drawable/profile_overlay" />
<RelativeLayout
android:id="#+id/childParentToAnimate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible">
<include
android:id="#+id/cardLayout"
layout="#layout/layout_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
fresco:actualImageScaleType="centerCrop"
fresco:backgroundImage="#drawable/profile_placeholder"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="#color/white"
fresco:roundingBorderWidth="2dp" />
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="51dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/blue_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The problem is that when collapsed, the toolbar is appearing white (default gray color) as you can see in this image.
If I add background attribute to toolbar in xml, the toolbar is appearing even when not collapsed