Nsryjdtyk

I wanted to animate the layout changes on BottomSheetFragment upon clicked. I implemented the ConstraintSet.applyTo and TransitionManager.beginDelayedTransition to change the initial scene to final scene. But when transition occurs, it seems the animation is repeating. Sample output at the bottom.

BottomSheetFragment.java

ConstraintSet constraintSet;

boolean isSelected = false;



@BindView(R.id.container_root) ConstraintLayout layoutRoot;

@BindView(R.id.ic_leave_date)  ImageView ivLeaveDate;

@BindView(R.id.ic_date_filed)  ImageView ivDateFiled;



@Override

public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {

    super.onViewCreated(view, savedInstanceState);

    LayoutTransition transition = new LayoutTransition();

    transition.setAnimateParentHierarchy(false);

    layoutRoot.setLayoutTransition(transition);

}



@OnClick(R.id.layout1)

public void openLeaveDate(){

    TransitionDrawable bgTransition = (TransitionDrawable) layoutLeaveDate.getBackground();

    TransitionDrawable ivTransition = (TransitionDrawable) ivLeaveDate.getBackground();



    if(isSelected){

        isSelected = false;

        bgTransition.reverseTransition(300);

        ivTransition.resetTransition();

        constraintSet = new ConstraintSet();

        constraintSet.clone(getActivity(), R.layout.bottom_sheet_filter_leave);



        TransitionManager.beginDelayedTransition(layoutRoot);

        constraintSet.applyTo(layoutRoot);

    }else{

        isSelected = true;

        bgTransition.startTransition(300);

        ivTransition.startTransition(300);

        constraintSet = new ConstraintSet();



        constraintSet.clone(getActivity(), R.layout.layout_bottom_date_filed);

        TransitionManager.beginDelayedTransition(layoutRoot);

        constraintSet.applyTo(layoutRoot);

    }

}

bottom_sheet_filter_leave.xml

<?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"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/container_root"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">





    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_leave_date"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:background="@transition/bg_transition"

       android:clickable="true"

       android:focusable="true"

       android:paddingStart="24dp">



       <ImageView

           android:id="@+id/ic_leave_date"

           android:layout_width="24dp"

           android:layout_height="match_parent"

           android:src="@transition/ic_leave_date_transition"/>



       <TextView

           android:id="@+id/label_leave_date"

           style="@style/TextAppearance.Content.Bold.Black"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="@string/leave_date"

           app:layout_constraintBottom_toTopOf="@+id/guide_leave_date"

           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="All"

           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"

           app:layout_constraintTop_toBottomOf="@+id/guide_leave_date"/>



       <android.support.constraint.Guideline

           android:id="@+id/guide_leave_date"

           android:layout_width="match_parent"

           android:layout_height="1dp"

           android:orientation="horizontal"

           app:layout_constraintGuide_percent="0.5"/>

    </android.support.constraint.ConstraintLayout>





    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout1"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:background="@transition/bg_transition"

       android:paddingEnd="24dp"

       android:paddingStart="24dp"

       android:visibility="visible"

       app:layout_constraintTop_toBottomOf="@+id/layout_leave_date">



       <ImageView

           android:id="@+id/ic_date_filed"

           android:layout_width="24dp"

           android:layout_height="24dp"

           android:background="@transition/ic_date_filed_transition"

           app:layout_constraintTop_toTopOf="parent"

           app:layout_constraintBottom_toBottomOf="parent"/>



       <TextView

           android:id="@+id/label_date_filed"

           style="@style/TextAppearance.Content.Bold.Black"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="@string/date_filled"

           app:layout_constraintBottom_toTopOf="@+id/guide_date_filed"

           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="All"

           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"

           app:layout_constraintTop_toBottomOf="@+id/guide_date_filed"/>



       <android.support.constraint.Guideline

           android:id="@+id/guide_date_filed"

           android:layout_width="match_parent"

           android:layout_height="1dp"

           android:orientation="horizontal"

           app:layout_constraintGuide_percent="0.5"/>

    </android.support.constraint.ConstraintLayout>







    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_all_date_filed"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:clickable="true"

       android:focusable="true"

       android:paddingEnd="0dp"

       android:paddingStart="12dp"

       android:visibility="gone"

       app:layout_constraintTop_toBottomOf="@+id/layout1">



       <RadioButton

           android:id="@+id/rb_all_date_filed"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintTop_toTopOf="parent"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="12dp"

           android:text="@string/all"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@id/rb_all_date_filed"

           app:layout_constraintTop_toTopOf="parent"/>



    </android.support.constraint.ConstraintLayout>



    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_input_date_filed"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:clickable="true"

       android:focusable="true"

       android:paddingEnd="0dp"

       android:paddingStart="12dp"

       android:visibility="gone"

       app:layout_constraintTop_toBottomOf="@+id/layout_all_date_filed">



       <RadioButton

           android:id="@+id/rb_input_date_filed"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintTop_toTopOf="parent"/>



       <EditText

           android:id="@+id/txt_date_filed_start"

             style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           android:layout_marginStart="12dp"

           android:drawableEnd="@drawable/ic_calendar_orange"

           android:hint="@string/mm_dd_yy"

           android:singleLine="true"

           android:textSize="13sp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/rb_input_date_filed"

           app:layout_constraintTop_toTopOf="parent" />



       <View

           android:id="@+id/view_divider_date_filed"

           android:layout_width="10dp"

           android:layout_height="1dp"

           android:layout_marginStart="15dp"

           android:background="@color/gray"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/txt_date_filed_start"

           app:layout_constraintTop_toTopOf="parent"/>



       <EditText

           android:id="@+id/txt_date_filed_end"

        style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           android:layout_marginStart="15dp"

           android:hint="@string/mm_dd_yy"

           android:singleLine="true"

           android:drawableEnd="@drawable/ic_calendar_orange"

           android:textSize="13sp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/view_divider_date_filed"

           app:layout_constraintTop_toTopOf="parent" />



      </android.support.constraint.ConstraintLayout>

