Stop NestedScrollView inside ViewPager to process horizontal scrolls - android

I am trying to implement a view that is composed by a CoordinatorLayout with a ViewPager, and the NestedScroolViews are inside each ViewPager. I managed to make the Toolbar hide on scrolls, but I've been having the following issue:
Whenever I swipe left or right to change the content of the view pager, the gesture is forwarded to the NestedScrollView that sometimes registers a very small vertical scroll. It is small, but enough to be annoying.
This should explain the problem better:
Video: https://youtu.be/BGqynDDL68I
I've tried extending the NestedScrollView to block the scroll/fling methods but no success.
Has anybody gone through the same issue?
EDIT 1 : Code
Activity:
<?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"
tools:context="main.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--<include layout="#layout/main__activitycontent"/>-->
<android.support.design.widget.AppBarLayout
android:id="#+id/id_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/main__toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main__fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/main__navigations_tablayout"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:background="#color/main__tabbar_button_color"
app:layout_behavior="utils.views.TabLayoutBehaviour"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/main__tabbar_selected_color"
app:tabTextColor="#color/main__tabbar_normal_color"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.CoordinatorLayout>
Fragment With ViewPager
<android.support.v4.view.ViewPager
android:id="#+id/meditationpager__pager"
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"
/>
Inner Fragment:
<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:background="#android:color/white"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="main.MainActivity"
tools:showIn="#layout/main__activity">
<LinearLayout
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="wrap_content"
android:orientation="vertical"
tools:context="domain.screens.readmeditation.MeditationFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/large_text"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

The cleanest solution I found was to extend the NestedScrollView and override the onTouch event like this:
public class VerticalOnlyNestedScrollView extends NestedScrollView {
private static final String TAG = "VOnlyNestedScrollView";
public VerticalOnlyNestedScrollView(Context context) {
super(context);
}
private float startX, startY;
public VerticalOnlyNestedScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public VerticalOnlyNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
if (!(ev.getAction()== MotionEvent.ACTION_DOWN)&& ev.getHistorySize() > 0) {
float yVector = ev.getY() - ev.getHistoricalY(0);
float xVector = ev.getX() - ev.getHistoricalX(0);
Log.d(TAG, "onInterceptTouchEvent: " + xVector + "--" + yVector);
return Math.abs(yVector) <= Math.abs(xVector) || super.onTouchEvent(ev);
}
return super.onTouchEvent(ev);
}
}
This way, the parent onTouch is only processed if yVector is greater than the xVector.

Try changing your Activity's structure like this:
<?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"
tools:context="main.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--<include layout="#layout/main__activitycontent"/>-->
<android.support.design.widget.AppBarLayout
android:id="#+id/id_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/main__toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/meditationpager__pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/main__navigations_tablayout"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:background="#color/main__tabbar_button_color"
app:tabTextColor="#color/main__tabbar_normal_color"
app:tabSelectedTextColor="#color/main__tabbar_selected_color"
app:tabIndicatorColor="#color/white"/>
</LinearLayout>
This way your fragment with the view pager would be no longer necessary and you could setup your view using:
private void setupViewPager() {
MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
InnerFragment fragment = new InnerFragment();
adapter.addFragment(fragment);
mViewPager.setAdapter(adapter);
}
I believe that with this approach, you wouldn't need to set your NestedScrollView's layout_behavior.

Related

first item on recyclerview stacked up to tab layout

