Repeating ConstraintSet's transition animation issue on BottomSheetFragment

Question

Repeating ConstraintSet's transition animation issue on BottomSheetFragment

766 views Asked by JhesterMag At 26 November 2018 at 07:35

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?

Original Q&A

There are 1 answers

**JhesterMag** · Accepted Answer · 2018-11-26 08:16:53

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

LayoutTransition transition = new LayoutTransition();
transition.setAnimateParentHierarchy(false);
layoutRoot.setLayoutTransition(transition);

TechQA.

Repeating ConstraintSet's transition animation issue on BottomSheetFragment

There are 1 answers

Related Questions in ANDROID

Related Questions in ANDROID-CONSTRAINTLAYOUT

Related Questions in ANDROID-TRANSITIONS

Related Questions in CONSTRAINTSET

Popular Questions

Popular Tags

Trending Questions