Show and Hide Toolbar ActionBar on WebView Scroll in Android Java

How to Show and Hide Toolbar ActionBar when Scrolling Up/Down

I hope you are familiar with the auto hiding and showing feature of the toolbar actionbar in android, basically this is a feature that auto hides the toolbar when user scrolls up but auto shows when user scrolls down. This is a useful feature which enhances user experience by allowing user to have full screen view. This feature is kinda hard to integrate in android webview, because it caused page height issues when i tried it inside a webview with coordinator layout.

Luckily, i found a library that helps hiding and showing the toolbar or any other supported view or element in a breeze inside the webview when scrolling. This library helped me to design some cool webview apps with that feature and here is how you can implement in your WebView app. The name of the Library is observablescrollview

Webview library to Auto Show and Hide ActionBar Toolbar

First add this library into your app by adding com.github.ksoichiro:android-observablescrollview to your dependencies in build.gradle

Next, your webactivity layout file should be like this

I used a custom toolbar with a NoActionbar theme, you will have to do the same

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:override="true"
    android:animateLayoutChanges="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebActivity">

   <com.github.ksoichiro.android.observablescrollview.ObservableWebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="0dp">
        </com.github.ksoichiro.android.observablescrollview.ObservableWebView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Next, extend your Webview Activity with ObservableScrollViewCallbacks

public class WebActivity extends AppCompatActivity implements ObservableScrollViewCallbacks {

Add WebView  Scroll View Call back

webview =  findViewById(R.id.webview);
        webview.setScrollViewCallbacks(this);

Your app should use a custom toolbar and then call it

final Toolbar toolbar =  findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

Next, add the code to hide and show Toolbar

public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
  }


  public void onDownMotionEvent() {
  }

  public void onUpOrCancelMotionEvent(ScrollState scrollState) {
      ActionBar ab = getSupportActionBar();
      if (ab == null) {
          return;
      }
      if (scrollState == ScrollState.UP) {
          if (ab.isShowing()) {
              ab.hide();
              //hide();


          }
      } else if (scrollState == ScrollState.DOWN) {
          if (!ab.isShowing()) {
              ab.show();


              //  show()
          }

This is it,if you need any help in implementing it, just contact me

Related Posts

Fix Plugin [id: ‘com.android.application’, version: ‘7.1.3’, apply: false] was not found in any of the following sources

Here is how to fix Plugin [id: ‘com.android.application’, version: ‘7.1.3’, apply: false] was not found in any of the following sources This error is caused by mismatching…

Get Age from Date of Birth in Java Android

Here is how to get a user’s age from date of birth If you need get a user’s age from a given date of birth string, this…

How to Check if String Array Contains a Specific String in Android

Here is how to get a specific value or String from Array in Android To check if a string array contains a specific string, you can use…

Make Android WebView Support Razorpay Payment

How to Support Razorpay Payment and UPI in Android WebView? Android webview is inexpensive and easy way to make apps for websites. But to support some specific…

Make Android Webview Support PayTM Google Pay PhonePe UPI

GooglePay, Phonpe and PayTM support in Android WebView If you have built an android app for your new ecommerce website or any other website that needs accept…

Comment