Flickering Screen while trying to Hide and Show the Layout in case of WebView

Question

I have one LinearLayout above the WebView and I want to show and hide this layout on user scroll up and down by using animation. The problem is while using the following code to hide and show the layout the screen is showing flickering behavior. The code is:

webView.setOnScrollChangedCallback(new ObservableWebView.OnScrollChangedCallback() {
            @Override
            public void onScroll(int l, int t,int oldl, int oldt) {

                if(t > oldt+20){
                    System.out.println("Swipe UP");

                    if(topLayout.getVisibility() == View.GONE)
                        return;

                    Animation animation = new TranslateAnimation(0, 0,0, 500); //May need to check the direction you want.
                    animation.setDuration(1000);
                    animation.setFillAfter(true);
                    topLayout.startAnimation(animation);
                    topLayout.setVisibility(View.GONE);

                }
                else if(t < oldt-20){
                    System.out.println("Swipe Down");

                    if(topLayout.getVisibility() == View.VISIBLE)
                        return;

                    Animation animation = new TranslateAnimation(500, 0,500, 0); //May need to check the direction you want.
                    animation.setDuration(1000);
                    animation.setFillAfter(true);
                    topLayout.startAnimation(animation);
                    topLayout.setVisibility(View.VISIBLE);

                }
                Log.d(DEBUG_TAG,"After Scrolling "+String.valueOf(l)+" "+String.valueOf(t)+" "+String.valueOf(oldl)+" "+String.valueOf(oldt));
            }
        });

Here's the .xml:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    tools:context="logger.ap.webviewer.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/top_Layout"
        android:orientation="horizontal">
        <EditText
            android:layout_width="0dp"
            android:layout_weight="9"
            android:hint="Enter URL...."
            android:id="@+id/edt_url"
            android:maxLines="1"
            android:inputType="text"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/btn_hit"
            android:text="Send"/>
    </LinearLayout>


    <logger.ugi.webviewer.ObservableWebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/WebView" />

</LinearLayout>

While looking for a solution I have found that instead of creating one LinearLayout I can solve this issue by using "ActionBar" but still for curiosity I want to know the solution so that it may help anyone else in future.

Note: ObservableWebView is extended with WebView.

sak sak · Accepted Answer · 2018-03-20T05:04:38

Finally got the solution but by using android "Toolbar" in android. Here is the new layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/activity_main"

    tools:context="logger.ap.webviewer.MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#ababab"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter URL...."
            android:id="@+id/edt_url"
            android:maxLines="1"
            android:inputType="text"
            android:layout_marginRight="20dip"
            android:padding="5dp"
            android:background="@drawable/custom_edit"
             />
    </android.support.v7.widget.Toolbar>

    <logger.ugi.webviewer.ObservableWebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="?android:attr/actionBarSize"
        android:clipToPadding="false"
        android:scrollbarStyle="outsideOverlay"
        android:id="@+id/WebView" />

</LinearLayout>

The problem was that I was making a wrong check for scroll up and down which leads to flickering because it was a way quick check, the solution i got with toolbar is:

webView.setOnScrollChangedCallback(new ObservableWebView.OnScrollChangedCallback() {
            @Override
            public void onScroll(int l, int t, int oldl, int oldt) {

                if (t > mActionBar.getHeight() && mActionBar.isShowing()) {
                    System.out.println("Swipe UP");

                    mActionBar.hide();

                } else if (t == 0 && !mActionBar.isShowing()) {
                    System.out.println("Swipe Down");

                    mActionBar.show();

                }
                Log.d(DEBUG_TAG, "After Scrolling " + String.valueOf(l) + " " + String.valueOf(t) + " " + String.valueOf(oldl) + " " + String.valueOf(oldt));
            }
        });

Flickering Screen while trying to Hide and Show the Layout in case of WebView

1 Answers