Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NestedScrollView and WebView height issue

I use new android.support.v4.widget.NestedScrollView and I faced with issue.

Here is my layout:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7">

             <!-- some views inside -->

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin"
            />

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

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

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

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

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

I need to load html inside textView, so I make:

content.setText(Html.fromHtml(htmlString));

And it looks strange. My textview placed at the bottom of screen. initial state

After I swipe on the text it starts to look normal. after swipe

And I think textview is not only view with these issue. I tried use webview, but it even does not show content (I think due to incorrect height computation). So I need webview or textview to correct work with NestedScrollView.

P.S. If I set textview height in dp then text looks correctly, but I need wrap_content for height.

Updated 08.07.15

Finally I need to use WebView. Alex Facciorusso answer partly works, but I faced with another issue. When WebView content has some specific height then I can see part of the content, but I can't scroll down. Example: enter image description here

like image 630
IlyaEremin Avatar asked Jun 04 '15 11:06

IlyaEremin


2 Answers

Read a lot of posts, and custom implementation of WebView as well, but I was keen about experimenting with attributes and found out what works for me, which is this:

For NestedScrollView use attribute

android:fillViewport="true"

and for the underlying WebView make sure you are using height as wrap

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

so as a pseudo code you have

<NestedScrollView> // height=  match_parent

 <Parent_layout>//could be Realtive/Linear with height= match_parent
   <Some_View></Some_View>
   <Some_View></Some_View>

   <WebView></WebView> // height=  wrap_content
 </Parent_layout>

</NestedScrollView>
like image 198
sud007 Avatar answered Nov 04 '22 22:11

sud007


A simple workaround will be to add an empty View with 500dp height below your TextView inside of your LinearLayout. That View shall push up your TextView to the right position.

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

<!-- Your scrolling content -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/random_text" />

    <View
        android:layout_width="match_parent"
        android:layout_height="500dp"/>


</LinearLayout>
like image 3
eric.liu.developer Avatar answered Nov 04 '22 23:11

eric.liu.developer