Search code examples
androidandroid-layoutandroid-fragmentsandroid-constraintlayoutandroid-scrollview

Android Layout problem with flexible content in a scrolling fragment


I have a problem to create a Android layout for the following case: It's a fragment with a webview on the top and some other layout components below. The webview itself should not be scrollable. The hole fragment should be scrollable. Here's an image for better visualisation.

enter image description here

The webview and the recyclerview are flexible in high depending on the content. The webview and the recylerview should always show all content without scrolling. The hole fragment should be scollable.

I tried serveral combinations of scrollview, nestedscrollview and constraint layout. But most of the time my webview wasn't shown.

My question is: How should this layout components be nested and what are the right options for component height (match_parent, ....)?

Here's an example of my latest try. The webview isn't shown.

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
    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:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:fillViewport="true"
    android:requiresFadingEdge="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"
            app:layout_constraintBottom_toTopOf="@+id/txtSimilarTopics"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/scrollToTopHelper"
            android:layout_width="100dp"
            android:layout_height="150dp"
            app:layout_constraintBottom_toBottomOf="@+id/webView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/txtSim"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"               
            android:textColor="@color/colorBlack"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/webView"
            tools:text="Ähnliche Themen" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt"
            tools:itemCount="3"
             />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Solution

  • So it was not a layout issue. My problem was caused by a JavaScript error on the webpage. That's why the page wasn't showed.