1

I have the following MotionLayout scene:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<Transition
    android:id="@+id/dragUp"
    app:constraintSetEnd="@id/collapsed"
    app:constraintSetStart="@id/expanded">

    <OnSwipe
        app:dragDirection="dragUp"
        app:touchRegionId="@id/mlMainHeaderContainerBIG" />
</Transition>


<Transition
    android:id="@+id/dragDown"
    app:constraintSetEnd="@id/expanded"
    app:constraintSetStart="@id/collapsed">

    <OnSwipe
        app:dragDirection="dragDown"
        app:touchRegionId="@id/mlMainHeaderContainerBIG" />
</Transition>

<ConstraintSet android:id="@+id/collapsed">
    <Constraint
        android:id="@+id/cvRemoteAvatarBig"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/icBackBig" />

    <Constraint
        android:id="@+id/clDescriptions"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/cvRemoteAvatarBig" />

    <Constraint
        android:id="@+id/clColleagues"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/clDescriptions" />

    <Constraint
        android:id="@+id/tvRemoteUserNameBig"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:textAlignment="textStart"
        android:textSize="@dimen/text_size_normal_dp"
        android:layout_marginBottom="@dimen/padding_4dp"
        app:layout_constraintEnd_toStartOf="@id/icMenuBig"
        app:layout_constraintStart_toEndOf="@id/cvRemoteAvatarBig"
        app:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="20"/>
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/expanded">
    <Constraint
        android:id="@+id/cvRemoteAvatarBig"
        android:layout_width="@dimen/avatar_size_128dp"
        android:layout_height="@dimen/avatar_size_128dp"
        android:layout_margin="@dimen/padding_8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tvRemoteUserNameBig" />

    <Constraint
        android:id="@+id/clDescriptions"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@id/cvRemoteAvatarBig" />

    <Constraint
        android:id="@+id/clColleagues"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@id/clDescriptions" />

    <Constraint
        android:id="@+id/tvRemoteUserNameBig"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/padding_4dp"
        app:layout_constraintEnd_toStartOf="@id/icMenuBig"
        app:layout_constraintStart_toEndOf="@id/icBackBig"
        app:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="24"/>
    </Constraint>
</ConstraintSet>

This is my motion Layout:

<androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/mlMainHeaderContainerBIG"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="@{props.isAddressableLayoutVisible ? View.VISIBLE : View.GONE}"
        app:layoutDescription="@xml/addressable_header_bar_scene"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/clMainHeaderContainer"
        tools:visibility="visible">

        <ImageView
            android:id="@+id/icBackBig"
            android:layout_width="wrap_content"
            android:layout_height="52dp"
            android:layout_marginLeft="@dimen/padding_4dp"
            android:paddingStart="@dimen/padding_8dp"
            android:paddingTop="@dimen/padding_12dp"
            android:paddingEnd="@dimen/padding_24dp"
            android:paddingBottom="@dimen/padding_12dp"
            android:src="@drawable/ic_arrow_back_white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/white" />

        <ImageView
            android:id="@+id/icMenuBig"
            android:layout_width="wrap_content"
            android:layout_height="52dp"
            android:layout_marginRight="@dimen/padding_16dp"
            android:paddingLeft="@dimen/padding_12dp"
            android:paddingTop="@dimen/padding_12dp"
            android:paddingRight="@dimen/padding_8dp"
            android:paddingBottom="@dimen/padding_12dp"
            android:src="@drawable/dots_3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/white" />

        <TextView
            android:id="@+id/tvRemoteUserNameBig"
            style="@style/xelionTextNormal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/padding_4dp"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="1"
            android:paddingLeft="@dimen/padding_8dp"
            android:paddingTop="@dimen/padding_8dp"
            android:paddingRight="@dimen/padding_8dp"
            android:text="@{props.name}"
            android:textColor="@color/white"
            android:textSize="24dp"
            app:layout_constraintEnd_toStartOf="@id/icMenuBig"
            app:layout_constraintStart_toEndOf="@id/icBackBig"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.cardview.widget.CardView
            android:id="@+id/cvRemoteAvatarBig"
            android:layout_width="@dimen/avatar_size_128dp"
            android:layout_height="@dimen/avatar_size_128dp"
            android:layout_margin="@dimen/padding_8dp"
            android:paddingTop="@dimen/padding_8dp"
            app:cardCornerRadius="@dimen/icon_rounded_corners"
            app:cardElevation="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvRemoteUserNameBig">

            <ImageView
                android:id="@+id/ivRemoteAvatarImageViewBig"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:callInboxAvatarSource="@{props.avatarSource}" />

            <ImageView
                android:id="@+id/ivRemoteStatusIconViewBig"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/ic_dial_unknown_status"
                android:visibility="@{props.statusVisible ? View.VISIBLE : View.GONE}"
                app:statusAvatar="@{props.addressablePresenceInfoAvatar}" />
        </androidx.cardview.widget.CardView>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/clDescriptions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/padding_8dp"
            android:paddingTop="@dimen/padding_8dp"
            android:paddingRight="@dimen/padding_8dp"
            android:paddingBottom="@dimen/padding_4dp"
            android:visibility="@{props.clDescriptionsVisible ? View.VISIBLE : View.GONE}"
            app:layout_constraintTop_toBottomOf="@id/cvRemoteAvatarBig">

            <TextView
                android:id="@+id/tvRemoteUserDescBig"
                style="@style/xelionTextNormal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:padding="@dimen/padding_4dp"
                android:text="@{props.descriptionBig}"
                android:textColor="@color/white"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="1"
                app:setBackground="@{props.tvRemoteUserDescRes}" />

            <TextView
                android:id="@+id/tvRemoteUserJobTitleBig"
                style="@style/xelionTextNormal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:padding="@dimen/padding_4dp"
                android:text="@{props.jobTitleBig}"
                android:textColor="@color/white"
                android:visibility="@{props.jobTitleVisible ? View.VISIBLE : View.GONE}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tvRemoteUserDescBig"
                app:layout_constraintWidth_percent="1" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/clColleagues"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/padding_8dp"
            android:paddingTop="@dimen/padding_4dp"
            android:paddingRight="@dimen/padding_8dp"
            android:paddingBottom="@dimen/padding_8dp"
            android:visibility="@{props.clColleaguesVisible ? View.VISIBLE : View.GONE}"
            app:layout_constraintTop_toBottomOf="@id/clDescriptions">

            <TextView
                android:id="@+id/hadContact"
                style="@style/xelionTextNormal"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:text="@{props.hadContactOrEmployees}"
                android:textColor="@color/white"
                android:textStyle="bold"
                app:layout_constraintEnd_toStartOf="@id/colleagues"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/colleagues"
                style="@style/xelionTextNormal"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:text="@string/colleagues"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:visibility="@{props.clSecondVisible ? View.VISIBLE : View.GONE}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.5" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.motion.widget.MotionLayout>

