Develop Reference

Android CoordinatorLayout with AppbarLayout Double Fling Bug

AppbarLayout has a big child, so we can drag and fling it.
It goes wrong when I fling appbar with its child first and fling scrollview before previous fling animation is finished.
The scrolling then became a mess when double flinging occured on both appbar and nestedscrollview
Here is the layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$Behavior"
>
<View
android:layout_width="match_parent"
android:layout_height="800dp"
android:background="#8f8"
app:layout_scrollFlags="scroll"
/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="800dp"
android:background="#88f" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I have the same problem with RecyclerView
See HeaderViewBehavior.setHeaderTopBottomOffset, it's invoked with different directions for newOffset parameter.
You should cancel AppBarLayout.Behavior fling when onStartNestedScroll invoked.
How to fix:
Override AppBarLayout.Behavior
package com.google.android.material.appbar // original package
import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.widget.OverScroller
import androidx.coordinatorlayout.widget.CoordinatorLayout
class FixFlingBehavior #JvmOverloads constructor(
context: Context,
attributeSet: AttributeSet? = null
) : AppBarLayout.Behavior(context, attributeSet) {
private var isAppbarFlinging: Boolean = false
private var originalScroller: OverScroller? = null
private val fakeScroller: OverScroller = object : OverScroller(context) {
override fun computeScrollOffset(): Boolean {
scroller = originalScroller
return false // it cancels HeaderBehavior FlingRunnable
}
}
override fun setHeaderTopBottomOffset(coordinatorLayout: CoordinatorLayout, appBarLayout: AppBarLayout, newOffset: Int, minOffset: Int, maxOffset: Int): Int {
isAppbarFlinging = minOffset == Int.MIN_VALUE && maxOffset == Int.MAX_VALUE
if (scroller === fakeScroller) {
scroller = originalScroller
}
return super.setHeaderTopBottomOffset(coordinatorLayout, appBarLayout, newOffset, minOffset, maxOffset)
}
override fun onFlingFinished(parent: CoordinatorLayout, layout: AppBarLayout) {
super.onFlingFinished(parent, layout)
isAppbarFlinging = false
}
override fun onStartNestedScroll(parent: CoordinatorLayout, child: AppBarLayout, directTargetChild: View, target: View, nestedScrollAxes: Int, type: Int): Boolean {
if (isAppbarFlinging && scroller !== fakeScroller) {
originalScroller = scroller
scroller = fakeScroller
}
return super.onStartNestedScroll(parent, child, directTargetChild, target, nestedScrollAxes, type)
}
}
And use it in your layout
...
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.FixFlingBehavior">
...

MotionLayout: How to Limit the 'OnSwipe' event on a specific view instead of 'OnSwipe' on whole screen

I have a motionlayout with the following 'layoutDescription' (scenes file)
<Transition
motion:constraintSetStart="#+id/start"
motion:constraintSetEnd="#+id/end"
motion:duration="1000">
<OnSwipe
motion:touchAnchorId="#+id/button"
motion:touchAnchorSide="left"
motion:dragDirection="dragLeft" />
</Transition>
<ConstraintSet android:id="#+id/start">
<!-- ConstraintSet for starting -->
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<!-- ConstraintSet for end -->
</ConstraintSet>
What I expect from here is if user drag the 'button' towards left side then it should perform the transition but what actually happening is when user drag left(swipe left) from any where in the screen this transition getting executed!
How to limit the animation work only when dragging the specified view?
(Im using "constraintlayout:2.0.0-beta2" )

Actually for onSwipe you can use touchRegionId and targetId for OnClick

