CODEWITHSUNDEEP
androidanimationkotlinbottom-sheet
Ambi
Ambi

Reputation: 503

Dynamically animate BottomSheet peekHeight

Did anyone manage to animate a BottomSheet peekHeight?

I currently do the following:

        bottom_sheet?.let {
            val behavior = BottomSheetBehavior.from(bottom_sheet)
            behavior.peekHeight = 500
            behavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }

The bottomsheet peek height is changed, but I would like to have an animation, like when you change the state from STATE_COLLAPSED to STATE_EXPANDED.

Upvotes: 9

Views: 6179

Answers (5)

Adil Khalil
Adil Khalil

Reputation: 2131

Too late here but someone looking for a simpler solution - Kotlin and ObjectAnimator.

Following will animate the bottomsheet from peekHeight 0dp to R.dimen.login_bottomSheet_peak_height for 1000ms

ObjectAnimator.ofInt(bottomSheetBehavior, "peekHeight",
            resources.getDimension(R.dimen.login_bottomSheet_peak_height).toInt())
            .apply {
                duration = 1000
                start()
            }

Upvotes: 5

Torbjörn Josefsson
Torbjörn Josefsson

Reputation: 71

I think I've gotten it to work by using ValueAnimator (C#):

private BottomSheetBehavior bsh;

public void AnimToNewHeight(int newHeight)
{
    LinearLayout bottomSheet = (LinearLayout)FindViewById(Resource.Id.bottom_sheet);
    BottomSheetBehavior behavior = BottomSheetBehavior.From(bottomSheet);

    bsh = behavior;

    ValueAnimator anim = new ValueAnimator();
    anim.SetIntValues(bsh.PeekHeight,newHeight);
    anim.SetDuration(300);
    anim.Update += Anim_Update;
    anim.Start();
}

private void Anim_Update(object sender, ValueAnimator.AnimatorUpdateEventArgs e)
{
    float f = e.Animation.AnimatedFraction;
    bsh.PeekHeight =(int)(e.Animation.AnimatedValue);
}

Upvotes: 1

Alex Facciorusso
Alex Facciorusso

Reputation: 2408

The @cora32's answer is right;

I'm just going to add something to their answer. In the case you prevented the bottom sheet to hide (with app:behavior_hideable="false" for example), using that code you will get an illegal state exception.

To animate your peekHeight in every situation, you can just do:

BottomSheetBehavior.from(bottomSheetView)?.apply {
    state = BottomSheetBehavior.STATE_EXPANDED
    peekHeight = newHeight
    state = BottomSheetBehavior.STATE_COLLAPSED
}

Upvotes: 3

cora32
cora32

Reputation: 402

I managed to animate peekHeight changing using following code:

   private fun changePeek(height: Int) {
       behavior?.state = BottomSheetBehavior.STATE_HIDDEN
       behavior?.peekHeight = height
       behavior?.state = BottomSheetBehavior.STATE_COLLAPSED
   }

Upvotes: 3

Will
Will

Reputation: 76

I was able to accomplish this by using RxJava and the Interval operator that runs every 15 milliseconds and changing the peekHeight every time the interval occurred.

val interpolator = AccelerateDecelerateInterpolator()
val refreshInterval = 20L
val refreshCount = 15L
val totalRefreshTime = (refreshInterval * refreshCount).toFloat()
val startingHeight = bottomSheetBehavior.peekHeight

animationDisposable = Observable.interval(refreshInterval, TimeUnit.MILLISECONDS)
                .take(refreshCount)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe({ count: Long ->
                    if (show) {
                        val height = (startingHeight + (maxPeekHeight - minPeekHeight) *
                                interpolator.getInterpolation((count * refreshInterval) / totalRefreshTime)).toInt()
                        if (height > maxPeekHeight) {
                            bottomSheetBehavior.peekHeight = maxPeekHeight
                        } else {
                            bottomSheetBehavior.peekHeight = height
                        }

                    } else {
                        val height = (startingHeight - (maxPeekHeight - minPeekHeight) *
                                interpolator.getInterpolation((count * refreshInterval) / totalRefreshTime)).toInt()

                        if (height < minPeekHeight) {
                            bottomSheetBehavior.peekHeight = minPeekHeight
                        } else {
                            bottomSheetBehavior.peekHeight = height
                        }
                    }
                }, { _: Throwable ->
                    //do something here to reset peek height to original
                })

Upvotes: 5

Related Questions