Scrollable view inside CollapsingToolbarLayout - android

I want to achieve scrolling image inside toolbar, that can be collapsed, when I drag toolbar (outside image).
With default AppBarLayout.Behavior I can't scroll content inside.
I've tried to use
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
for AppBarLayout, it allows scrolling, but toolbar doesn't collapse.
My layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/root"
style="?attr/bottomSheetStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
tools:visibility="visible">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:nestedScrollingEnabled="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<androidx.core.widget.NestedScrollView
android:id="#+id/imageScroller"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/half_margin">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/half_margin"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
tools:src="#drawable/emoji" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior=".CenterCollapsingScrollBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
How to make it work properly?

Related

CollapsingToolBar not working on tab switch

MY ISSUE:
When my activity is opened the first time I can collapse by dragging on the image but after switching to other tabs I can't collapse the layout by pulling on the image view. Once the view pager is scrolled, I can Collapse the toolbar using the top image view. Please look at the GIF. I think this is because of the view pager nested scrolling. I don't know the cause. but Why can't I drag the top Image view once the tab is switched?
MY ACTIVITY CODE:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:nestedScrollingEnabled="false"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:nestedScrollingEnabled="false"
android:layout_height="256dp"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/tool_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:alpha="0.3"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_collapseMode="pin"
android:background="#drawable/fade"
app:title="hello"
android:layout_marginTop="4dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:menu="#menu/three_line"
android:layout_marginBottom="48dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabSelectedTextColor="#color/white"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
MY TAB FRAGMENT CODE:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="60dp"
android:textStyle="bold"
android:text="Home" />
</androidx.core.widget.NestedScrollView>
I have also tried to use ConstrainLayout in fragment with RecyclerView but it is not working.

How to make CollapsingToolbarLayout disappear completely after scrolling?

I'm trying to make a fragment "head" with two toolbars and horizontal scroll view between them. I want to make horizontal scroll view completely disappear after scrolling down but after scrolling there some black space and i don't know why. What attributes should i type to make it?
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
app:layout_constraintTop_toBottomOf="#id/tool"
tools:context=".ui.menu.MenuFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:theme="#style/Theme.PizzaTime.AppBarOverlay">
<com.google.android.material.appbar.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_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
<androidx.appcompat.widget.Toolbar
android:id="#+id/support_action"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.PizzaTime.PopupOverlay">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/scroll_content" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
After I deleted the following line from CoordinatorLayout:
android:fitsSystemWindows="true"
It started working correctly, hope it will be helpful for someone.

Android coordinatorlayout adding extra space at the bottom

I have a CoordinatorLayout which has AppBarLayout(containing CollapsingToolbarLayout), RecyclerView, and beneath that an ImageView. The issue which I face is CoordinatorLayout is adding some extra space below the ImageView which should not be present in the UI.
Below is the code of my XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
......
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/myImage"
android:layout_width="match_parent"
android:layout_height="100dp"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/static_image" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set this to your LinearLayout:
android:layout_height="wrap_content"

Nested Coordinator layout and Appbar Layout

Trying to build layout in which the activity has Coordinator layout and Appbar layout. The appbar layout has tab layout, which is connected to a view pager. In the view pager, the first fragment has another coordinator layout and an appbar layout. When the scroll happens in appbar layout, I want the Activity's appbar layout also to scroll.
Activity's 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"
android:id="#+id/coord"
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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|snap|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarWithNavigationBack"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:clipToPadding="true"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="10dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#BDBDBD"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
​
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment's xml
<?xml version="1.0" encoding="utf-8"?>
<NestedCoordinatorLayout
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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e3e6e8"
android:gravity="center"
android:orientation="vertical"
android:padding="20dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|snap">
<android.support.v7.widget.CardView
card_view:cardCornerRadius="4dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="24dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shade_gradient" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/simple.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</NestedCoordinatorLayout>
When the appbar scrolls in the fragment, I want the activity's appbar to scroll also.
I have used the NestedCoordinatorLayout as suggested in CoordinatorLayout inside another CoordinatorLayout
Please let me know how to achieve that
Thanks!

Donot want to expand Collapsing toolbar

I am using a collapsing Toolbar. If I start a specific Fragment I want to collapse the Toolbar so it behaves like a "normal" one and that the user can not expand it by himself. Also I want only the views ion nested scrollview to scroll and not the toolbar when i collapse. Here is my layout which I use for my Toolbar:
<?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/coordinator_layout"
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="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsing_height"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/past_upcoming_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efeded"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:id="#+id/upcoming_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:padding="#dimen/spacing_normal_8dp"
android:text="#string/upcoming_appointments"
android:textSize="#dimen/text_size18sp" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/upcoming_heading">
<android.support.v7.widget.RecyclerView
android:id="#+id/upcoming_appointments_recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal" />
<TextView
android:id="#+id/no_upcoming_list"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/no_upcoming_appointment"
android:textSize="#dimen/text_size18sp" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/past_appointments"
android:textSize="#dimen/text_size18sp" />
</RelativeLayout>
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/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="match_parent"
android:background="#efeded"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/past_appointments_recycle_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I have used AppBarLayout.setExpanded(false). It initially shows collapsed, but when I expand back it expands.
I have also used
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
lp.height = (int) getResources().getDimension(R.dimen.collapsing_height);
This doesnot stick toolbar to the top. it scrolls up with nested scroll view. Please help.
Thanks in advance

Categories

Resources