Adding a constraint layout inside a vertical LinearLayout programmatically?

Question

I am trying to add layouts dynamically in my fragment. My main container is a LinearLayout inside a ScrollView. And the activity handles a viewpager with a tab layout.

I am trying to add the ContraintLayout of calc_clothers_washer.xml inside my fragment. However, all of the constraints and dimensions are reset so all the views are put on the top left of the screen. I have tried casting and used views to replace it but the result remains the same. This is the closest I have gotten so far.

This is Fragment

private ConstraintLayout calcMeasureView;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

   View view = inflater.inflate(
                R.layout.calc_base_measure_layout,
                container, false);
   ConstraintLayout baseCalcContainer = container.findViewById(R.id.base_measure_container);
   int calcId = R.layout.calc_clothes_washer;
   calcMeasureView = (ConstraintLayout)inflater
                .inflate(calcId, null);
   return view;
}

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        LinearLayout linearLayout = view.findViewById(R.id.calc_main_container);

        ConstraintLayout baseCalcContainer = view.findViewById(R.id.base_measure_container);

        linearLayout.removeView(baseCalcContainer);
        linearLayout.addView(calcMeasureView, 0);

    }

this is my calc_base_measure_layout.xml

<ScrollView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ndroid="http://schemas.android.com/apk/res-auto"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="8dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/calc_main_container">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/base_measure_container"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/blue"/>

        <include
            layout="@layout/calc_common_container" />

        <include
            android:id="@+id/include"
            layout="@layout/measure_results_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"/>

    </LinearLayout>

</ScrollView>

and this is calc_clothes_washer.xml

<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ndroid="http://schemas.android.com/tools"
    android:background="@drawable/background"
    android:id="@+id/clothes_washer_container"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <!-- How is the water heated? -->
    <TextView
        android:id="@+id/heater_source_label"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:text="Water Heating Source"
        android:textColor="@color/white"
        ndroid:layout_constraintStart_toStartOf="parent"
        ndroid:layout_constraintTop_toTopOf="parent" />

    <Spinner
        style="@style/SpinnerTheme"
        android:id="@+id/water_heating_source_dropdown"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_width="0dp"
        ndroid:layout_constraintEnd_toStartOf="@+id/water_heating_source_about"
        ndroid:layout_constraintStart_toStartOf="@+id/heater_source_label"
        ndroid:layout_constraintTop_toBottomOf="@+id/heater_source_label" />

    <ImageView
        android:id="@+id/water_heating_source_about"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_width="wrap_content"
        ndroid:layout_constraintBottom_toBottomOf="@+id/water_heating_source_dropdown"
        ndroid:layout_constraintEnd_toEndOf="parent"
        ndroid:srcCompat="@android:drawable/ic_menu_info_details" />

    <!-- How is the Dryer Heated? -->
    <TextView
        android:id="@+id/textView3"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:text="Dryer Heating Source"
        android:textColor="@color/white"
        ndroid:layout_constraintStart_toStartOf="parent"
        ndroid:layout_constraintTop_toBottomOf="@+id/water_heating_source_dropdown" />

    <Spinner
        style="@style/SpinnerTheme"
        android:id="@+id/dryer_heating_source_dropdown"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_width="0dp"
        ndroid:layout_constraintEnd_toStartOf="@+id/dryer_source_about"
        ndroid:layout_constraintStart_toStartOf="parent"
        ndroid:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageView
        android:id="@+id/dryer_source_about"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        ndroid:layout_constraintBottom_toBottomOf="@+id/dryer_heating_source_dropdown"
        ndroid:layout_constraintEnd_toEndOf="parent"
        ndroid:srcCompat="@android:drawable/ic_menu_info_details" />

    <ImageView
        android:id="@+id/qty_about"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_width="wrap_content"
        ndroid:layout_constraintBottom_toBottomOf="@+id/washer_qty_layout"
        ndroid:layout_constraintEnd_toEndOf="parent"
        ndroid:srcCompat="@android:drawable/ic_menu_info_details" />

    <!-- Washer Quantity -->
    <android.support.design.widget.TextInputLayout
        style="@style/TextInputLayout"
        android:id="@+id/washer_qty_layout"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_width="0dp"
        ndroid:layout_constraintEnd_toStartOf="@+id/dryer_source_about"
        ndroid:layout_constraintStart_toStartOf="parent"
        ndroid:layout_constraintTop_toBottomOf="@+id/dryer_heating_source_dropdown">

        <android.support.design.widget.TextInputEditText
            style="@style/EditTextViewBase"
            android:hint="@string/washer_qty"
            android:id="@+id/washer_qty"
            android:inputType="number"
            android:layout_height="wrap_content"
            android:layout_width="match_parent" />

    </android.support.design.widget.TextInputLayout>

</android.support.constraint.ConstraintLayout>

All of the views in my calc_clothes_washer.xml are shown, all of them are minimized at the top left of my screen. Any help or guidance is greatly appreciated.

Answer 1

Please check below calc_clothes_washer.xml code. It may solve your issue. If you face any issue then please let me know in comment section.

Use your own drawables and assests.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/clothes_washer_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background">

    <!-- How is the water heated? -->
    <TextView
        android:id="@+id/heater_source_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="Water Heating Source"
        android:textColor="@color/colorWhite"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Spinner
        android:id="@+id/water_heating_source_dropdown"
        style="@style/Widget.AppCompat.Spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@+id/water_heating_source_about"
        app:layout_constraintStart_toStartOf="@+id/heater_source_label"
        app:layout_constraintTop_toBottomOf="@+id/heater_source_label" />

    <ImageView
        android:id="@+id/water_heating_source_about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/water_heating_source_dropdown"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_menu_info_details" />

    <!-- How is the Dryer Heated? -->
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="Dryer Heating Source"
        android:textColor="@color/colorWhite"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/water_heating_source_dropdown" />

    <Spinner
        android:id="@+id/dryer_heating_source_dropdown"
        style="@style/Widget.AppCompat.Spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@+id/dryer_source_about"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageView
        android:id="@+id/dryer_source_about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toBottomOf="@+id/dryer_heating_source_dropdown"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_menu_info_details" />

    <ImageView
        android:id="@+id/qty_about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/washer_qty_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_menu_info_details" />

    <!-- Washer Quantity -->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/washer_qty_layout"
        style="@style/Widget.Design.TextInputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@+id/dryer_source_about"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/dryer_heating_source_dropdown">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/washer_qty"
            style="@style/EditTextTheme"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Washer Qty"
            android:inputType="number" />

    </android.support.design.widget.TextInputLayout>

</android.support.constraint.ConstraintLayout>

Please approve answer if it will work for you. Thanks!