i already check the xml file, but everything is okay (for me), but the view still stacked up. and i also get an error message like this
PlayingFragment: onResponse: hasil
pemanggilanretrofit2.ExecutorCallAdapterFactory$ExecutorCallbackCall#1c95dee5
and here's what inside on onResponse on my PlayingFramgment class
private void bacaData(){
progressBar.setVisibility(View.VISIBLE);
final RecyclerView rvCategory = getActivity().findViewById(R.id.playing_daftar);
rvCategory.setLayoutManager(new LinearLayoutManager(getActivity()));
ApiInterface apiInterface = ApiClient.getRetrofit(getContext()).create(ApiInterface.class);
Call<MovieResponse> call = apiInterface.getNowPlaying();
call.enqueue(new Callback<MovieResponse>() {
#Override
public void onResponse(Call<MovieResponse> call, Response<MovieResponse> response) {
MovieResponse data = response.body();
if (data.getResults().size() == 0){
Toast.makeText(getContext(), "Maaf data yang anda cari tidak ditemukan",
Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);
} else {
rvCategory.setAdapter(new MoviesAdapter(data.getResults(), R.layout.list_movie_row, getContext()));
Log.d(TAG, "onResponse: hasil pemanggil" + call);
progressBar.setVisibility(View.GONE);
}
}
#Override
public void onFailure(Call<MovieResponse> call, Throwable t) {
Toast.makeText(getContext(), "Gagal", Toast.LENGTH_SHORT).show();
Log.d(TAG, t.toString());
progressBar.setVisibility(View.GONE);
}
});
}
i post the xml layout fragment_playing
<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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.PlayingFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.v7.widget.RecyclerView
android:id="#+id/playing_daftar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/progressMainBar"
android:layout_centerInParent="true"/>
</RelativeLayout>
fragment_playing is the part of fragment_home, and here's the code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
tools:context=".BlankFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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"
android:layout_below="#id/appbar"
android:padding="#dimen/activity_vertical_margin" />
</FrameLayout>
</LinearLayout>
and i put the fragment_home into content_main
<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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<android.support.v4.view.ViewPager
android:layout_below="#+id/toolbar"
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
content_main is the part of app_bar_main
<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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<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="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</RelativeLayout>
You should use below property so your viewPager below your upper tab. I think your viewPager have height and width both are match parent.
Since you are using RelativeLayout as root component you have to give margin top to RecyclerView:
android:layout_marginTop="104dp"
EDIT:
if you were using coordinatorLayout as Root layout, the story would be different.
EDIT
Following issues are obvious in your codes:
1- AppBarLayout in Fragment home is extra since you have already an Appbar in activitie's home layout.
2- According to android official document use CoordinatorLayout instead of RelativeLayout. By using RelativeLayout you will loose some functionality and layout management of AppBarLayout
3- Since you have just included content_main inside app_bar_main, no needs to use tools:context=".MainActivity" and tools:showIn="#layout/app_bar_main"
4- Replace RelativeLayout inside content_main by merge tag
After above changes you have just removed extra layouts which may have side effects on margins and padings, then apply attribute below to your view pager. I hope these changes will be effective and no other hidden items are alive in your code:
android:layout_marginTop="104dp"
change you Relativelayout to android.support.design.widget.CoordinatorLayout and add app:layout_behavior="#string/appbar_scrolling_view_behavior" to android.support.v7.widget.RecyclerView
Use this for app_mar_main:
<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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/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="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/appbarlayout"
android:layout_marginTop="1dp"/>
</RelativeLayout>
Try this way..
make viewpager xml code..
<?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:clickable="true"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tab_bg_color"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tlConversation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/tab_color"
app:tabMinWidth="0dp"
app:tabMode="fixed"
app:tabTextAppearance="#style/Tab_Style"
app:tabSelectedTextColor="#color/tab_color"
app:tabTextColor="#color/tab_text_color">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
after that fragement xml code for recyclerview ..
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
xmlns:tool="http://schemas.android.com/tools">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rvData"
tool:listitem="#layout/item_row_layout"
></android.support.v7.widget.RecyclerView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvEmpty"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tool:text="No data found"
android:text="#string/no_found"
android:visibility="gone"
/>
</android.support.constraint.ConstraintLayout>
after that setup view pager like this way make viewpager adapter..
private void setupViewPager(ViewPager viewPager) {
viewPagerAdapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager(),conversationId);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOffscreenPageLimit(1);
viewPager.setCurrentItem(currentItem);
}
And
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final Context context;
public ViewPagerAdapter(FragmentManager fragmentManager, Context context) {
super(fragmentManager);
this.context = context;
}
#Override
public Fragment getItem(int position) {
if(position == 0) return new ActiveConversationFragment();
if(position == 1) return new InvitedConversationFragment();
if(position == 2) return new RecentConversationFragment();
throw new IllegalStateException("Unexpected position " + position);
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
if(position == 0) return context.getString(R.string.tab_active_conversation_title);
if(position == 1) return getString(R.string.tab_invited_conversation_title);
if(position == 2) return getString(R.string.tab_recent_conversation_title);
throw new IllegalStateException("Unexpected position " + position);
}
}
after that call above method like this way set into tablayout..
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);

Recycleview scroll to a position not working inside Nestedscrollview

