How can I scroll vertically the ConstraintLayout?

Question

The content of the main activity looks like:

the main screen looks like (all this inside ConstraintLayout):

image title
date
the image itself
image description

The image description may be too long to be displayed, to fix this I can put it inside a ScrollView, and this works just fine. However, I would like to ScrollView the whole ConstraintLayout, and this is not functioning properly: cannot scroll and some TextViews do not appear!

Relevant Code:

<android.support.constraint.ConstraintLayout  
    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/desciptionScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
    tools:showIn="@layout/activity_nasa_daily_image">

 <TextView
    android:id="@+id/imageTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:text="@string/test_image_title"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <TextView
    android:id="@+id/imageDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:text="@string/test_image_date"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

 <ImageView
    android:id="@+id/imageDisplay"
    android:layout_width="368dp"
    android:layout_height="408dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="3dp"
    android:src="@mipmap/test_image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageDate" />

<TextView 
    android:id="@+id/imageDescription"
    android:layout_width="368dp"
    android:layout_height="0dp"
    android:layout_marginLeft="8dp" 
    android:layout_marginStart="8dp" 
    android:layout_marginTop="4dp" 
    android:text="@string/test_image_description" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />

</android.support.constraint.ConstraintLayout>

Angel Garcia · Accepted Answer · 2017-04-17T18:49:28.673

For making the elements in the screen scrollable I think you could use a NestedScrollView inside a CoordinatorLayout. I usually put a LinearLayout with all the elements I would display there.

For example:

<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"
    tools:context="com.xengar.android.puzzlewildanimals.ui.HelpActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

    </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">

        <android.support.constraint.ConstraintLayout  
        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/desciptionScroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
            tools:showIn="@layout/activity_nasa_daily_image">


            <TextView
                android:id="@+id/imageTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:text="@string/test_image_title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/imageDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:text="@string/test_image_date"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

            <ImageView
                android:id="@+id/imageDisplay"
                android:layout_width="368dp"
                android:layout_height="408dp"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="3dp"
                android:src="@mipmap/test_image"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDate" />

            <TextView
                android:id="@+id/imageDescription"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="4dp"
                android:text="@string/test_image_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />




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

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

If that doesn't work you can replace the ConstraintLayout with a LinearLayout. I hope that helps.

i can scroll the textview or any number of textviews together. the whole point of the question is: how can i scroll the constraintlayout as a whole — , Apr 17 '17 at 17:59
Maybe by putting the ConstraintLayout inside the NestedScrollView. — Angel Garcia, Apr 17 '17 at 18:10
I just edited my response. My suggestion is to use a NestedScrollView an inside that put all elements that would be scrollable. — Angel Garcia, Apr 17 '17 at 18:18
i tried to put a very long title in order to test if the scroller works and it did! it works. However the image description does not appear. do you have any idea why? — , Apr 17 '17 at 18:32
Besides the scrolling, it looks you're using the ConstraintLayout as a container for the TextView's and ImageView. If you use a NestedScrollView for the scrolling, then you just need a container for that. I usually use a LinearLayout for just containing all that. — Angel Garcia, Apr 17 '17 at 18:37
For the imageDescription it looks you set the size like: android:layout_width="368dp" android:layout_height="0dp" Maybe if you put it according to the string size like the others android:layout_width="wrap_content" android:layout_height="wrap_content" — Angel Garcia, Apr 17 '17 at 18:46
thanks alot! wrap_content for the image description (height) did the trick. but i don't fully understand how this solved the problem! is it because i bounded the height of the description so it won't surpass the screen? — , Apr 17 '17 at 18:59
What "wrap_content" do is resize the height according to the string size. So, the TextView is growing or contracting according to what the string needs. That's useful if the text changes like by code. You're welcome :) — Angel Garcia, Apr 17 '17 at 19:06

score 2 · Answer 2 · edited May 23 '17 at 11:54

To add scrolling to any view, you add a ScrollView. In your code, add it as the root(If the ScrolLView isn't the root and there is more content, add the ScrollView around the ConstraintLayout). move the namespaces(lines containing xmlns) to the new root. Add width and height in the ScrollView to match_parent(or whatever you have) and set the height of the ConstraintLayout to wrap_content.

However, you will not be able to scroll correctly in design mode. (reference). But it will still work as ecpected on a device.

NOTE:

If your layout doesn't scroll with a SCrollView, make sure you set the height of the ConstraintLayout to wrap_content

still does not work: there is no scroller and the title, date and description do not appear! — , Apr 17 '17 at 17:53

score 0 · Answer 3 · answered Sep 04 '19 at 15:52

0

No need to use a NestedScrollView as long as you can get the constraint layout to "extend" beyond its ScrollView parent as described in this related SO answer

answered Sep 04 '19 at 15:52

kip2

6,473
4
55
72

score -1 · Answer 4 · edited Aug 04 '19 at 17:51

-1

surrounded my constrinat-layout with a ScrollView tag and gave it the property android:isScrollContainer="true".

edited Aug 04 '19 at 17:51

Tamir Abutbul

7,301
7
25
53

answered Jan 29 '18 at 04:11

Sam

6,215
9
71
90

How can I scroll vertically the ConstraintLayout?

The content of the main activity looks like:

Relevant Code:

4 Answers4

NOTE: