Add native footer view to webview

Question

I have a WebView and a native custom view I want to add underneath the WebView. I've tried wrapping the WebView inside a ScrollView, and while that does exactly what i want, the scrolling performance is really laggy and if a user flings the scroll tapping the screen does not stop the fling like it should.

The other approach I was thinking was to inflate the WebView into a wrapper FrameLayout with my footer view on top of the WebView, then somehow extend the WebView height to accomodate the footer size, push the footer view to the end of the WebViews height and then monitor the scroll of the WebView to move the footer with it.

I've setup the base class, my problem is extending the scrollable content in the WebView, and then pushing the footer to the bottom of the WebViews content; the main issue being that WebView isn't your typical android view and the page content load asynchronously (and thus the content size changes).

How can I extend the scrollable content of a WebView? And how can I set the native footer below the WebView content?

EDIT:

I don't actually use xml, the view is constructed in code like so:

public class WebViewWithFooter extends FrameLayout {

private ObservableWebView mWebView;//webview with scroll methods overridden for access
private FrameLayout mFooterContainer;

public WebViewWithFooter(Context context) {
    super(context);
    init();
}


public WebViewWithFooter(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}


public WebViewWithFooter(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public WebViewWithFooter(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}


private void init() {

    FrameLayout.LayoutParams footerParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM);
    FrameLayout.LayoutParams webviewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    mWebView = new ObservableWebView(getContext());

    mFooterContainer = new FrameLayout(getContext());

    addView(mWebView, webviewParams);
    addView(mFooterContainer, footerParams);
}
}

Predictor

could you show your xml layout? – Antwanantwerp

edited the code above with my class (there isn't xml as it's constructed in code) – Predictor

maybe you can consider create your custom view group whose job is to layout the web view and footer. I feel like if you want exact control of the way you described, the best bet is do layout by yourself. – Dustheap

Answer 1

Wrap a simple Webview, with a footer (LinearLayout, RelativeLayout, etc) inside an ObservableScrollView, rather than an ObservableWebView. I cannot go into details as you haven't added any layout files.

EDIT:

Activity.xml:

<LinearLayout   
   android:layout_width="match parent"  
   android:layout_height="match parent"  
   android:orientation="vertical">  
   <com.github.ksoichiro.android.observablescrollview.ObservableScrollView
           android:id="@+id/viewObj" 
           android:layout_width="match parent"  
           android:layout_height="wrap_content">
    <!-- Webview and footer programatically added here -->
    </com.github.ksoichiro.android.observablescrollview.ObservableScrollView
</LinearLayout> 

Activity.java:

FrameLayout.LayoutParams footerParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM);
FrameLayout.LayoutParams webviewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

mWebView = new WebView(getContext());
mFooterContainer = new FrameLayout(getContext());

mObservableScrollView = (ObservableScrollView) findViewbyId(R.id.viewObj);
mObservableScrollView.addView(mWebView, webviewParams);
mObservableScrollView.addView(mFooterContainer, footerParams);

Bewilderment

If you read the question properly you would have seen I have already tried and tested wrapping the webview and footer in a scrollview, and while it works, the scroll performance is very laggy, hence my request for a different approach – Predictor

Yes i saw that. From the partial code, I gathered that you are using an ObservableWebView and attaching callbacks. Instead, attach your callbacks to an ObservableScrollView. – Bewilderment

ScrollView can host only one direct child – Kennithkennon

Answer 2

I achieved this using layout xml code as follows:

    <TextView
        android:id="@+id/about_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:textAppearanceMedium"
        />

    <TextView
        android:id="@+id/readme_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/changelog_text" />
    <WebView
        android:id="@+id/readme_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:scrollbars="vertical" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.5" />

        <cu.tellistico.ImageButtonText
            android:id="@+id/btn_gift"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"

            android:contentDescription="@string/btn_donate_info"
            custom:buttonBackground="@drawable/states_orange"
            android:src="@drawable/ic_gift"
            android:text="Donar"
            android:textColor="@color/text_orange" />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.5"/>
    </LinearLayout>

</LinearLayout>

Below the blue text there is a scrollable Webview, and a button footer. Is this valid for you?

Fundament

Answer 3

If I've understood you right, you are trying to show/hide the footer when the WebView is scrolled, right? If so, I don't think you need a third party library to achieve this. You can extend the WebView and override the method onScrollChanged(). It is called when the horizontal or vertical scroll are changing. If the vertical scroll has changed and it is positive, show the footer, otherwise - hide it.

Another idea: have you tried the new design library shipped by Google? There is a convenient way to achieve such behavior for ListView or RecyclerView.

Destalinization

Answer 4

Correct me if I'm wrong, but basically you want to have your footer view at the bottom of the page and your webview take up all of the space that's left?

Why don't you just put your footer view inside a RelativeLayout with the alignParentBottom set to true, then have your WebView be above your custom view, with the height set to matchParent?

Thoron