I have implemented a recycleview inside a nested scroll view. But recycle view scroll to position methods are not working.
Below is my sample code
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
below is the method for scrolling
RecyclerView.SmoothScroller smoothScroller = new LinearSmoothScroller(this) {
#Override
protected int getVerticalSnapPreference() {
return LinearSmoothScroller.SNAP_TO_START;
}
};
smoothScroller.setTargetPosition(pos);
recyclerView.getLayoutManager().startSmoothScroll(smoothScroller);
This is how I resolve this issue
first get recycle view position that need to scroll using below method
final float y = recyclerView.getChildAt(selectedItem.getPos()).getY();
Then scroll nested scroll view to that position
nestedScrollingView.post(new Runnable() {
#Override
public void run() {
nestedScrollingView.fling(0);
nestedScrollingView.smoothScrollTo(0, (int) y);
}
});
Don't forget to add android:fillViewport="true" on nestedscrollview
The thing is that you need to scroll the NestedScrollView, not the RecyclerView. E.g:
final float y = recyclerView.getChildAt(selectedItem.getPos()).getY();
scrollView.smoothScrollTo(0, y)
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:title="Scroll">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
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.AppBarLayout>
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Remove the NestedScrollView and add
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to your Recyclerview.Then ScrollToPosition works fine.
Try this,
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
recyclerview.scrollToPosition(position);
}
}, 200);
Use this:
yourRecyclerView.setNestedScrollingEnabled(false);
It may solve your problem.
You can use this extenstion function.
fun RecyclerView.nestedScrollTo(position:Int,nestedScrollView: NestedScrollView) {
val y = getChildAt(position).y
nestedScrollView.fling(0)
nestedScrollView.smoothScrollTo(0,y.toInt())
}
In my case, it worked like this.
Handler(Looper.getMainLooper()).postDelayed({
binding.nestedScrollView.smoothScrollTo(
0,
binding.recyclerview.measuredHeight,
500
)
// binding.nestedScrollView.scrollTo(0, binding.recyclerview.measuredHeight)
// binding.nestedScrollView.smoothScrollTo(0, binding.recyclerview.measuredHeight)
}, 50L)

RecyclerView - How to smooth scroll to top of item on a certain position inside Nested scrollview?

I implemented Recycler view, when click on recyclerview it goes to next activity but when I came back I should be back with the same position which I was clicked, like I need to scroll to specific position based on the position of the item, I have the position but I couldn't able to scroll because of nested scrollview.
How can I fix this issue?
<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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/theme_color"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="#string/app_name"
app:titleEnabled="false">
<LinearLayout
android:id="#+id/ll_report_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">
......
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/theme_color"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
.....
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</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:background="#color/palegray"
android:scrollbars="none"
android:id="#+id/nested_scroll"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palegray"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/card_header" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
In this recyclerview, I need to scroll to specific item based on the position how can I make it? I used:
recyclerview.smoothScrollToPosition(position);
But didn't worked, and I used this one also but this one also dint worked for me,
RecyclerView.SmoothScroller smoothScroller = new LinearSmoothScroller(RoleActivity.this) {
#Override protected int getVerticalSnapPreference() {
return LinearSmoothScroller.SNAP_TO_START;
}
};
smoothScroller.setTargetPosition(i);
mLayoutManager.startSmoothScroll(smoothScroller);
private int mPosition = RecyclerView.NO_POSITION;
mPosition is the certain position you want to scroll. Save this in onSaveInstanceState
#Override
public void onSaveInstanceState(Bundle outState) {
outState.putInt(SELECTED_KEY, mPosition);
}
in onCreate
if(savedInstanceState != null && savedInstanceState.containsKey(SELECTED_KEY))
{
mPosition = savedInstanceState.getInt(SELECTED_KEY);
}
Call mRecylerView.smoothScrollToPosition(mPosition) once the data to be passed to reccylerview is ready,that is after adapter.notifyDataSetChanged();

Fixed view in ViewPager's content layout, under CoordinatorLayout

