How to expand the ScrollView vertically if the height is smaller than the screen in Android? (xml / programmatically)

Question

I'm new to Android and I need to use a ScrollView to wrap my whole content, since in some cases it needs to take up more height than is available on the screen. Most of the cases though, the height of the content is smaller than the screen. The ScrollView will almost always have a background color (not white), which needs to fill the whole screen available, not just wrap the content. I've checked a few other topics related to this, but the answers were outdated and none of them seems to solve the issue or even focuses on the question asked.

Extra details: Inside the ScrollView there is a RelativeLayout which encapsulates the content, as there can be only one element inside a ScrollView.

Please limit the answers to Java for Android Studio or XML configuration, if they don't use a programmatic approach, neither Kotlin, nor any other language used for Android programming. Thank you in advance!

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/detailed_scroll_view"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:fillViewport="true">

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

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

      <ImageView
        android:id="@+id/product_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/product_image"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

      <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/details_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/details_container_background"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:elevation="10dp"
        android:translationY="-50dp"
        android:visibility="invisible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/product_image">

        <TextView
          android:id="@+id/product_name"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:paddingBottom="20dp"
          android:textSize="25sp"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

        <TextView
          android:id="@+id/description"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/product_name" />

      </androidx.constraintlayout.widget.ConstraintLayout>

      <GridLayout
        android:id="@+id/params_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/details_container"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <View
          android:id="@+id/param_calories"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:adjustViewBounds="true"
          android:background="@drawable/param_with_icon"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      </GridLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>


    <com.google.android.material.progressindicator.CircularProgressIndicator
      android:id="@+id/spinner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:indeterminate="true"
      app:indicatorColor="@android:color/background_dark"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  </RelativeLayout>

</ScrollView>

Answer 1

Your problem is really about how you set the widths and heights.

• MATCH_PARENT - As big as parent's container.
• WRAP_CONTENT - As big as child's container or default width/height.

<!-- As big as specified container or device screen if it has no container -->
<ScrollView
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ...
    >

    <!-- As big as the ScrollView -->
    <RelativeLayout
        android:id="@+id/detailed_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">