Search code examples
androidandroid-constraintlayoutandroid-scrollview

ScrollView in ConstrainLayout scrolled wrong


I have this layout:

  <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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/bottomGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.95"/>


    <ImageView
        android:id="@+id/logo"
        android:layout_width="144dp"
        android:layout_height="52dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tvTitle"
        app:layout_constraintVertical_chainStyle="packed"
        android:src="@drawable/ic_launcher_background"/>

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="28dp"
        app:layout_constraintTop_toBottomOf="@+id/logo"
        app:layout_constraintStart_toStartOf="@id/btnGooglePlay"
        app:layout_constraintEnd_toEndOf="@id/btnGooglePlay"
        app:layout_constraintBottom_toTopOf="@id/tvText"
        app:layout_constraintVertical_chainStyle="packed"
        android:text="Title!"
        />

    <TextView
        android:id="@+id/tvText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="28dp"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="@id/btnGooglePlay"
        app:layout_constraintEnd_toEndOf="@id/btnGooglePlay"
        app:layout_constraintBottom_toTopOf="@id/scroll"
        app:layout_constraintVertical_chainStyle="packed"
        android:text="Many test about something.\nMany test about something Many test about something Many test about something"
        />

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/tvText"
        app:layout_constraintStart_toStartOf="@id/btnGooglePlay"
        app:layout_constraintEnd_toEndOf="@id/btnGooglePlay"
        app:layout_constraintBottom_toTopOf="@id/btnGooglePlay"
        app:layout_constraintVertical_chainStyle="packed"
        >

        <LinearLayout
            android:id="@+id/containerFeature"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"/>

    </ScrollView>

    <android.support.v7.widget.CardView
        android:id="@+id/btnGooglePlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        app:layout_constraintBottom_toTopOf="@id/bottomGuideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@color/colorPrimary"
        app:cardElevation="4dp"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Push this"
                android:textAllCaps="true"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_gravity="center"
                android:text="some description"
                />

        </LinearLayout>



    </android.support.v7.widget.CardView>



</android.support.constraint.ConstraintLayout>

I want the icon(R.id.logo) to be closer to the center if there are not many items in containerFeature. Like on this picture:

this

and if there are more items, icon must be closer to the top:

this

but if there are to many items, I expect that ScrollView will be work.

And I will see this:

this

If I change ScrollView attribute layout_height to "0dp" I see that all works fine, but icon always up and chainStyle="packed" have no sense for me.

What can I do to fix ScrollView behavior with chainStyle="packed?


Solution

  • By default, if a dimension of a View is set to wrap_content its constraints are not enforced when it gets too big to satisfy them. In order to change that behavior and have them enforced you need to add app:layout_constrainedHeight="true" to your ScrollView.

    Documentation:

    WRAP_CONTENT : enforcing constraints (Added in 1.1)

    If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:

    app:layout_constrainedWidth=”true|false”

    app:layout_constrainedHeight=”true|false”