Android:Webview within Scrollview is not working properly

Question

I am trying to create a rich text editor by embedding webview in scrollview of android's relative layout. The webview displays a html file with editable divs.

<html>

<body>
<div id="editor"  contentEditable="true"></div>
</body>
</html>

The layout file:-

 <ScrollView
    android:id="@+id/blog_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="30dp"
    android:clipToPadding="false"
    android:layout_above="@+id/Footer"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
   >
    <RelativeLayout
        android:id="@+id/rlContent"
        android:layout_width="match_parent"
        android:layout_height="200px">
      <com.medicodesk.ionapp.utils.editor.RichEditor
          android:id="@+id/editor"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          />
    </RelativeLayout>
</ScrollView>

<LinearLayout
    android:id="@+id/Footer"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:visibility="invisible">

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:layout_above="@+id/blog_content"
    android:id="@+id/blog_editor_toolbar"
    >

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <ImageButton
            android:id="@+id/action_undo"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@null"
            android:contentDescription="@null"
            android:src="@drawable/undo"
            />



        <ImageButton
            android:id="@+id/action_blockquote"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@null"
            android:contentDescription="@null"
            android:src="@drawable/blockquote"
            />


    </LinearLayout>
</HorizontalScrollView>
</LinearLayout>

The RichEditor layout is weblayout child, and interacts with html by invoking javascript.

The problem is that i am not able to set the editor window height to fit into android mobile layout size. The editor will be in display mode showing all the content the user has entered or will be in editing mode where the keyboard layout pops from bottom. The editor should be scrollable vertically only. It is not clear for me whether i should rely on html scroll or android scroll view to get smooth scrolling.

Please help me.

Possible duplicate of [Android WebView inside ScrollView scrolls only scrollview](http://stackoverflow.com/questions/13257990/android-webview-inside-scrollview-scrolls-only-scrollview) — Shabbir Dhangot, Mar 03 '16 at 06:32

score 1 · Answer 1 · answered Mar 03 '16 at 06:46

Try to change your XML layout like below:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
    android:id="@+id/blog_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/Footer"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:clipToPadding="false"
    android:paddingBottom="30dp">

    <RelativeLayout
        android:id="@+id/rlContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.medicodesk.ionapp.utils.editor.RichEditor
            android:id="@+id/editor"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>
</ScrollView>

<LinearLayout
    android:id="@+id/Footer"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:visibility="invisible">

    <HorizontalScrollView
        android:id="@+id/blog_editor_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/blog_content"
        android:background="@android:color/black">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/action_undo"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="@null"
                android:contentDescription="@null"
                android:src="@drawable/undo" />


            <ImageButton
                android:id="@+id/action_blockquote"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="@null"
                android:contentDescription="@null"
                android:src="@drawable/blockquote" />


        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

I hope its helps you.

Sorry for confusion. I want to create a richtexteditor in android using webview, html div and javascript document.exec() commands. My requirement is show a webpage containing just editable document (like this below snippet)
in android activity layout (any layout). The activity should show the webpage as text-area for user to enter. When user attempts to type the keyboard opens and size of the layout will be reduced. the webpage should be scrollable as per the available size. — krishna chaitanya, Mar 03 '16 at 10:52

Android:Webview within Scrollview is not working properly

1 Answers1