Search code examples
androidkotlinscrollview

ScrollView as element of ContraintLayout is not working in Kotlin


I have ConstraintLayout and it has header and bottom Button.

I will put ScrollView in the middle of header and bottom.

When I search I see that ScrollView should have only one element, I put LinearLayout in ScrollView.

And ScrollView has height as 0dp sine it should be extended between header and button.

However my ScrollView doesn't work.

What is the prolbem?

Please help me!

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rule_header"
        android:paddingVertical="20dp"
        app:layout_constraintBottom_toTopOf="@+id/registerScrollView"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/goBackBtn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/ic_arrow_circle_gray" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="회원가입"
            android:textSize="18dp"
            android:textStyle="bold" />

    </RelativeLayout>

    <ScrollView
        android:id="@+id/registerScrollView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:fillViewport="true"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toTopOf="@+id/registerBtn"
        app:layout_constraintTop_toBottomOf="@id/header">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingHorizontal="50dp"
            android:paddingVertical="20dp">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="vertical"
                android:paddingHorizontal="20dp"
                android:paddingVertical="10dp">

                <ImageView
                    android:id="@+id/avatarImage"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:background="@drawable/avatar_background"
                    android:clipToOutline="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/ic_user" />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/avatarButton"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:text="사진 선택"
                    android:textSize="18dp">

                </androidx.appcompat.widget.AppCompatButton>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/nameLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/nameLabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="50dp"
                    android:layout_weight="1"
                    android:text="이름"
                    android:textSize="20dp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/nameInput"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <EditText
                    android:id="@+id/nameInput"
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:inputType="text"
                    android:paddingBottom="15dp"
                    android:textSize="20dp"
                    android:theme="@style/EditTheme"
                    tools:text="신혜정" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/registerBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/default_button"
        android:text="회원가입 완료"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/registerScrollView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • If I add a bunch of ImageViews inside your main LinearLayout, so it's like this:

    <ScrollView>
        <LinearLayout>
            ...
            <ImageView/>
            <ImageView/>
            <ImageView/>
        </LinearLayout>
    </ScrollView>
    

    I get this (partially scrolled)

    A screenshot of the layout with several images in the scrollable area, large enough that it needs to be scrolled to see them all

    What are you adding that needs to be scrolled? How are you adding it? All a ScrollView really is is a FrameLayout that needs to be sized so it acts as a "window" in your UI (which you've done with the constraints), and then you put something inside it. Usually another layout with height wrap_content, and then you add stuff to that layout and its height grows. If the ScrollView is smaller than its contents, then it'll scroll.