Android ScrollView dissapearing the rest of my UI-CodePudding

I'm new to Android layout design. My problem is that when trying to add a ScrollView to my layout it disappears the rest of my UI. In the following code, when I uncomment the ScrollView, it happens the aforementioned problem.

<?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"
    tools:context=".activity.SettingActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:title="Toolbar Title" />
    </LinearLayout>

    <!--    <ScrollView-->
    <!--        android:layout_width="match_parent"-->
    <!--        android:layout_height="match_parent">-->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="70dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="1dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 1"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold" />

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:layout_width="193dp"
                android:layout_height="48dp"
                android:text="Radio 1" />

            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="Radio 2" />
        </RadioGroup>

        <View style="@style/Divider" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 2"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 2 Description"
            android:textAlignment="center" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Sub-option 2.1"
                android:textStyle="bold" />

            <EditText
                android:layout_width="135dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:autofillHints="no"
                android:ems="10"
                android:inputType="numberSigned"
                android:minHeight="48dp"
                android:text="2"
                android:textAlignment="center"
                tools:ignore="LabelFor" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Sub-option 2.2"
                android:textStyle="bold" />

            <EditText
                android:layout_width="135dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:autofillHints="no"
                android:ems="10"
                android:inputType="numberSigned"
                android:minHeight="48dp"
                android:text="3"
                android:textAlignment="center"
                tools:ignore="LabelFor" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Sub-option 2.3"
                android:textStyle="bold" />


            <EditText
                android:layout_width="135dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:autofillHints="no"
                android:ems="10"
                android:inputType="numberSigned"
                android:minHeight="48dp"
                android:text="2"
                android:textAlignment="center"
                tools:ignore="LabelFor" />

        </LinearLayout>

        <View style="@style/Divider" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 3"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 3.1"
            android:textStyle="bold" />

        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            tools:ignore="DuplicateSpeakableTextCheck" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 3.2"
            android:textStyle="bold" />

        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="48dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 3.3"
            android:textStyle="bold" />

        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="48dp" />

        <View style="@style/Divider" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Option 4"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.appcompat.widget.SwitchCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="48dp"
                android:text="Option 4.1" />


            <androidx.appcompat.widget.SwitchCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="48dp"
                android:text="txt_option_4_2" />

            <androidx.appcompat.widget.SwitchCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="48dp"
                android:text="txt_option_4_3" />
        </LinearLayout>

    </LinearLayout>

    <!--    </ScrollView>-->

</androidx.constraintlayout.widget.ConstraintLayout>

How can I add properly a ScrollView to my UI? I also feel like I could make my code much better, so I'm open to any suggestion related to it.

Note: I have omitted ids and hardcoded strings rather than using @string resource here.

CodePudding user response：

Instead of giving margins and constraints to the LinearLayout, move them to ScrollView like this:

<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="70dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="1dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <!-- Rest of the code -->

    </LinearLayout>

</ScrollView>

and change LinearLayout width and height to match_parent and wrap_content respectively. ScrollView can only have one child. Although, that's not a problem in your case but just wanna mention it out.

CodePudding user response：

It depends on how you want to arrange the relation of the children of the root ConstraintLayout. If you set them all as

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"

Then they are overlap and the later one hides all previous ones.

So, you should set them not to overlap each other by using app:layout_constraint*** attributes.

As StackOverflow is not designed as a tutorial book to technology learners, I suggest you find the document of ConstraintLayout and read it first.