Updated answer : with the ConstraintLayout 2.0.0 alpha-5 you can simply use
app:touchRegionId
in your "OnSwipe" for the same behaviour. Also can use 'app:targetId' for "OnClick" usages.
Thanks #RuslanLeshchenko
Original answer :
I managed to do this finally by extending MotionLayout and override onTouchEvent to forward the event to required view.
Create the custom layout by extending MotionLayout
class SingleViewTouchableMotionLayout(context: Context, attributeSet: AttributeSet? = null) : MotionLayout(context, attributeSet) {
private var viewToDetectTouch1 :View? = null
private var viewToDetectTouchRes :Int = -1
private val viewRect = Rect()
private var touchStarted = false
init {
setTransitionListener(object : MotionLayout.TransitionListener {
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) {
}
override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
touchStarted = false
}
})
context.theme.obtainStyledAttributes(
attributeSet,
R.styleable.SingleViewTouchableMotionLayout,
0, 0).apply {
try {
viewToDetectTouchRes = getResourceId(
R.styleable.SingleViewTouchableMotionLayout_viewToDetectTouch, 0)
} finally {
recycle()
}
}
}
override fun onAttachedToWindow() {
super.onAttachedToWindow()
viewToDetectTouch1 = (parent as View).findViewById<View>(viewToDetectTouchRes)
}
override fun onTouchEvent(event: MotionEvent): Boolean {
when (event.actionMasked) {
MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
touchStarted = false
return super.onTouchEvent(event)
}
}
if (!touchStarted) {
viewToDetectTouch1?.getHitRect(viewRect)
touchStarted = viewRect.contains(event.x.toInt(), event.y.toInt())
}
return touchStarted && super.onTouchEvent(event)
}
}
And add the custom attribute which will be used to declare the View that gonna receives the events to trigger the Transition/animation.
Add these styleable to your attrs.xml in your res folder (res/values/attrs.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SingleViewTouchableMotionLayout">
<attr name="viewToDetectTouch" format="reference" />
</declare-styleable>
</resources>
Thats it!!
This way we can archive MotionLayout OnSwipe on a specified view.
Layout XML file now will look like this :
<your_package.SingleViewTouchableMotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/motion_file"
app:viewToDetectTouch="#+id/triggerView"
>
<!-- Notice that 'app:viewToDetectTouch' hold the id of the view we interested -->
<!-- View we interested -->
<View
android:id="#+id/triggerView"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/colorBlack"
/>
</your_package.SingleViewTouchableMotionLayout>

Android NestedScrollView stopNestedScroll not working

I have 2 fragments inside the NestedScrollView and one fragment contains RecyclerView and another fragment contains GoogleMap and each fragment contains a text view as a title on top of it.
When I long tap on recycler view I am showing recycler view in full-screen view by changing its height to 100%.
Now I want to stop scrolling the title of RecyclerView's fragment but it is still scrolling the title when recycler view reached its last item.
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.myapp.common.CustomNestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true" />
</com.myapp.common.CustomNestedScrollView>
</LinearLayout>
It looks like:
I tried to stop the scrolling by extending the CustomNestedScrollView with NestedScrollView like:
class CustomNestedScrollView : NestedScrollView {
var isEnableScrolling = true
constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
constructor(context: Context) : super(context) {}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
return if (isEnableScrolling) {
super.onInterceptTouchEvent(ev)
} else {
false
}
}
override fun onTouchEvent(ev: MotionEvent): Boolean {
return if (isEnableScrolling) {
super.onTouchEvent(ev)
} else {
false
}
}
}
And setting the value from the activity when height is 100% like:
nestedScrollView.isEnableScrolling = !isFull
Also tried by stopping Scroll of NestedScrollView like:
if (isFull) {
nestedScrollView.stopNestedScroll(ViewCompat.TYPE_NON_TOUCH)
} else {
nestedScrollView.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, ViewCompat.TYPE_TOUCH)
}
Expected:

Wrong scroll position in CoordinatorLayout.Behavior

