Expand/Collapse Toolbar pulling on a view

Question

I'm trying to create the following behavior using a CollapsingToolbarLayout and other view in bottom of the AppBarLayout but the bar isn't collapsing/expanding when I scroll/pull on the PullView, that means isn't possible to open the bar when collapsed or close using the view.

I've already tried to use NestedScrollView in the PullView root but without success

user_1316064 · Answer

I found a cool solution using the MotionLayout.

First of all, I'm extending the MotionLayout to change a bit the behavior, instead of dragging in the entire MotionLayout I only want to be possible to drag on the indicator and the menu.

TLDR: Example on Github

So my MotionLayout overrides the OnTouchEvent and checks if we're touching in one of the direct children.

class TouchableMotionLayout @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        defStyleAttr: Int = 0)
    : MotionLayout(context, attrs, defStyleAttr), MotionLayout.TransitionListener {

    private val viewRect = Rect()
    private var touchStarted = false

    init {
        initListener()
    }

    private fun initListener() {
        setTransitionListener(this)
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.actionMasked) {
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                touchStarted = false
                return super.onTouchEvent(event)
            }
        }

        if (!touchStarted) {
            touchStarted = verifyIfChildHasTouched(event)
        }

        return touchStarted && super.onTouchEvent(event)
    }

    /**
     * Verify if touching one fo the children.
     *
     * @param event The motion event.
     * @return True if touch its in one of the children.
     */
    private fun verifyIfChildHasTouched(event: MotionEvent): Boolean {
        for (index in 0 until childCount) {
            val view = getChildAt(index)
            view.getHitRect(viewRect)
            if (viewRect.contains(event.x.toInt(), event.y.toInt())) {
                return true
            }
        }

        return false
    }

    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {
        touchStarted = false
    }

    override fun allowsTransition(p0: MotionScene.Transition?) = true

    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {}

    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {}

    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {}
}

In this layout I have a viewpager and then a custom MotionLayout, it's only possible to open/close the menu swipping in the direct children of the MotionLayout i.e. menuIndicatorand menu.

And now the scene: @xml/menu_scene.xml You can adjust the drag and changing the attrsin the end.

And now the final result:

Expand/Collapse Toolbar pulling on a view

1 Answers