Android Motion Layout view should come from Right to Left

Viewed 619

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.

enter image description here

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?

0 Answers
Related