But when I swipe the view for "dragDown" sometimes the view is not all animatedm onTransitionComplete is called but view is half way. why?

rosu alin
  • 5,674
  • 11
  • 69
  • 150
  • Confused: you have: up=(expanded-> collapsed) down=(collapsed-> expanded) That is the same transition. Suspect it is getting confused. Remove one of the transitions? – hoford Mar 20 '23 at 23:06
  • tried with one but still the same. Could if be something related to the view of "Expanded" is "wrap_content" and if I swipe fast, doesn't have time to calculate height properly :-? – rosu alin Mar 21 '23 at 08:49
  • Simplify to something that can be run. (all the references etc make it impossible to test) – hoford Mar 22 '23 at 05:25

1 Answers1

0

Changing the font size with a custom attribute will not be noticed by the layout. If you are using fixed font sizes then you know what the wrap content size will be you can bake it into the layout. (not very convenient)

It is also a problem because it will require a new font on every frame of the transition! This will be slow on low end devices.

ConstraintLayout Library has a Custom View MotionLabel which allows you to pick a base font size (scaleFromTextSize)and scale it by converting it into paths and scaling them. It will not work with emojis.

layout:

  <androidx.constraintlayout.utils.widget.MotionLabel
        android:id="@+id/label"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="32dp"
        android:textColor="#FF760D"
        app:scaleFromTextSize="40sp"
        app:layout_constraintDimensionRatio="16:9"
        android:text="MotionLabel"
        android:textSize="90sp"
        android:background="@drawable/blue_grad"
        />

motionScene:

<MotionScene  >
 
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/label">
            <CustomAttribute
                motion:attributeName="textSize"
                motion:customPixelDimension="10sp" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@id/label">
            <CustomAttribute
                motion:attributeName="textSize"
                motion:customPixelDimension="16sp" />
        </Constraint>
    </ConstraintSet>
 
</MotionScene>
hoford
  • 4,918
  • 2
  • 19
  • 19
  • This works for me and changes the font accordingly. That is not my issue. My issue is that if I swipe down fast, to expand it, I remain with just half of the view. (It stops there) If for example I keep my finger no the screen, I go to half, and I leave my finger -> It will collapse or expand based on progress (This is done automatically) However if I swipe fast -> onTransitionComplete is called , if I check programmatically "progress" shows 100, but view is in between my stages – rosu alin Mar 21 '23 at 15:28