HorizontalScrollView not working with ConstraintLayout when views are placed with constraints

Question

I want to make a Contraintlayout wrapped in HorizontalScrollView like this, this is the code:

    <HorizontalScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:fillViewport="true">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/black">

        <ImageView
            android:id="@+id/imageView_dis1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis2"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1"/>


            <ImageView
                android:id="@+id/imageView_dis1_pow1"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>



            <ImageView
                android:id="@+id/imageView_dis1_pow2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow1"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow3"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow2"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow4"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow3"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow5"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow4"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow6"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow5"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow7"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow6"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow8"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow7"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow9"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow8"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>

            <ImageView
                android:id="@+id/imageView_dis1_pow10"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView_dis1"
                app:layout_constraintTop_toTopOf="@id/imageView_dis1"
                app:layout_constraintStart_toEndOf="@id/imageView_dis1_pow9"
                android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
                app:layout_constraintDimensionRatio="H,1:1"/>





        <ImageView
            android:id="@+id/imageView_dis2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis3"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis1"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1"  />

        <ImageView
            android:id="@+id/imageView_dis3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis4"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis2"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />

        <ImageView
            android:id="@+id/imageView_dis4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis5"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis3"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />

        <ImageView
            android:id="@+id/imageView_dis5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis6"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis4"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />

        <ImageView
            android:id="@+id/imageView_dis6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis7"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis5"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />

        <ImageView
            android:id="@+id/imageView_dis7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/imageView_dis8"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis6"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />

        <ImageView
            android:id="@+id/imageView_dis8"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView_dis7"
            android:src="@drawable/common_google_signin_btn_icon_dark_normal_background"
            app:layout_constraintDimensionRatio="H,1:1" />


    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>

But I'm unable to scroll horizontally, the problem apparently occurs when using app:layout:contraintStart_toEndOf="ImageView" to place images horizontally, if I just place a LinearLayout it works as expected. Any idea why is this happening? I'm using constraint layout 1.1.0

I tried your and code and modified it. But the modified code does not show the complete vertical row, to view you need to scroll vertically. Is it ok? — Manish Jain, Apr 20 '18 at 10:19

score 0 · Answer 1 · answered Apr 20 '18 at 09:47

I tested the above example and came to the conclusion, that horizontal scrolling does not work if you have full vertical constraints in child views from parent top to parent bottom.

If you remove app:layout_constraintBottom_toBottomOf from @+id/imageView_dis8 or set a fixed width (or height, as the layout_constraintDimensionRatiois set) to @+id/imageView_dis1 horizontal scrolling works again - although your complete layout is then distorted.

This observation was obviously also done here

HorizontalScrollView not working with ConstraintLayout when views are placed with constraints

1 Answers1