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);
}
}

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);

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?