I am new to motion layout. It is working in but not as expected.
What I want to achieve is that I have one input layout and next button on the screen and when we tap on the next button it should hide the input layout and show another view where the user can enter some field as shown in the below gif.
So the next section called remark to look like it is coming from top to bottom but I want it as it should come from the right side.
Here is my XML code:
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="@dimen/content_padding"
app:layoutDescription="@xml/v2v_motionscene">
<TextView
android:id="@+id/recipientEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{email}"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="demo@gmail.com" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/noteInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/content_padding"
android:hint="Remark"
android:visibility="visible"
app:errorEnabled="true"
app:errorIconDrawable="@null"
tools:visibility="visible"
app:helperTextEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/noteEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="text"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="helperTextView, money_input"
tools:visibility="gone" />
<TextView
android:id="@+id/amountView"
android:layout_width="match_parent"
android:layout_height="@dimen/transferAmountHeight"
android:gravity="center"
android:maxLines="1"
android:text="@{amount}"
android:textAppearance="?attr/textAppearanceHeadline4"
app:autoSizeTextType="uniform"
tools:text="$0.00"
tools:visibility="visible" />
<TextView
android:id="@+id/helperTextView"
goneWhen="@{helperText == null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@{helperText}"
android:textAppearance="?attr/textAppearanceCaption"
android:textColor="@color/color_error"
app:layout_constraintTop_toBottomOf="@+id/amountView"
tools:visibility="visible" />
<com.varomoney.bank.presentation.view.MoneyInput
android:id="@+id/money_input"
android:layout_width="match_parent"
android:layout_height="0dp"
android:enabled="true"
app:layout_constraintBottom_toTopOf="@+id/button_next"
app:layout_constraintTop_toBottomOf="@+id/helperTextView"
tools:visibility="visible" />
<include
android:id="@+id/button_next"
layout="@layout/epoxy_action_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
Here is my motionsense file:
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/starting_set"
motion:constraintSetEnd="@+id/ending_set"
motion:duration="500">
<OnSwipe
motion:dragDirection="dragRight" />
</Transition>
<ConstraintSet android:id="@+id/starting_set">
<Constraint android:id="@+id/amountView"
motion:layout_constraintTop_toBottomOf="@+id/recipientEmail"
android:layout_width="match_parent"
android:layout_height="@dimen/transferAmountHeight"
android:layout_marginTop="@dimen/content_padding"
app:autoSizeMaxTextSize="34sp"
app:autoSizeMinTextSize="8sp">
</Constraint>
<Constraint android:id="@+id/noteInputLayout"
android:visibility="gone">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/ending_set">
<Constraint android:id="@+id/amountView"
android:layout_width="0dp"
android:layout_height="28sp"
motion:layout_constraintStart_toEndOf="@+id/recipientEmail"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.8"
android:textSize="28sp">
</Constraint>
<Constraint android:id="@+id/money_input"
android:visibility="gone">
</Constraint>
<Constraint android:id="@+id/helperTextView"
android:visibility="gone">
</Constraint>
<Constraint android:id="@+id/noteInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf="@+id/button_next"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="@+id/recipientEmail"
android:visibility="visible">
</Constraint>
</ConstraintSet>
</MotionScene>
Am I missing something? or how should I achieve this?