I am using CoordinatorLayout with custom behavior and NestedScrollView in my project. It works well except one issue. When I am call nestedScrollView.smoothScrollTo(0,0) I get wrong Y coordinated in MyCustomBehavior. When I scroll it by finger I receive correct coordinates. How to get correct coordinates in behavior class when it scrolling by smoothScrollTo() method?
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="150dp"
android:background="#f00"
android:layout_gravity="center_horizontal"
app:layout_behavior="com.mysite.app.MyCustomBehavior" />
<com.mysite.app.CustomScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Very long text here" />
</com.mysite.app.CustomScrollView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="24dp"
android:elevation="20dp" />
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
CustomScrollView:
class CustomScrollView #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : NestedScrollView(context, attrs, defStyleAttr) {
private val runnable = Runnable {
if (scrollY in 1..299) {
smoothScrollTo(0,0)
}
}
override fun stopNestedScroll(type: Int) {
super.stopNestedScroll(type)
removeCallbacks(runnable)
handler.postDelayed(runnable, 200)
}
}
Behavior:
class CollapsingImageBehavior(private val context: Context, attrs: AttributeSet?) : CoordinatorLayout.Behavior<CardView>(context, attrs) {
private var scroll = 0
override fun layoutDependsOn(parent: CoordinatorLayout, child: CardView, dependency: View): Boolean {
return dependency is NestedScrollView
}
override fun onStartNestedScroll(coordinatorLayout: CoordinatorLayout, child: CardView, directTargetChild: View, target: View, axes: Int, type: Int): Boolean {
return axes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type)
}
override fun onNestedScroll(coordinatorLayout: CoordinatorLayout, child: CardView, target: View, dxConsumed: Int, dyConsumed: Int, dxUnconsumed: Int, dyUnconsumed: Int, type: Int) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type)
scroll += dyConsumed
Log.d("tag", "onNestedScroll " + scroll)
}
override fun onDependentViewChanged(parent: CoordinatorLayout, child: CardView, dependency: View): Boolean {
return true
}
}

Android Custom View: How to set click listener on individual widgets

This is my layout file for the custom view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<ImageView
android:id="#+id/ivMenu"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/ripple"
android:clickable="true"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_menu_gray" />
<ImageView
android:id="#+id/ivDrawer"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/ripple"
android:clickable="true"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_drawer_gray" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
There are two ImageViews that I need to set click listeners on. I have created a class extending LinearLayout, since it is the root element in my layout.
I don't know how to set click listeners on individual items in the layout.
here is my class file for the layout
class WolfBottomAppBar : LinearLayout {
constructor(context: Context) : super(context) {
init(context)
}
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
init(context)
}
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
init(context)
}
private fun init(context: Context) {
((context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)) as LayoutInflater).inflate(R.layout.wolf_bottom_app_bar, this)
}
override fun dispatchTouchEvent(event: MotionEvent): Boolean {
if (event.action == MotionEvent.ACTION_UP) {
/*
* I can set click listener for the whole view here, but not on individual items
*/
}
return super.dispatchTouchEvent(event)
}
override fun dispatchKeyEvent(event: KeyEvent): Boolean {
if (event.action == KeyEvent.ACTION_UP && (event.keyCode == KeyEvent.KEYCODE_DPAD_CENTER || event.keyCode == KeyEvent.KEYCODE_ENTER)) {
}
return super.dispatchKeyEvent(event)
}
}

put
fun setMenuListener(listener : View.OnClickListener) {
findViewById<ImageView>(R.id.ivMenu).setOnClickListener(listener)
}
fun setDrawerListener(listener : View.OnClickListener) {
findViewById<ImageView>(R.id.ivDrawer).setOnClickListener(listener)
}
into you custom view class.

You can just access the ImageViews with their ids. You need to add the inflated view to your root (=WolfBottomAppBar); e.g. in the init method:
private fun init(context: Context) {
((context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)) as LayoutInflater).inflate(R.layout.wolf_bottom_app_bar, this, true)
ivMenu.setOnClickListener { Log.d(TAG, "Image ivMenu clicked!") }
}
Don't forget to import the synthetic Kotlin package for the layout file and to add android:focusable="true" to the two ImageViews xml