How can I get a button to appear below a WebView inside a CoordinatorLayout

Question

I have a WebView inside a CoordinatorLayout and a Button below the WebView but the button never shows up. I also tried LinearLayout and FrameLayout.

I tried using a NestedScrollView instead of RelativeLayout and had the same issue, and even if I could get it to work with NestedScrollView, I can't use NestedScrollView because of other issues it has with a WebView.

So what can I do to get the Button to show up below the WebView without any scrolling?

This is my layout:

<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <WebView
            android:id="@+id/webview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"></WebView>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_below="@+id/webview"
            android:text="test"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

And this is my java code:

public class WebViewWithButton extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view_with_button);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        WebView view = (WebView) findViewById(R.id.webview);
        view.setWebViewClient(new WebViewClient());
        WebSettings settings = view.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setAllowContentAccess(true);
        settings.setAppCacheEnabled(true);
        settings.setDatabaseEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setBuiltInZoomControls(true);

        settings.setAppCacheEnabled(true);
        settings.setAppCachePath(getCacheDir().getAbsolutePath());
        settings.setDatabaseEnabled(true);
        settings.setSupportMultipleWindows(true);
        settings.setLoadWithOverviewMode(true);
        settings.setUseWideViewPort(true);
        settings.setDomStorageEnabled(true);
        settings.setAllowContentAccess(true);
        settings.setAllowFileAccess(true);
        settings.setSaveFormData(true);

        view.loadUrl("http://vimeo.com");
    }


}

EDIT: Just to clarify, I want to use the CoordinatorLayout. I know I can pull this off without it easily, the issue is only when using the CoordinatorLayout.

EDIT: My dimen file:

<resources>
    <dimen name="app_bar_height">180dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="text_margin">16dp</dimen>
</resources>

EDIT: Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

EDIT: I should mention that all I did to create this is use one of the Android Studio templates called Scrolling Activity.

Why don’t you just use a LinearLayout instead of the RelativeLayout? — natario, Jan 26 '16 at 21:00
@mntgoat - what about `FrameLayout` ? i did it and it's working, take a look at my answer. — ʍѳђઽ૯ท, Jan 26 '16 at 21:32
I'm mostly developing under Marshmallow but I think I tested it on older versions too. Either way, I need it to work on 4+ — casolorz, Jan 29 '16 at 12:55
Ok, I think I can help you, but need to look at your styles as I wrote below. — romtsn, Jan 29 '16 at 13:57
Styles added. If you want you can also create the exact same code using the scrolling activity template on android studio and then just add the `WebView` and the `Button`. From there you can start experimenting with replacing the `NestedScrollView` with whatever you think might work. — casolorz, Jan 29 '16 at 15:05
when coordinate layout if any of the options menu icon is clicked the toolbar title text is invisible please help me to display title on tool bar alsways fixed. — Harsha, Feb 01 '16 at 13:17

romtsn · Accepted Answer · 2016-01-29T16:16:41.900

Your code isn't working, because WebView is strecthing to its parent height when you load and url there, so the Button will be out of screen. You just need not to place Button under WebView, but WebView above Button using layout_above property:

<RelativeLayout
    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:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.CoordinatorLayout
        android:layout_above="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end"/>

    </android.support.design.widget.CoordinatorLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:text="test"/>

</RelativeLayout>

EDIT: I've found the way how you can do that - you just need to put your CoordinatorLayout and Button inside RelativeLayout, and make the same thing: place CoordinatorLayout above Button using layout_above property. It should work as expected. Just replace my xml above with yours.

This almost works except for it covers most of the stuff that goes below my toolbar. If I only replace the stuff inside `RelativeLayout` into my code then it doesn't work. — casolorz, Jan 29 '16 at 12:58
Post your `styles.xml` then, need to look at your `AppTheme.AppBarOverlay` and `AppTheme.PopupOverlay`. — romtsn, Jan 29 '16 at 13:00
Editted and added that. To make the example all I did was use the scrolling activity template on Android Studio and added the `WebView` into the `NestedScrollView`, and when that didn't work I tried a few other things like `RelativeLayout`, etc. — casolorz, Jan 29 '16 at 14:36
Yeap, just waiting for Stack Overflow to allow me to give it, they say I have to wait 3 hours. — casolorz, Jan 29 '16 at 16:37

ʍѳђઽ૯ท · Answer 2 · 2016-01-27T06:13:18.703

0

Try this:

<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <WebView
                android:id="@+id/webview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

    </ScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

edited Jan 27 '16 at 06:13

answered Jan 26 '16 at 21:21

ʍѳђઽ૯ท

16,646
7
53
108

Thanks for the reply. Two problems. First, I can't use `NestedScrollView` until the bugs between it and the `WebView` are fixed, for example, load vimeo.com and go all the way to the bottom, the page doesn't notice you got all the way to the bottom so it sits there without loading more content. Second issue, on your screenshot it looks like the button is overlayed on top of the `WebView`, I need it to be under. – casolorz Jan 26 '16 at 22:02
@mntgoat - You should report them to the `code.google` if you see any bugs or whatever (by the way).Updated the answer with what you exactly want. – ʍѳђઽ૯ท Jan 26 '16 at 22:15
I have reported it. I'm not sure what that solution does. I tried it with the `FrameLayout` and it didn't work, tried it without and it didn't work either. Are you using it inside the `CoordinatorLayout` because I need to use that. – casolorz Jan 26 '16 at 23:14
@mntgoat - i've updated the answer with full code.you don't have any experiences with that design.you may want to take a look: http://saulmm.github.io/mastering-coordinator/ – ʍѳђઽ૯ท Jan 27 '16 at 06:14
Thanks for the code but I copied it and it has the same two issues. The button doesn't show up until I scroll all the way to the bottom of the page and the page itself doesn't know that I've scrolled all the way down. – casolorz Jan 27 '16 at 14:41
So, you want to show it all the time like `FloatingActionButton`? – ʍѳђઽ૯ท Jan 27 '16 at 14:43
Yes but not on top of the WebView, I want it below the WebView, that is why I was trying to use RelativeLayout. – casolorz Jan 27 '16 at 15:23
Well,i did that exactly under the `WebView` btw. – ʍѳђઽ૯ท Jan 30 '16 at 21:30
when coordinate layout if any of the options menu icon is clicked the toolbar title text is invisible please help me to display title on tool bar alsways fixed. – Harsha Feb 01 '16 at 13:18
Post your codes by creating a new question or search about it first: http://stackoverflow.com/questions/27643248/android-title-wont-show-in-toolbar – ʍѳђઽ૯ท Feb 01 '16 at 13:20

How can I get a button to appear below a WebView inside a CoordinatorLayout

2 Answers2