How to Create Nested Scroll view | Show / Hide Toolbar with Android WebView

How to Create Nested Scroll view | Show / Hide Toolbar with Android WebView

When we create a WebView, we want to view the website on the full screen even we don't want to see the toolbar also.

With Nested Scroll View, you can hide your toolbar when you browse a webpage and then the toolbar is shown when you again scroll to top.

To create a Nested Scroll view, Follow the Steps.

• Create a Nested Scroll view in XML.
• Add Scroll Flags in Toolbar
• Put Webview under Nested Scroll View.

Your XML File

 <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/main_content"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <com.google.android.material.appbar.AppBarLayout  
     android:id="@+id/appbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
     <androidx.appcompat.widget.Toolbar  
       android:id="@+id/toolbar"  
       android:layout_width="match_parent"  
       android:layout_height="?attr/actionBarSize"  
       android:background="?attr/colorPrimaryDark"  
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
       app:layout_scrollFlags="scroll|enterAlways|snap"  
       app:title="">  
     </androidx.appcompat.widget.Toolbar>  
     <ProgressBar  
       android:id="@+id/progressBar3"  
       style="?android:attr/progressBarStyleHorizontal"  
       android:layout_width="match_parent"  
       android:layout_height="3dp"  
       android:indeterminate="true"  
       android:scaleY="5.0" />  
   </com.google.android.material.appbar.AppBarLayout>  
   <androidx.core.widget.NestedScrollView  
     android:id="@+id/nestedsv"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:fillViewport="false"  
     android:fitsSystemWindows="true"  
     app:layout_behavior="@string/appbar_scrolling_view_behavior">  
     <WebView  
       android:id="@+id/webviewbrowser"  
       android:layout_width="match_parent"  
       android:layout_height="match_parent" />  
   </androidx.core.widget.NestedScrollView>  
 </androidx.coordinatorlayout.widget.CoordinatorLayout>  

Here, Your Nested Scroll View is ready. Now you can easily show/hide Toolbar while browsing a WebPage in your WebView.

 

Follow us for more posts like this, 
Subscribe to Harpreet studio on Youtube  
Like Harpreet Studio on Facebook  
Follow me on Instagram