My app has an Activity with TabLayout, and 3 Fragments. In Activity's layout, I have CoordinatorLayout with ViewPager. I need to animate toolbar as well.
Now In Fragments layout, I need to put a fixed TextView at the bottom.
Given below is the XML of activity and fragment.
I am facing the problem that this fixed TextView in Fragment's
layout is going under the bottom navigation bar and is scrolling also,
that I don't want.
How can achieve this ?
activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clMain"
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/AppTheme.AppBarOverlay">
<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_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#color/colorWhite"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:id="#+id/rlParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_weight="1"
android:fitsSystemWindows="true"
android:orientation="vertical">
</android.support.v4.widget.NestedScrollView>
<TextView
android:id="#+id/tvConfirmOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorDarkGreen"
android:gravity="center"
android:padding="10dp"
android:text="#string/confirm_order"
android:textColor="#color/colorWhite"
android:textSize="18sp"
android:textStyle="bold"></TextView>
</LinearLayout>
As you want this bottom fixed TextView for each fragment, it can be solved by transferring your TextView to activity.xml and adding a custom behavior to it.
So, firstly, create a class that represents custom behavior:
public class FixedBottomViewBehavior extends CoordinatorLayout.Behavior<View> {
public FixedBottomViewBehavior() {
}
public FixedBottomViewBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
//making our bottom view depends on ViewPager (or whatever that have appbar_scrolling_view_behavior behavior)
return dependency instanceof ViewPager;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
if (ViewCompat.isLaidOut(parent)) {
//attach our bottom view to the bottom of CoordinatorLayout
child.setY(parent.getBottom() - child.getHeight());
//set bottom padding to the dependency view to prevent bottom view from covering it
dependency.setPadding(dependency.getPaddingLeft(), dependency.getPaddingTop(),
dependency.getPaddingRight(), child.getHeight());
}
return false;
}
}
There is no magic here, we're just making our bottom view dependent on some view with appbar_scrolling_view_behavior (in our case it's ViewPager) and then attaching it to the bottom of CoordinatorLayout and setting some padding to dependency.
Secondly, change your activity.xml, by adding your TextView there:
<?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/clMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<TextView
android:id="#+id/tvConfirmOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorDarkGreen"
android:gravity="center"
android:padding="10dp"
android:text="#string/confirm_order"
android:textColor="#color/colorWhite"
android:textSize="18sp"
android:textStyle="bold"
app:layout_behavior="your.package.name.FixedBottomViewBehavior" />
</android.support.design.widget.CoordinatorLayout>
Make sure you've removed your TextView from fragment.xml. Don't forget also to change your.package.name.FixedBottomViewBehavior to your package name exactly.
Voila! That should work like a charm with proper toolbar animation and fixed view at the bottom.
In addition: if you don't know how to pass your OnClick event to your fragments you can follow this way in your Activity:
public interface OnConfirmOrderClickListener {
void onConfirmOrderClick(View v);
}
public Fragment getActiveFragment() {
String name = makeFragmentName(pager.getId(), pager.getCurrentItem());
return getSupportFragmentManager().findFragmentByTag(name);
}
public String makeFragmentName(int viewId, int index) {
return "android:switcher:" + viewId + ":" + index;
}
tvConfirmOrder.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Fragment current = getActiveFragment();
if (current instanceof OnConfirmOrderClickListener)
((OnConfirmOrderClickListener) current).onConfirmOrderClick(v);
}
});
Don't forget to make your fragments implements OnConfirmOrderClickListener. Hope that helps!
For those who want the button to appear only in one fragment, it's possible to use onPageChangeListener of ViewPager to make the button scroll with the ViewPager
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
updateButtonPosition(position, positionOffsetPixels);
}
});
//Move the button according to the tab you want it to be fixed.
//Here is the 3rd tab of a 3 tab viewPager, for instance
private void updateButtonPosition(int position, int positionOffsetPixels) {
int fixedRewardXPos;
if (position == 0) {
fixedRewardXPos = viewPager.getWidth() * 2 - positionOffsetPixels;
} else if (position == 1) {
fixedRewardXPos = viewPager.getWidth() - positionOffsetPixels;
} else {
fixedRewardXPos = -positionOffsetPixels;
}
//Add getLeft() to keep the button to its former position in it's fragment
aButton.setX(fixedRewardXPos + aButton.getLeft());
}

Scrolling down triggers refresh instead of revealing the toolbar

I started using the new CoordinatorLayout and I ran into this issue:
As you can see when I try to scroll down when the toolbar is partially visible and the recylcerview is at the top position it triggers the refresh event instead of pulling down the toolbar. The user has to scroll up than down again to reveal it.
Layout XML looks something like this:
activity_main.xml:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/customActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/navigation_drawer_header"
app:menu="#menu/navigation_items" />
</android.support.v4.widget.DrawerLayout>
fragment_main.xml:
<FrameLayout 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">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:padding="8dp"
android:scrollbars="none" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
Ther SwipeRefreshLayout is in a FrameLayout becuase there are more elements in the fragment in my app.
Any help would be appreciated.
maybe too late but it might help any new comers, i came up with an easy solution for that. by creating custom class that extends SwipeRefreshLayout you can use it anywhere where AppBaLayout exists follow code below
public class MySwipeLayout extends SwipeRefreshLayout implements AppBarLayout.OnOffsetChangedListener {
private AppBarLayout appBarLayout;
public MySwipeLayout(Context context) {
super(context);
}
public MySwipeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (getContext() instanceof Activity) {
appBarLayout = (AppBarLayout) ((Activity) getContext()).findViewById(R.id.appbar);
appBarLayout.addOnOffsetChangedListener(this);
}
}
#Override
protected void onDetachedFromWindow() {
if(appBarLayout!=null){
appBarLayout.removeOnOffsetChangedListener(this);
appBarLayout = null;
}
super.onDetachedFromWindow();
}
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
this.setEnabled(i == 0);
}
}
UPDATE: This issue has been fixed in the in the Support Library v23.1.1.
Seems like you have to enable/disable the SwipeRefreshLayout when the AppBarLayout offset changes, using AppBarLayout.OnOffsetChangedListener.
See https://stackoverflow.com/a/30822119/795820

Categories

Resources