How to disable scrolling of NestedScrollView&CollapsingToolbarLayout, for example when there is no more content below?
What can I do in order to make the scrolling stop when there is nomore content to show at the bottom?
Firstly, as I have commented below, the scrolling you said in your question is not of the NestedScrollView
. It belongs to the CollapsingToolbarLayout
. The NestedScrollView
's scroll event only happens when CollapsingToolbarLayout
fully collapsed, and of course it will stop scrolling when when there is no more content inside it (bottom reached). For the CollapsingToolbarLayout
, it will collapse to its Toolbar's layout_height (as in the xml file, you will find "?attr/actionBarSize"
). The following image will demonstrate that, pay attention to the red rectangular that is the toolbar (I set its background)
So to have a solution for your #1, you need to calculate the height of NestedScrollView
, then if it's smaller than screen height, we fix the toolbar's height.
In short, you can update activity_detail.xml
as the following:
<?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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" 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:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="false" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <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/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="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Info" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
And CheeseDetailActivity.java:
public class CheeseDetailActivity extends AppCompatActivity { public static final String EXTRA_NAME = "cheese_name"; private final Context mContext = this; private int screenHeight; private int linearLayoutHeight; private int toolbarHeight_org; private int toolbarHeight; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); Intent intent = getIntent(); final String cheeseName = intent.getStringExtra(EXTRA_NAME); screenHeight = getScreenHeight(this); TypedValue typedValue = new TypedValue(); getTheme().resolveAttribute(R.attr.colorPrimary, typedValue, true); final int colorPrimary = typedValue.data; final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); AppBarLayout appbar = (AppBarLayout) findViewById(R.id.appbar); final CoordinatorLayout.LayoutParams appbarLayoutParams = (CoordinatorLayout.LayoutParams)appbar.getLayoutParams(); final ViewGroup.LayoutParams toolbarLayoutParams = toolbar.getLayoutParams(); if (toolbarLayoutParams != null) { toolbarHeight_org = toolbarLayoutParams.height; toolbarHeight = toolbarLayoutParams.height; } final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle(cheeseName); collapsingToolbar.setContentScrimColor(colorPrimary); collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedTitleTextAppearance); //collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedTitleTextAppearance); final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout1); ViewTreeObserver observer = linearLayout.getViewTreeObserver(); observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { linearLayoutHeight = linearLayout.getHeight(); if (linearLayoutHeight + toolbarHeight < screenHeight) { if (toolbarLayoutParams != null) { toolbarLayoutParams.height = screenHeight - linearLayoutHeight - 20; if (toolbarLayoutParams.height < toolbarHeight_org) { toolbarLayoutParams.height = toolbarHeight_org; } int extended_text_size = (int) getResources().getDimension(R.dimen.expanded_text_size); if (appbarLayoutParams.height - toolbarLayoutParams.height <= extended_text_size) { int value = appbarLayoutParams.height - toolbarLayoutParams.height; if (value < 0) { appbarLayoutParams.height = toolbarLayoutParams.height - value + extended_text_size * 3; } else { appbarLayoutParams.height = toolbarLayoutParams.height + extended_text_size * 3; } if (appbarLayoutParams.height >= screenHeight) { appbarLayoutParams.height = screenHeight; } } // collapsingToolbar.setContentScrimColor(getResources().getColor(android.R.color.transparent)); if (toolbarLayoutParams.height > toolbarHeight_org) { collapsingToolbar.setContentScrimColor(ContextCompat.getColor(mContext, android.R.color.transparent)); } } } // Removes the listener if possible ViewTreeObserver viewTreeObserver = linearLayout.getViewTreeObserver(); if (viewTreeObserver.isAlive()) { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) { linearLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); } else { linearLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this); } } } }); loadBackdrop(); appbar.setExpanded(true); } private int getScreenHeight(Context context) { int measuredHeight; Point size = new Point(); WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) { wm.getDefaultDisplay().getSize(size); measuredHeight = size.y; } else { Display d = wm.getDefaultDisplay(); measuredHeight = d.getHeight(); } return measuredHeight; } private void loadBackdrop() { final ImageView imageView = (ImageView) findViewById(R.id.backdrop); Glide.with(this).load(Cheeses.getRandomCheeseDrawable()).centerCrop().into(imageView); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.sample_actions, menu); return true; }}
Here's the result:
With Cheesesquare sample, I have customized this project and uploaded to My GitHub. I agree that it still has some problems, however, at least it can be a solution for your 1st issue.
Please take a look. Hope it helps!
To disable scrolling, just set both NestedScrollView and it's LinearLayout child height to 'wrap_content'.
That will not work completely as you wish, but at least it will not be scrollable, if content fits on screen completely.
Talking about your Contacts app example, looks like it's not using CoordinatorLayout and other things that come with it.
This behavior can be done in this way:
<ScrollView android:id="@+id/scroll_adinfo" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="@dimen/image_height" android:src="@mipmap/ic_launcher"/> <LinearLayout android:id="@+id/layout_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/image_height"> <!-- YOUR CONTENT HERE --> </LinearLayout> </FrameLayout></ScrollView>
And in your code you will move the image on scroll:
final ImageView image = (ImageView) findViewById(R.id.image);((ScrollView) rootView.findViewById(R.id.scroll_adinfo)).getViewTreeObserver().addOnScrollChangedListener( new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { int scrollY = ((ScrollView) rootView.findViewById(R.id.scroll_adinfo)).getScrollY(); image.setY(scrollY / 2); } });
I have extracted that from one of my projects and edited it so I can miss something.