Swipe layout to the middle of the screen(slide up), then swipe up or down

user_1006626 0
Viewed 1069

Need help creating a layout that looks like the explore button in google maps

  1. By clicking on the button at the bottom of the screen, the panel appears from the bottom to the ~middle of the screen(including animation)

  2. Then need to provide the ability to swipe the panel up or down

I almost got it done via MotionLayout(alpha-2), another solution is also good

<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end"
        app:duration="1000"
        app:interpolator="linear" />

    <OnSwipe
        app:touchAnchorId="@+id/container"
        app:touchAnchorSide="top"
        app:dragDirection="dragUp" />

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">
            <CustomAttribute
                app:attributeName="BackgroundColor"
                app:customColorValue="#FF00FF" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">
            <CustomAttribute
                app:attributeName="BackgroundColor"
                app:customColorValue="#00FFFF" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/half">
        <Constraint
            android:id="@id/container"
            android:layout_width="0dp"
            android:layout_height="300dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">
            <CustomAttribute
                app:attributeName="BackgroundColor"
                app:customColorValue="#00FFFF" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

Then I set the progress(but no animation)

private fun onBottomButtonClick() {
    //motionLayout.transitionToState(R.id.half) //:(
    //motionLayout.setTransition(R.id.start, R.id.end) //locks layout

    motionLayout.progress = 0.5f
}

Thanks

android-constraintlayout android-motionlayout android-animation android
2 Answers

The solution is a BottomSheetDialogFragment that almost satisfies requirements

user_10066260

Using MotionLayout and ValueAnimator for animation is a solution as follows

private fun slideToHalf() {
    if (motionLayout.progress == 0.5F) {
        return
    }
    ValueAnimator.ofFloat(motionLayout.progress, 0.5F).also {
        it.addUpdateListener { valueAnimator ->
            val progress = valueAnimator.animatedValue as Float
            motionLayout.progress = progress
        }
        it.duration = 200L
        it.interpolator = AccelerateInterpolator()
        it.start()
    }
}
user_38130780
Related