layout_bottom_date_filed.xml

<?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"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">





    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_leave_date"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:background="@transition/bg_transition"

       android:clickable="true"

       android:focusable="true"

       android:visibility="gone"

       android:paddingStart="24dp">



       <ImageView

           android:id="@+id/ic_leave_date"

           android:layout_width="24dp"

           android:layout_height="match_parent"

           android:src="@transition/ic_leave_date_transition"/>



       <TextView

           android:id="@+id/label_leave_date"

           style="@style/TextAppearance.Content.Bold.Black"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="@string/leave_date"

           app:layout_constraintBottom_toTopOf="@+id/guide_leave_date"

           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="All"

           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"

           app:layout_constraintTop_toBottomOf="@+id/guide_leave_date"/>



       <android.support.constraint.Guideline

           android:id="@+id/guide_leave_date"

           android:layout_width="match_parent"

           android:layout_height="1dp"

           android:orientation="horizontal"

           app:layout_constraintGuide_percent="0.5"/>

    </android.support.constraint.ConstraintLayout>





    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout1"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:background="@transition/bg_transition"

       android:paddingEnd="24dp"

       android:paddingStart="24dp"

       android:visibility="visible"

       app:layout_constraintTop_toBottomOf="@+id/layout_leave_date">



       <ImageView

           android:id="@+id/ic_date_filed"

           android:layout_width="24dp"

           android:layout_height="24dp"

           android:background="@transition/ic_date_filed_transition"

           app:layout_constraintTop_toTopOf="parent"

           app:layout_constraintBottom_toBottomOf="parent"/>



       <TextView

           android:id="@+id/label_date_filed"

           style="@style/TextAppearance.Content.Bold.Black"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="@string/date_filled"

           app:layout_constraintBottom_toTopOf="@+id/guide_date_filed"

           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="24dp"

           android:text="All"

           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"

           app:layout_constraintTop_toBottomOf="@+id/guide_date_filed"/>



       <android.support.constraint.Guideline

           android:id="@+id/guide_date_filed"

           android:layout_width="match_parent"

           android:layout_height="1dp"

           android:orientation="horizontal"

           app:layout_constraintGuide_percent="0.5"/>

    </android.support.constraint.ConstraintLayout>







    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_all_date_filed"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:clickable="true"

       android:focusable="true"

       android:paddingEnd="0dp"

       android:paddingStart="12dp"

       app:layout_constraintTop_toBottomOf="@+id/layout1">



       <RadioButton

           android:id="@+id/rb_all_date_filed"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintTop_toTopOf="parent"/>



       <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_marginStart="12dp"

           android:text="@string/all"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@id/rb_all_date_filed"

           app:layout_constraintTop_toTopOf="parent"/>



    </android.support.constraint.ConstraintLayout>



    <android.support.constraint.ConstraintLayout

       android:id="@+id/layout_input_date_filed"

       android:layout_width="match_parent"

       android:layout_height="54dp"

       android:clickable="true"

       android:focusable="true"

       android:paddingEnd="0dp"

       android:paddingStart="12dp"

       app:layout_constraintTop_toBottomOf="@+id/layout_all_date_filed">



       <RadioButton

           android:id="@+id/rb_input_date_filed"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintTop_toTopOf="parent"/>



       <EditText

           android:id="@+id/txt_date_filed_start"

             style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           android:layout_marginStart="12dp"

           android:drawableEnd="@drawable/ic_calendar_orange"

           android:hint="@string/mm_dd_yy"

           android:singleLine="true"

           android:textSize="13sp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/rb_input_date_filed"

           app:layout_constraintTop_toTopOf="parent" />



       <View

           android:id="@+id/view_divider_date_filed"

           android:layout_width="10dp"

           android:layout_height="1dp"

           android:layout_marginStart="15dp"

           android:background="@color/gray"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/txt_date_filed_start"

           app:layout_constraintTop_toTopOf="parent"/>



       <EditText

           android:id="@+id/txt_date_filed_end"

        style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"

           android:layout_width="wrap_content"

           android:layout_height="0dp"

           android:layout_marginStart="15dp"

           android:hint="@string/mm_dd_yy"

           android:singleLine="true"

           android:drawableEnd="@drawable/ic_calendar_orange"

           android:textSize="13sp"

           app:layout_constraintBottom_toBottomOf="parent"

           app:layout_constraintStart_toEndOf="@+id/view_divider_date_filed"

           app:layout_constraintTop_toTopOf="parent" />



      </android.support.constraint.ConstraintLayout>

Here's what it looks like:

Update:

I tried applying this setup to other fragment (not BottomSheetFragment), the animation seems working properly. Maybe it has something to do with BottomSheetFragment?

I solved it by removing these lines on OnViewCreated():

LayoutTransition transition = new LayoutTransition();

transition.setAnimateParentHierarchy(false);

layoutRoot.setLayoutTransition(transition);