collapsing toolbar not working properly - android

Can anyone let me know what is wrong with this layout. The collapsing toolbar is not collapsing properly. Moreover i cannot able to change the background of the tablayout when it is pinned on the top. Would be thankful if anyone come up with the solution.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar_layout" />
<RelativeLayout
android:id="#+id/home_main_rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#color/colorAccent"
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="#drawable/main_bg"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#style/ExpandedAppbarTextAppearence"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/banner_ad_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" />
<TextView
android:id="#+id/banner_ad_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/indicator"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:maxLines="2" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:padding="10dp"
app:fillColor="#color/standard_brown" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:ignore="MissingPrefix,Overdraw,MergeRootFrame">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabIndicatorColor="#color/standard_brown"
app:tabIndicatorHeight="4dp"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabTextColor="#color/color_black" />
<android.support.v4.view.ViewPager
android:id="#+id/dine_category_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs" />
<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_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="60dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:visibility="visible"
app:backgroundTint="#color/standard_brown"
app:fabSize="normal" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:visibility="gone" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header_layout"
app:menu="#menu/navigation_items_layout" />


Lower the api level and rebuilt your project..hope its work

Related

How to fix a view on the top of the layout and make collapse rest of layout?

I want to design a layout like blew application.I want to fix a VideoView on top of my layout and rest of layout behave collapsing state. I write this code but I did not get the result.
<?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"
tools:context=".view.DetailMyCourseActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/videoView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentTop="true"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
android:layout_below="#+id/videoView">
<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:contentScrim="#android:color/transparent"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true"
app:titleEnabled="false">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtTitleCourse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:textSize="30sp"
android:text="عنوان دوره دروه"/>
<TextView
android:id="#+id/txtInstructor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
android:layout_below="#+id/txtTitleCourse"
android:textSize="20sp"
android:text="علیرضا عزیزی"/>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#fff"
app:tabIndicator="#android:color/white"
app:tabIndicatorHeight="1.5dp"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/app_bar_layout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/txt_description_course"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Here is the full project - github url
Or you may try with this snippet of code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:id="#+id/videoview"
android:layout_width="match_parent"
android:layout_height="180dp" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordiLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/videoview">
<android.support.design.widget.AppBarLayout
android:id="#+id/tab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#ffffff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your topics title goes here. "
android:textColor="#000000"
android:textSize="17dp"
android:layout_margin="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="subtitle goes here "
android:textColor="#000000"
android:textSize="12dp"
android:layout_margin="10dp"/>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

How to hide TabLayout instead of Toolbar on Recyclerview OnScroll?

I'm using a Collapsing Toolbar Layout and I want to hide the TabLayout instead of the Toolbar. For example, when I scroll down my recyclerview I want the TabLayout to be hidden and the toolbar to stay in place at the top. I'm nesting the Coordinator Layout inside the drawer, like so, I'm using this following structure:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="end">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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_alignParentEnd="true"
android:layout_margin="#dimen/fab_margin"
android:layout_above="#+id/bottom_navigation"
app:srcCompat="#drawable/ic_filter_list_white_24dp"
android:layout_alignParentRight="true" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorBottomNavigationBar"
app:itemIconTint="#drawable/bottom_main_nav_item_style"
app:itemTextColor="#drawable/bottom_main_nav_item_style"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_items" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/platforms_filter_drawer"
android:background="#color/colorPrimaryD"
android:layout_width="215dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:orientation="vertical" >
<RelativeLayout
android:paddingTop="12dp"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/filter_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="FILTER"
android:textColor="#android:color/white"
android:textSize="#dimen/header" />
<Button
android:textColor="#android:color/white"
android:textSize="#dimen/header"
android:id="#+id/btn_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:visibility="invisible"
android:text="CLEAR"
android:backgroundTint="#color/md_red_600"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/md_grey_700" />
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="215dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
How can I accomplish this? Thank you very much!!

Try this :)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="end">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<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="?android:attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<include layout="#layout/content_main" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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_alignParentEnd="true"
android:layout_margin="#dimen/fab_margin"
android:layout_above="#+id/bottom_navigation"
app:srcCompat="#drawable/ic_filter_list_white_24dp"
android:layout_alignParentRight="true" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorBottomNavigationBar"
app:itemIconTint="#drawable/bottom_main_nav_item_style"
app:itemTextColor="#drawable/bottom_main_nav_item_style"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_items" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/platforms_filter_drawer"
android:background="#color/colorPrimaryD"
android:layout_width="215dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:orientation="vertical" >
<RelativeLayout
android:paddingTop="12dp"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/filter_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="FILTER"
android:textColor="#android:color/white"
android:textSize="#dimen/header" />
<Button
android:textColor="#android:color/white"
android:textSize="#dimen/header"
android:id="#+id/btn_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:visibility="invisible"
android:text="CLEAR"
android:backgroundTint="#color/md_red_600"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/md_grey_700" />
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="215dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</LinearLayout>

Nestedscrollview not working well

in my app i have to put recyclerview below some information and some photos and i'm testing the activity but it doesn't work very well and i don't know why !
any one can help me with that, i just need to scroll all things together like one thing . i tried many solutions but no thing solute my issue
here is a video for my issue
xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinate_layout">
<android.support.design.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar_layout"
android:layout_gravity="top"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:dividerPadding="8dp"
android:orientation="horizontal"
android:showDividers="end">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:padding="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Upload Item"
android:textColor="#color/white"
android:gravity="center_vertical" />
<TextView
android:id="#+id/toolbar_save"
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:drawablePadding="8dp"
android:drawableRight="#drawable/done"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textAllCaps="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:id="#+id/swipe_to_refresh"
android:layout_height="match_parent"
android:layout_below="#+id/coordinate_layout"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relative1">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/shoes"
android:id="#+id/profile_imagee" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/shoes"
android:id="#+id/profile_imagee1"
android:layout_below="#+id/profile_imagee" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/shoes"
android:id="#+id/profile_imagee2"
android:layout_below="#+id/profile_imagee1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="change profile"
android:layout_below="#+id/profile_imagee2"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relative1">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

