WebView inside RecyclerView, scrolling issue - android

I have a problem with webView with is in RecyclerView item.
After click on YouTube video or twitter post, WebView is scrolled to top.
here is my layout of WebView item:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">
<WebView
android:id="#+id/postDetailItemWebView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
and here is a layout of Activity where recycler is displaying:
<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"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout ..../>
<android.support.v7.widget.RecyclerView
android:id="#+id/postDetailRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:layoutAnimation="#anim/linear_recycler_anim"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<RelativeLayout..../>
WebView content is huge and it is more than screen size, that is why it needs scrolling. I have placed it inside RecyclerView becouse I have other items like: header and footer. Is there any fix for that or I have to place WebView outside RecyclerView as full screen view?

I had the same issue with im.delight.android.webview.AdvancedWebView. And I found a solution eventually.
This options helped me:
isFocusable = false
isFocusableInTouchMode = false
I hope they'll help you too.

WebViews support scrolling and shouldn't be places inside RecyclerView, try getting the WebView outside your RecyclerView

Related

BottomSheetBehavior with ViewPager2 can't be scrolled down by nested RecyclerView scroll

I have a view that acts like BottomSheetBehavior and this view has ViewPager2 inside. Each ViewPager2's page is a vertical RecyclerView. The issue is that BottomSheet doesn't scroll down when current vertical RecyclerView (which is a page of ViewPager) can't scroll vertically anymore. Everything works file when instead of ViePager I have only one vertical RecyclerView.
The temporary solution is to wrap ViewPager with NestedScrollView but it's horrible for performance and has it's own bugs.
The original 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/core"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C7C7C7"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:elevation="8dp"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="300dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabMode="scrollable" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
[Here's how it looks (sorry for the gif quality)]
I've found a solution for this case, I set isNestedScrollingEnabled = false for inner RecyclerView so that BottomSheetBehavior finds another scrolling view
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
BottomSheetBehaviour only detects the first scrollable view. So it is always recommended to use only one scrollable view inside of it.
For More information check this answer bottomsheetbehavior-with-two-recyclerview
And this one also Scroll not working for multiple RecyclerView in BottomSheet
If you really want to have the two scrollable views I recommend you to take a look at this library also AndroidSlidingUpPanel

RecyclerView inside NestedScrollView causing slow load and/or crashing

I am working with a RecyclerView which will be used to load potentially many images and I'd like to have an actionbar above the RecyclerView like this:
But I'd also like the actionbar to only have that grayish background at the very top. If the user scrolls, it should be totally transparent like this:
I've accomplished what I wanted by using this as my layout (with one major issue):
fragment_recycler_gallery.xml
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Gray bar at top -->
<View
android:id="#+id/gray_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#null" />
<android.support.v7.widget.RecyclerView 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/recycler_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>
The NestedScrollView is key to getting my entire fragment to scroll instead of only the RecyclerView but it makes my app slow or unresponsive when loading a large set of images (500+). Is there a better way to create what I'm looking for? I've tried finding solutions but all I can find is "don't use recyclerviews inside nestedScrollViews" without any alternative solutions offered.
I'm using Glide to load the images into each ImageView(within the recyclerview) if that matters as well.
And I'm already using this on my RecyclerView as well:
mAlbumRecyclerView.setNestedScrollingEnabled(false);
Any time you use wrap_content on a RecyclerView, you're setting yourself up for performance problems. Using wrap_content completely defeats the performance improvements that you get from recycling views. So the question, then, is how you can do what you want without using wrap_content.
One thing you could do is use a FrameLayout to overlay a Toolbar on top of your RecyclerView, and then use padding on the RecyclerView (combined with android:clipToPadding="false") to make things appear to start below the actionbar. As long as your toolbar has a translucent background color, your recyclerview content will appear below it when you scroll.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"
android:clipToPadding="false"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/itemview"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#1111"
app:title="Hello world"/>
</FrameLayout>

Coordinator layout scroll flag to automatically show when the top is reached

I have a fragment which uses a coordinator layout to show an AppBarLayout and a recycler view like this:
The layout file is thus far:
<?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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="wrap_content"
app:elevation="4dp"
android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap">
<!-->Content removed<-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
The problem I'm having is that if I fling the recycler view so that the list scrolls all the way to the top, the AppBarLayout doesn't reveal unless I specifically pull down again. Is there a scroll flag to make the AppBarLayout come down when the recycler view reaches the top, as if it's attached to the first item in the recycler view?
No, transferring inertial is a known issue with nested scrolling in general, both with the platform APIs and those used by CoordinatorLayout.

Enable intertial scroll in NestedScrollView (Android Studio)

I have a NestedScrollView (part of the default Scrolling Activity) that contains a CoordinatorLayout and RecyclerView to display cards with some information. The layout is designed to allow the cards to go off-screen if there are too many and have the user scroll down to them, however for some reason the scroll does not have momentum to it as it should. I looked around and a previous question told how to disable the intertial scroll in a ScrollView (Android ScrollView disable Inertial scrolling), so I tried to do the opposite:
NestedScrollView mgScrollView = (NestedScrollView) findViewById(R.id.my_games_scroll_view);
mgScrollView.setSmoothScrollingEnabled(true);
But this didn't accomplish it. I tested mgScrollView.setVerticalScrollBarEnabled(true); to see if I was even applying the code to the right view, and so it happens the scrollbars didn't show up either. So now I'm confused as to whether I'm even applying those methods to the right view, but since I don't have any other ScrollViews I'm not sure where it should be if I am incorrect. I know I can add scrollbars in the xml itself but I haven't found xml code for inertial scrolling. Is there a way to add inertia through Java or xml?
Here is the code for content_my_games.xml, which is where the layouts for the cards go (not to be confused with activity_my_games.xml, which houses code for the CollapsingToolbarLayout and FAB)
Thanks
<?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:id="#+id/my_games_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.abhinav.sportswowandroid.MyGamesActivity"
tools:showIn="#layout/activity_my_games">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
tools:context=".MyGamesActivity">
<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=".MyGamesActivity"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
Old question, but just ran into this myself. This solved it for me:
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setNestedScrollingEnabled(false);

android - CoordinatorLayout/NestedScrollView/Hide-Show Toolbar/Issue with WebView

I have a problem with that :
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
When I scrolls in the webview, the toolbar is hidden or shown (perfect !) but there is a problem with the loading / positioning web pages.
For example, if I scrolls to the middle of a page and I click on a link, the new page that will load also be located at approximately the middle of the page instead of on top. As if scrollbars were not moving from one page to another.
if I add to the NestedScrollView:
android:fillViewport="true"
everything works with the webview (pages load and appear well although starting from the top) but I lose the Hide/Show with the toolbar :(
Do you have any idea about this problem?
Thank you in advance for your help :)
(For information : Android Design Support Library : 23.0.1)
Yop
My assumption:
Since you are putting the WebView inside a NestedScrollView the scrolling is not done on the WebView level so when you load a new page the NestedScrollView stays in the same position.
Suggestion:
create a WebViewClient and override onPageStarted here you should change the NestedScrollView scroll position to 0:
nestedScrollView.scrollTo(0, 0);

Categories

Resources