androidandroid-studioandroid-layoutandroid-constraintlayoutandroid-layout-editor

Why does the height of my Constraintlayout increase when I place it in a Scrollview?


I have a ConstraintLayout which shows all items on my smartphone without the need to scroll. Nevertheless I want to surround the ConstraintLayout with a ScrollView that a user with smaller phones can scroll.

When adding the ScrollView, even on my smartphone I need to scroll to reach the last to buttons. The height of the ConstraintLayout increases and the two buttons with id="@+id/button3" and id="@+id/button4" appear after a big empty area.

  <?xml version="1.0" encoding="utf-8"?>
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>


<androidx.constraintlayout.widget.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/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<Button
    android:id="@+id/button3"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:layout_marginStart="10dp"
    android:layout_marginBottom="16dp"
    android:drawableLeft="@drawable/ic_chevron_left_black_24dp"
    android:onClick="zurueckZuMainActivity"
    android:text="Zurück"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button4"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="16dp"
    android:drawableRight="@drawable/ic_chevron_right_black_24dp"
    android:onClick="weiter"
    android:text="Weiter"
    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Bestellformular"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="10dp"
    android:text="Schritt 1/4: Lieferadresse"
    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

<ImageView
    android:id="@+id/imageView9"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintBottom_toBottomOf="@+id/textInputLayout_vorname"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_vorname"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textInputLayout_vorname"
    app:layout_constraintVertical_bias="0.523"
    app:srcCompat="@drawable/ic_person_black_24dp" />


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_vorname"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView9"
    app:layout_constraintTop_toBottomOf="@+id/textView7"


    >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/vorname_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Vorname"
        android:inputType="textCapWords"


        />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_nachname"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/textInputLayout_vorname"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_vorname">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nachname"
        android:inputType="textCapWords"
        android:id="@+id/nachname_edit"
        />
</com.google.android.material.textfield.TextInputLayout>

<ImageView
    android:id="@+id/imageView11"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="20dp"
    app:layout_constraintBottom_toTopOf="@+id/textInputLayout_strasse"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_telefonnummer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView9"
    app:layout_constraintVertical_bias="0.587"
    app:srcCompat="@drawable/ic_phone_black_24dp" />

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_telefonnummer"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="36dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView11"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_nachname">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Telefonnummer"
        android:id="@+id/telefonnummer_edit"
        android:inputType="number"
        />
</com.google.android.material.textfield.TextInputLayout>

<ImageView
    android:id="@+id/imageView12"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="4dp"
    app:layout_constraintBottom_toBottomOf="@+id/textInputLayout_email"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_email"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_telefonnummer"
    app:layout_constraintVertical_bias="1.0"
    app:srcCompat="@drawable/ic_email_black_24dp" />

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_email"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView12"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_telefonnummer">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="E-Mail-Adresse"
        android:id="@+id/email_edit"

        />
</com.google.android.material.textfield.TextInputLayout>

<ImageView
    android:id="@+id/imageView13"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="300dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="248dp"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_strasse"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_vorname"
    app:layout_constraintVertical_bias="0.361"
    app:srcCompat="@drawable/ic_location_on_black_24dp" />


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_strasse"
    android:layout_width="0dp"
    android:layout_height="53dp"
    android:layout_marginTop="36dp"
    android:layout_marginEnd="7dp"
    android:layout_marginBottom="23dp"
    app:layout_constraintBottom_toTopOf="@+id/textInputLayout_stadt"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_nummer"
    app:layout_constraintStart_toEndOf="@+id/imageView13"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_email"
    app:layout_constraintVertical_bias="0.13">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Straße"
        android:inputType="textCapWords"

        android:id="@+id/strasse_edit"

        />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_nummer"
    android:layout_width="152dp"
    android:layout_height="53dp"
    android:layout_marginTop="34dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textInputLayout_strasse"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_email">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/nummer_edit"
        android:layout_width="163dp"
        android:layout_height="wrap_content"
        android:hint="Nummer"


        />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_plz"
    android:layout_width="108dp"
    android:layout_height="56dp"
    android:layout_marginStart="55dp"
    android:layout_marginTop="7dp"
    android:layout_marginEnd="12dp"
    app:layout_constraintEnd_toStartOf="@+id/textInputLayout_stadt"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_strasse">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="106dp"
        android:layout_height="44dp"
        android:hint="PLZ"
        android:id="@+id/plz_edit"
        android:inputType="number"

        />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout_stadt"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:layout_marginTop="7dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textInputLayout_plz"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout_nummer"
    app:layout_constraintVertical_bias="0.0">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Stadt"
        android:id="@+id/stadt_edit"
        android:inputType="textCapWords"


        />
    </com.google.android.material.textfield.TextInputLayout>

    <TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="1dp"
    android:text="Füllen Sie bitte alle nachfolgenden Felder aus! "
    app:layout_constraintBottom_toTopOf="@+id/textInputLayout_vorname"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />
    </androidx.constraintlayout.widget.ConstraintLayout>

How can I solve this?


Solution

  • Try wrapping your Buttons in their own ConstraintLayout, inside linearLayout3

    <androidx.constraintlayout.widget.ConstraintLayout
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        <Button
            android:id="@+id/button4"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="16dp"
            android:onClick="weiter"
            android:text="Weiter"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"  />
    
        <Button
            android:id="@+id/button3"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginBottom="16dp"
            android:onClick="zurueckZuMainActivity"
            android:text="Zurück"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>