Skip to content

Commit 025d908

Browse files
dpastordpastor
authored
Update readme (#4)
Update README.md
1 parent fbaed53 commit 025d908

File tree

1 file changed

+116
-1
lines changed

1 file changed

+116
-1
lines changed

‎README.md

Lines changed: 116 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,122 @@
66

77
# Android Nested Scroll WebView
88

9-
Android WebView implementation for nested scrolling layouts
9+
Android WebView implementation for nested scrolling layouts.
10+
11+
## Introduction
12+
13+
In case you have a native application that uses a collapsing toolbar layout, you may need to wrap your webview into a [NestedScrollingView](https://developer.android.com/reference/androidx/core/widget/NestedScrollView) to handle correctly nested scrolling to expand/collapse the toolbar.
14+
15+
This is usually done like this:
16+
```xml
17+
<androidx.core.widget.NestedScrollView
18+
android:layout_width="match_parent"
19+
android:layout_height="match_parent"
20+
app:layout_behavior="@string/appbar_scrolling_view_behavior">
21+
22+
<WebView
23+
android:id="@+id/webView"
24+
android:layout_width="match_parent"
25+
android:layout_height="match_parent"/>
26+
27+
</androidx.core.widget.NestedScrollView>
28+
```
29+
30+
You may quickly realize that **webview viewport height takes all content size height**. So, for all effects, you are using a browser window with an infinite viewport height, which has important implications:
31+
* If page content is long, this may suppose performance penalties as whole page must be rendered.
32+
* In case of scrolling pages where new content is continuously loaded as user scrolls down the page, it will trigger all these loads automatically, this could end on serious performance problems. Think about a "infinite" news feed for example.
33+
* Page content based on viewport height may be displayed wrongly. Think about on fixed footer elements for example, these will be always displayed at the end of the scrollable content.
34+
35+
If you are thinking on using the `android:fillViewport="false"` property for your NestedScrollView, you won't be able to perform any scroll on your webview content...
36+
37+
NestedScrollWebview implementation avoids this "height issue", making webview to have correct viewport size, while working with a collapsable toolbar layout.
38+
39+
## How to use it?
40+
41+
Just include directly the `NestedScrollWebView` in your layout:
42+
43+
```xml
44+
<?xml version="1.0" encoding="utf-8"?>
45+
<androidx.coordinatorlayout.widget.CoordinatorLayout
46+
xmlns:android="http://schemas.android.com/apk/res/android"
47+
xmlns:app="http://schemas.android.com/apk/res-auto"
48+
android:layout_width="match_parent"
49+
android:layout_height="match_parent">
50+
51+
<com.google.android.material.appbar.AppBarLayout
52+
android:id="@+id/app_bar"
53+
android:layout_width="match_parent"
54+
android:layout_height="@dimen/app_bar_height"
55+
android:theme="@style/Theme.NestedScrollWebViewDemo.AppBarOverlay">
56+
57+
<com.google.android.material.appbar.CollapsingToolbarLayout
58+
android:id="@+id/toolbar_layout"
59+
style="@style/Widget.MaterialComponents.Toolbar.Primary"
60+
android:layout_width="match_parent"
61+
android:layout_height="match_parent"
62+
app:contentScrim="?attr/colorPrimary"
63+
app:layout_scrollFlags="scroll|exitUntilCollapsed"
64+
app:toolbarId="@+id/toolbar">
65+
66+
<androidx.appcompat.widget.Toolbar
67+
android:id="@+id/toolbar"
68+
android:layout_width="match_parent"
69+
android:layout_height="?attr/actionBarSize"
70+
app:layout_collapseMode="pin"
71+
app:popupTheme="@style/Theme.NestedScrollWebViewDemo.PopupOverlay" />
72+
73+
</com.google.android.material.appbar.CollapsingToolbarLayout>
74+
</com.google.android.material.appbar.AppBarLayout>
75+
76+
<com.telefonica.nestedscrollwebview.NestedScrollWebView
77+
android:id="@+id/webView"
78+
android:layout_width="match_parent"
79+
android:layout_height="match_parent"
80+
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
81+
82+
</androidx.coordinatorlayout.widget.CoordinatorLayout>
83+
```
84+
85+
## Configuration
86+
87+
When expanding toolbar inside a CoordinatorLayout, instead of resizing the space left by the toolbar, it pushes down the content below.
88+
89+
This may be an issue for example for pages where a fixed footer element is displayed. So, in order to correctly resize the webview viewport on these expands you can add this attribute to the NestedScrollWebView.
90+
91+
`app:coordinatorBottomMatchingEnabled={"true"|"false"}`
92+
93+
This is disabled by default, as webview resizing is expensive.
94+
95+
```xml
96+
<com.telefonica.nestedscrollwebview.NestedScrollWebView
97+
android:id="@+id/webView"
98+
android:layout_width="match_parent"
99+
android:layout_height="match_parent"
100+
app:coordinatorBottomMatchingEnabled="true"
101+
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
102+
```
103+
104+
## How we do it?
105+
106+
Implementation extends [WebView](https://developer.android.com/reference/android/webkit/WebView) applying nested scrolling code logic from androidx.core [NestedScrollView](https://developer.android.com/reference/androidx/core/widget/NestedScrollView).
107+
108+
## Known issues, considerations and Future improvements
109+
110+
* As implementation relies on NestedScrollView touch events interception, in cases there are web content elements that intercept movement events, for example a map view or a horizontal carousel, these movement events will be interpreted also as scrolling events for nested scrolling. We are thinking on a solution to prevent this.
111+
112+
## Videos
113+
<table>
114+
<tr>
115+
<td>
116+
<video src="https://user-images.githubusercontent.com/5360064/198062480-4f3d6908-fdcf-446f-bc8c-625635b308f9.mp4" />
117+
</td>
118+
<td>
119+
<video src="https://user-images.githubusercontent.com/5360064/198062613-f77eaf9b-bf6b-48aa-b514-b86ccc910102.mp4" />
120+
</td>
121+
</tr>
122+
</table>
123+
124+
# Usage
10125

11126
To include the library add to your app's `build.gradle`:
12127

0 commit comments

Comments
 (0)