Spinner item selection makes mess of views

Question

I simply made a viewpager in android studio that will show 3 fragments all have spinners but one of the three fragments when select item from spinner all views in the fragment go to the top of screen and when scroll to the other fragments of view pager some views disappear

I tried to change type of layout to linear but the same problem exist and I tried to make the fragment contains only the spinner of one item but the problem didn't solve. However when I put the xml code in a new activity the problem solved and every thing worked well.

the fragment XML file:

<?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".currency_conversion.CurrencyConversionFragment">
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    >
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/from"
            android:layout_marginStart="@dimen/_8sdp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />

        <Spinner
            android:id="@+id/sp_currency_from_currency_conversion_fg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/array_currency_codes"
            android:layout_marginStart="@dimen/_8sdp"
            app:layout_constraintStart_toEndOf="@id/textView"
            app:layout_constraintBaseline_toBaselineOf="@id/textView"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/sp_currency_from_currency_conversion_fg"
            app:layout_constraintEnd_toStartOf="@id/textView2"
            android:layout_margin="@dimen/_8sdp"
            android:src="@drawable/baseline_arrow_forward_24"
            />
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/to"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginEnd="@dimen/_8sdp"
            app:layout_constraintBottom_toBottomOf="parent"                     app:layout_constraintBaseline_toBaselineOf="@id/sp_currency_to_currency_conversion_fg"
            app:layout_constraintEnd_toStartOf="@id/sp_currency_to_currency_conversion_fg"
            />

        <Spinner
            android:id="@+id/sp_currency_to_currency_conversion_fg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/array_currency_codes"
            android:layout_marginEnd="@dimen/_8sdp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBaseline_toBaselineOf="@id/textView"
            />


    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

`