In recyclerview add an attribute
nestedScrollingEnabled to false in xml it will solve your problem

Android Scroll Problems - CoordinatorLayout + CollapsingToolBarLayout + View Pager + Recycler View

I have a problem getting my recyclerview to scroll. I am trying to achieve the parallax image effect so I found this tutorial and adopted that. After that, i noticed that the recycler views in my viewpager weren't scrolling anymore.
I've looked through some solutions: I found this, but nothing seems to work.
This is my XML below:
<LinearLayout
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"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/rel_layout_size"
android:background="#android:color/white"
android:orientation="horizontal"
android:focusable="true"
>
<ImageView
android:id="#+id/search_icon"
android:layout_width="#dimen/icons_size"
android:layout_height="#dimen/icons_size"
android:src="#drawable/search"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="10dp"
/>
<ImageView
android:id="#+id/like_icon"
android:layout_width="#dimen/icons_size"
android:layout_height="#dimen/icons_size"
android:src="#drawable/like"
android:layout_toStartOf="#id/search_icon"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
</RelativeLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:theme="#style/AppTheme.LightActionBar"
app:contentScrim="#android:color/white"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.1"
android:background="#android:color/white"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/black"
app:tabSelectedTextColor="#android:color/black"
app:tabTextColor="#android:color/darker_gray"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<xyz.santeri.wvp.WrappingViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
and an example fragment XML is shown below:
<android.support.v4.widget.NestedScrollView
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:fillViewport="true"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewArtworks"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

I found the solution later on. Turns out the RelativeLayout fixes it. This could help someone
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/rel_layout_size"
android:background="#android:color/white"
android:orientation="horizontal"
android:layout_alignParentTop="true"
android:focusable="true"
>
<ImageView
android:id="#+id/search_icon"
android:layout_width="#dimen/icons_size"
android:layout_height="#dimen/icons_size"
android:src="#drawable/search"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="10dp"
/>
<ImageView
android:id="#+id/like_icon"
android:layout_width="#dimen/icons_size"
android:layout_height="#dimen/icons_size"
android:src="#drawable/like"
android:layout_toStartOf="#id/search_icon"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
</RelativeLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_below="#+id/search_bar"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:theme="#style/AppTheme.LightActionBar"
app:contentScrim="#android:color/white"
android:fitsSystemWindows="true"
>
<!--android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.1"
android:background="#android:color/white"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<!--android:layout_height="?attr/actionBarSize"-->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/black"
app:tabSelectedTextColor="#android:color/black"
app:tabTextColor="#android:color/darker_gray"
android:fillViewport="false" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
</android.support.design.widget.AppBarLayout>
<!--<xyz.santeri.wvp.WrappingViewPager-->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolBarLayout with TabLayout and ViewPager

Am try to create a layout similar to the one in the image using a CordinatorLayout and CollapsingToolbarLayout, TabLayout and ViewPager.
My Layout doesn't render properly.
Here is my 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
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:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:src="#drawable/thumb_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<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_collapseMode="pin" />
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/movie_tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/textColorPrimary"
app:tabSelectedTextColor="#color/textColorPrimary"
app:tabIndicatorColor="#color/textColorPrimary"
app:tabIndicatorHeight="4dp"
app:paddingStart="20dp"
app:paddingEnd="20dp">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/movieviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Testing it on my device i get this
The ViewPager Fragment overlays the TabLayout if it has content and displays the TabLayout on top of the ImageView when there is no content.
What am i doing wrong, i am still somewhat of an Android noob.

CollapsingToolbarLayout needs a minHeight. This tells the parent AppBarLayout how much it can collapse. I assume you want the Toolbar and the TabLayout to stay at the top of the screen (because you are using the exitUntilCollapsed scroll flag). I would make both of those have android:layout_height="?attr/actionBarSize" and use double that value as the minHeight of the CollapsingToolbarLayout.
ViewPager needs app:layout_behavior="#string/appbar_scrolling_view_behavior".

Old answer but maybe someone found it useful
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<VideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

<?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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your extra details excluding tablayout. if u want any..-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home_dummy_4"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/black_shadow"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_10"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:layout_toLeftOf="#+id/txt_reviews"
android:text="Bhagat Mishthan Bhandar"
android:textColor="#color/orangeColor"
android:textSize="#dimen/font_slarge"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_reviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="#dimen/margin_5"
android:text="580 reviews"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</RelativeLayout>
<View
android:layout_width="100dp"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_5"
android:layout_marginBottom="#dimen/margin_5"
android:background="#color/orangeColor" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/min_order"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
<TextView
android:id="#+id/txt_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_5"
android:text="1000"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_5"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="#dimen/margin_5"
android:background="#drawable/location_white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/margin_5"
android:text="Bhati enclave, Main queens road, Opp Jharkhand mahadev mandir, Vaishali nagar, Jaipur - 302021"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorWhite"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/orangeColor"
app:tabTextAppearance="#style/MyCustomTabText"
app:tabTextColor="#color/colorText" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/transperentColor"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Best is to use
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.ehryourway.ehryourway.PatientChart"
tools:showIn="#layout/app_bar_patient_chart">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabTextColor="#color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/tablayout">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</android.support.v4.view.ViewPager>
</RelativeLayout>

Categories

Resources