Menu
I am working on one android app in which I am using CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout to use the collapse toolbar functionality.
I am using NestedScrollView in layout to expand and collapse AppBarLayout in same layout. When I am trying to scroll up from center of the screen then it does not work but when I try to scroll up screen from right corner of the screen then it scrolls smoothly.
Below mentioned is my xml file
layout.xml
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:paddingBottom="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/fragment_back_color"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/new_recharge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:text="NEW PAYMENT"
android:textColor="@color/offer_name_text_color" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@color/white"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="20dp">
<HorizontalScrollView
android:id="@+id/hsv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:fillViewport="true"
android:measureAllChildren="false"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/wallet_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/wallet_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/wallet_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="WALLET"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/prepaid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/prepaid_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/prepaid_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="PREPAID"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/postpaid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/postpaid_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/postpaid_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="POSTPAID"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/dth_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/dth_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/dth_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="DTH"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/landline_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/landline_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/landline_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="LANDLINE"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/datacard_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/datacard_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/datacard_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="DATACARD"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/recent" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:text="RECENT"
android:textColor="@color/offer_name_text_color" />
</LinearLayout>
<ListView
android:id="@+id/recent_recharge_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
</ListView>
</LinearLayout>
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/recharge_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
tools:ignore="MergeRootFrame">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
The desired result is when I try to scroll up from center of the screen then it should work as smmoth as I scroll up from right corner of the mobile.
Please watch below mentioned video to look at the problem more clearly
https://www.dropbox.com/s/gscfc8vfc7kkpxp/device-2015-12-30-160119.mp4?dl=0
656
I believe, I've nailed it:
You can find the source code here - feel free to try;
I took as an example google\designlibdemo.
Here's how my Activity looks like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<include layout="@layout/include_list_viewpager"/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
It hosts ViewPager: include_list_viewpager.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/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="wrap_content"
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|enterAlways|snap"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/image"
android:src="@drawable/header_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<View
android:background="#AA50AA00"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:title=""
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:background="#50AA00"
app:tabMode="scrollable"
app:tabIndicatorColor="#FFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<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" />
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout hosts Toolbar (app:layout_collapseMode="pin") and above ImageView (app:layout_collapseMode="parallax").
The hosted in the ViewPager Fragment has this layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:background="#DDD"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:src="@drawable/mobile"
android:layout_marginTop="2dp"
android:layout_width="16dp"
android:layout_height="16dp" />
<TextView
android:text="@string/prepaid_recharge"
android:layout_marginStart="16dp"
android:layout_gravity="center_vertical"
android:textColor="#000"
android:fontFamily="sans-serif-medium"
android:textSize="14sp"
android:textAllCaps="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
........
<ListView
android:id="@+id/recent_recharge_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
So it has this behaviour app:layout_behavior="@string/appbar_scrolling_view_behavior" and filling ViewPort (android:fillViewport="true")
And actually - that's all you need. Fragment class is very standard:
public class RechargeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.recharge_fragment, container, false);
}
}
Activity is also remained very standard.
Again, you can find my code example here.
NB! I found it works pretty poor(not smooth at all) on the emulator.
I hope, it helps.
136
I pretty much had the similar kind of issue when working with the CoordinatorLayout having AppbarLayout ,CollapsingToolbarLayout and NestedScrollView as child views.
The following code is a working piece directly from my project workspace.Hope it helps!!
<?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="wrap_content"
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/cover_pic"
android:layout_width="match_parent"
android:layout_height="256dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/cookin"/>
<android.support.v7.widget.Toolbar
android:id="@+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
app:tabMode="scrollable"/>
</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">
<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.v4.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="@dimen/fab_margin"
android:visibility="invisible"
app:backgroundTint="@color/colorFAB2"
app:elevation="6dp"
android:layout_margin="5dp"
app:pressedTranslationZ="12dp"
android:src="@drawable/ic_phone_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_book"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="5dp"
android:layout_marginRight="@dimen/fab_margin"
android:visibility="invisible"
app:elevation="6dp"
app:backgroundTint="@color/colorFAB1"
app:pressedTranslationZ="12dp"
android:src="@drawable/ic_receipt_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:backgroundTint="@color/colorAccent"
app:pressedTranslationZ="12dp"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_add_white_24dp" />
</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
try android:clickable="true" in child view of NestedScrollView Like below:
<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="match_parent"
android:orientation="vertical"
android:clickable="true">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Looks like duplicate of this. Although it points to "solved" thread, the other one is related more to RecyclerView.
I've wrote my behavior based on solutions made by Manolo Garcia and Kirill Boyarshinov from RecyclerView thread. In my case onNestedFling() was not called when making up fling gesture so I hacked onNestedPreScroll(). I've been working inside ViewPager with NestedScroll today, haven't tested below solution in different scenario (although it is based on similar code I wrote for RecyclerView a year ago).
First updated behavior (add it in xml as app:layout_behavior="your.package.FlingBehavior"> for android.support.design.widget.AppBarLayout):
public final class FlingBehavior extends AppBarLayout.Behavior {
private static final String TAG = FlingBehavior.class.getName();
private static final int TOP_CHILD_FLING_THRESHOLD = 1;
private static final float OPTIMAL_FLING_VELOCITY = 3500;
private static final float MIN_FLING_VELOCITY = 20;
boolean shouldFling = false;
float flingVelocityY = 0;
public FlingBehavior() {
}
public FlingBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target,
int velocityX, int velocityY, int[] consumed) {
super.onNestedPreScroll(coordinatorLayout, child, target, velocityX, velocityY, consumed);
if (velocityY > MIN_FLING_VELOCITY) {
shouldFling = true;
flingVelocityY = velocityY;
} else {
shouldFling = false;
}
}
@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target) {
super.onStopNestedScroll(coordinatorLayout, abl, target);
if (shouldFling) {
Log.d(TAG, "onNestedPreScroll: running nested fling, velocityY is " + flingVelocityY);
onNestedFling(coordinatorLayout, abl, target, 0, flingVelocityY, true);
}
}
@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target,
float velocityX, float velocityY, boolean consumed) {
if (target instanceof RecyclerView && velocityY < 0) {
Log.d(TAG, "onNestedFling: target is recyclerView");
final RecyclerView recyclerView = (RecyclerView) target;
final View firstChild = recyclerView.getChildAt(0);
final int childAdapterPosition = recyclerView.getChildAdapterPosition(firstChild);
consumed = childAdapterPosition > TOP_CHILD_FLING_THRESHOLD;
}
// prevent fling flickering when going up
if (target instanceof NestedScrollView && velocityY > 0) {
consumed = true;
}
if (Math.abs(velocityY) < OPTIMAL_FLING_VELOCITY) {
velocityY = OPTIMAL_FLING_VELOCITY * (velocityY < 0 ? -1 : 1);
}
Log.d(TAG, "onNestedFling: velocityY - " + velocityY + ", consumed - " + consumed);
return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
}
}
Now it should scroll smoothly but content of NestedScrollView (and RecyclerView) can scroll before AppBarLayout is collapsed, which can look wierd. To solve it follow this answer. Make small change to use fullScroll(ScrollView.FOCUS_UP) method instead of scrollTo(0, 0) otherwise You may notice small flickering during fast scrolls, here:
AppBarLayout appBarLayout = findViewById(...);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
shouldScroll = Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange();
}
});
NestedScrollView nestedScrollView = findViewById(...);
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (!shouldScroll)
nestedScrollView.fullScroll(ScrollView.FOCUS_UP);
}
});
After that I called it an end, but You may want to proceed further to make it scroll even more smoothly like in Google Play, there is (I think unsolved) thread about it here.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
