Tuesday, September 3, 2013

Hiding Bottom Actionbar During Scrolling

Google introduced a design pattern of hiding the bottom Actionbar when the user is scrolling.  When the scrolling stops, the Actionbar is displayed.  The Google Plus app was the first app I saw use this pattern.  It is easy to add to your existing WebView.  This post assumes you already have an Actionbar setup at the bottom of your WebView.  If not, check out this post for a simple way to implement one in your layout.

The steps to implement are

  • Create an ObservableWebView
  • Modify WebView layout to use ObservableWebView
  • Add code in your Activity

Create an ObservableWebView


 The original code for this class can be found in this StackOverflow question 

public class ObservableWebView extends WebView
{
    private OnScrollChangedCallback mOnScrollChangedCallback;

    public ObservableWebView(final Context context)
    {
        super(context);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs)
    {
        super(context, attrs);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs, final int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        if(mOnScrollChangedCallback != null) 
     {
         mOnScrollChangedCallback.onScroll(l, t);
     }
    }

    public OnScrollChangedCallback getOnScrollChangedCallback()
    {
        return mOnScrollChangedCallback;
    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback onScrollChangedCallback)
    {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

    /**
     * Impliment in the activity/fragment/view that you want to listen to the webview
     */
    public static interface OnScrollChangedCallback
    {
        public void onScroll(int l, int t);
    }
}

Modify WebView Layout 

 The modification is to use the ObservableWebView by name in the layout.

  
   
  
  
   
       
       
       
       
       
   
  

Add Code In Activity 

 I added code where I was setting up the WebView to have an OnScrollChangedCallback()

webView.setOnScrollChangedCallback(new OnScrollChangedCallback(){
            public void onScroll(int l, int t)
            {
             
             String url = content.getUrl().toString();
             float newY = webView.getScrollY();
                //Log.d("WebViewActivity", "newY: " +newY);
                //Log.d("WebViewActivity", "yPosition: " +yPosition);
             if(url.contains(getString(R.string.search)) || url.contains(getString(R.string.html_ext)))
                {
              hideToolbar();
                }
                else if(newY >= yPosition)
               {
                //hide layout
                hideToolbar();
               }
               else
               {
                //show toolbar
                showToolbar();
               }
               yPosition = newY;
            }
         });

The code for showToolbar() and hideToolbar() are below.



    private void hideToolbar()
    {
     RelativeLayout relLayout = (RelativeLayout)findViewById(R.id.relativeLayout1);
        int visibility = relLayout.getVisibility();

        if(visibility == View.VISIBLE)
        {
            relLayout.setVisibility(View.GONE);
        }
    }
    
    private void showToolbar()
    {
     RelativeLayout relLayout = (RelativeLayout)findViewById(R.id.relativeLayout1);
        int visibility = relLayout.getVisibility();
        if(visibility == View.GONE)
        {
            relLayout.setVisibility(View.VISIBLE);
        }
    }

You can get the code from our repository in GitHub. Connexions for Android is available in the Google Play Store.