title: How to show different xml layout with different component and ids in one constraintLayout with constraintSet in android
body: <p>I have a fragment that I need show and gone some XML layout into that with some steps (in this example I have 3 steps) I know simply we can include layout into parent fragment layout and just handle visible/gone layout. but I want to do it with ConstraintSet in ConstraintLayout. as I search for load another XML layout into parent XML layout both root elements in each XML layout must be constraint layout with the same component and same ids. but in my example, I have different XML layout with root element constraint layout but in each XML layout, I have different components and ids. now my question is how I can change part of my XML layout according to the step live data with another XML layout?
  we care about be smooth this layout and change layout with some animation. these are my files:</p>
  
  <p>PickupFragment:</p>
  
  <pre><code> class PickupFragment : BaseFragment&lt;FragmentPickupBinding, PickupViewModel&gt;
      (R.layout.fragment_pickup, PickupViewModel()) {
  
      private val primaryConstraintBody = ConstraintSet()
      private val parcelConstraintBody = ConstraintSet()
      private val senderConstraintBody = ConstraintSet()
      private val receiverConstraintBody = ConstraintSet()
  
  
      private val body by lazy { binding.body }
  
  
      private val pickupRequestStepObserver = Observer&lt;Int&gt; { step -&gt;
  
          when (step) {
  
              0 -&gt; parcelConstraintBody.loading(body)
              1 -&gt; senderConstraintBody.loading(body)
              2 -&gt; receiverConstraintBody.loading(body)
          }
      }
  
  
      override fun initVariables() {
          binding.viewModel = vModel
      }
  
      override fun initObserves() {
          vModel.pickupRequestStep.observe(this, pickupRequestStepObserver)
      }
  
      override fun initViews() {
  
          vModel.pickupRequestStep.value = 0
  
          primaryConstraintBody.clone(body)
          parcelConstraintBody.clone(context, R.layout.fragment_pickup_parcel)
          senderConstraintBody.clone(context, R.layout.fragment_pickup_sender)
          receiverConstraintBody.clone(context, R.layout.fragment_pickup_receiver)
  
      }
  
  }
  </code></pre>
  
  <p>fragment_pickup:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;layout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"&gt;
  
      &lt;data&gt;
  
          &lt;variable
              name="viewModel"
              type="com.chaparnet.chapar.views.pickup.PickupViewModel" /&gt;
      &lt;/data&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/body"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:id="@+id/constraintBody"
          android:layout_width="match_parent"
          android:layout_height="match_parent"&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  &lt;/layout&gt;
  </code></pre>
  
  <p>fragment_pickup_parcel:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layout 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"&gt;
  
      &lt;data&gt;
  
          &lt;variable
              name="viewModel"
              type="com.chaparnet.chapar.views.pickup.PickupViewModel" /&gt;
      &lt;/data&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:id="@+id/constraintBody"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          tools:context=".delivery_pickup.AddCargoFragment"&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_add_pickup"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="32dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_bold"
              android:text=" "
              android:textColor="@color/colorPrimary"
              android:textSize="18sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_pickup_waybill"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="40dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:text=""
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              android:visibility="gone"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_add_pickup" /&gt;
  
          &lt;EditText
              android:id="@+id/et_new_pickup_waybill"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginTop="24dp"
              android:layout_marginRight="8dp"
              android:background="@android:color/transparent"
              android:fontFamily="@font/main_medium"
              android:gravity="right"
              android:inputType="number"
              android:paddingLeft="16dp"
              android:paddingTop="16dp"
              android:paddingRight="100dp"
              android:paddingBottom="16dp"
              android:textColor="@color/darkGray"
              android:textSize="14sp"
              android:visibility="gone"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_add_pickup" /&gt;
  
          &lt;View
              android:id="@+id/view_waybill"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              android:visibility="gone"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/et_new_pickup_waybill" /&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_pickup_closed_count"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:text=" "
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_waybill" /&gt;
  
          &lt;EditText
              android:id="@+id/et_new_pickup_closed_count"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginRight="8dp"
              android:background="@android:color/transparent"
              android:fontFamily="@font/main_medium"
              android:gravity="right"
              android:inputType="number"
              android:paddingLeft="16dp"
              android:paddingTop="16dp"
              android:paddingRight="100dp"
              android:paddingBottom="16dp"
              android:text="@={viewModel.pickupClosedCount}"
              android:textColor="@color/darkGray"
              android:textSize="14sp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_waybill" /&gt;
  
          &lt;View
              android:id="@+id/view_closed_count"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/et_new_pickup_closed_count" /&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_pickup_kind_service"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:text=" "
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_closed_count" /&gt;
  
          &lt;Spinner
              android:id="@+id/spinner_new_pickup_kind_service"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginTop="14dp"
              android:layout_marginRight="100dp"
              android:paddingLeft="16dp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_closed_count" /&gt;
  
          &lt;View
              android:id="@+id/view_kind_service"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginTop="16dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_new_pickup_kind_service" /&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_pickup_kind_rent"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:text=""
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_service" /&gt;
  
          &lt;!--&lt;androidx.appcompat.widget.AppCompatSpinner
              android:id="@+id/spinner_new_pickup_kind_rent"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginTop="16dp"
              android:layout_marginRight="100dp"
              android:paddingLeft="16dp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_service" /&gt;--&gt;
  
  
          &lt;RadioGroup
              android:id="@+id/spinner_new_pickup_kind_rent"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginTop="10dp"
              android:layout_marginRight="100dp"
              android:gravity="center"
              android:orientation="horizontal"
              android:paddingLeft="16dp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_service"&gt;
  
              &lt;RadioButton
                  android:id="@+id/radio1"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_gravity="start"
                  android:layout_marginRight="16dp"
                  android:button="@null"
                  android:checked="@={viewModel.radioPasPayment}"
                  android:drawableRight="?android:attr/listChoiceIndicatorSingle"
                  android:fontFamily="@font/main_light"
                  android:layoutDirection="rtl"
                  android:text=""
                  android:textAlignment="textStart"
                  android:textSize="12sp" /&gt;
  
              &lt;RadioButton
                  android:id="@+id/radio2"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_gravity="start"
                  android:button="@null"
                  android:checked="@={viewModel.radioPishPayment}"
                  android:drawableRight="?android:attr/listChoiceIndicatorSingle"
                  android:fontFamily="@font/main_light"
                  android:layoutDirection="rtl"
                  android:text=""
                  android:textAlignment="textStart"
                  android:textSize="12sp" /&gt;
          &lt;/RadioGroup&gt;
  
          &lt;View
              android:id="@+id/view_kind_rent"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginTop="16dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_new_pickup_kind_rent" /&gt;
  
          &lt;!--&lt;TextView
              android:id="@+id/txt_text_new_service_percentage"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:tag="check_for_visibility"
              android:text="Service percent"
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              android:visibility="gone"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_rent" /&gt;
  
          &lt;EditText
              android:id="@+id/et_new_pickup_service_percentage"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginRight="8dp"
              android:background="@android:color/transparent"
              android:fontFamily="@font/main_medium"
              android:gravity="right"
              android:inputType="number"
              android:paddingLeft="16dp"
              android:paddingTop="16dp"
              android:paddingRight="100dp"
              android:paddingBottom="16dp"
              android:tag="check_for_visibility"
              android:textColor="@color/darkGray"
              android:textSize="14sp"
              android:visibility="gone"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_rent" /&gt;
  
          &lt;View
              android:id="@+id/view_kind_service_percentage"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginTop="16dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              android:tag="check_for_visibility"
              android:visibility="gone"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_new_service_percentage" /&gt;--&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_weight_of_goods"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:tag="check_for_visibility"
              android:text="weight"
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_rent" /&gt;
  
          &lt;EditText
              android:id="@+id/et_new_pickup_weight_of_goods"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginRight="8dp"
              android:background="@android:color/transparent"
              android:fontFamily="@font/main_medium"
              android:gravity="right"
              android:inputType="number"
              android:paddingLeft="16dp"
              android:paddingTop="16dp"
              android:paddingRight="100dp"
              android:paddingBottom="16dp"
              android:tag="check_for_visibility"
              android:text="@={viewModel.weightOfGoods}"
              android:textColor="@color/darkGray"
              android:textSize="14sp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_kind_rent" /&gt;
  
          &lt;View
              android:id="@+id/view_weight_of_goods"
              android:layout_width="match_parent"
              android:layout_height="@dimen/divider_height"
              android:layout_marginLeft="20dp"
              android:layout_marginTop="16dp"
              android:layout_marginRight="20dp"
              android:background="@color/lighterGray"
              android:tag="check_for_visibility"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/txt_text_new_weight_of_goods" /&gt;
  
          &lt;TextView
              android:id="@+id/txt_text_new_value_of_goods"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:layout_marginRight="16dp"
              android:fontFamily="@font/main_medium"
              android:tag="check_for_visibility"
              android:text="Value"
              android:textColor="@color/lightGray"
              android:textSize="14sp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_weight_of_goods" /&gt;
  
          &lt;EditText
              android:id="@+id/et_new_pickup_value_of_goods"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginLeft="16dp"
              android:layout_marginRight="8dp"
              android:background="@android:color/transparent"
              android:fontFamily="@font/main_medium"
              android:gravity="right"
              android:inputType="number"
              android:paddingLeft="16dp"
              android:paddingTop="16dp"
              android:paddingRight="100dp"
              android:paddingBottom="16dp"
              android:tag="check_for_visibility"
              android:text="@={viewModel.valueOfGoods}"
              android:textColor="@color/darkGray"
              android:textSize="14sp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/view_weight_of_goods" /&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  &lt;/layout&gt;
  </code></pre>
  
  <p>and two other fragments are like fragment_pickup_sender and fragment_pickup_receiver but with different components and ids. in my fragment_pickup I'll have some button with next step and the previous step for update step live data to switch XML layout. 
  may please guide me on how I must handle this</p>