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