I am working on an idea, which is make a RecyclerView auto scrolling but allow user to click item without stop scrolling.
First, I create a custom LayoutManager to disable manual scroll, also change the speed of scroll to a certain position
class CustomLayoutManager(context: Context, countOfColumns: Int) :
GridLayoutManager(context, countOfColumns) {
// Custom smooth scroller
private val smoothScroller = object : LinearSmoothScroller(context) {
override fun calculateSpeedPerPixel(displayMetrics: DisplayMetrics): Float =
500f / displayMetrics.densityDpi
}
// Disable manual scroll
override fun canScrollVertically(): Boolean = false
// Using custom smooth scroller to control the duration of smooth scroll to a certain position
override fun smoothScrollToPosition(
recyclerView: RecyclerView,
state: RecyclerView.State?,
position: Int
) {
smoothScroller.targetPosition = position
startSmoothScroll(smoothScroller)
}
}
Then I do the initial work for the RecyclerView and start smooth scroll after 1 sec
viewBinding.list.apply {
// initial recycler view
setHasFixedSize(true)
customLayoutManager = CustomLayoutManager(context = context, countOfColumns = 2)
layoutManager = customLayoutManager
// data list
val dataList = mutableListOf<TestModel>()
repeat(times = 100) { dataList.add(TestModel(position = it, clicked = false)) }
// adapter
testAdapter =
TestAdapter(clickListener = { testAdapter.changeVhColorByPosition(position = it) })
adapter = testAdapter
testAdapter.submitList(dataList)
// automatically scroll after 1 sec
postDelayed({ smoothScrollToPosition(dataList.lastIndex) }, 1000)
}
Everything goes as my expected until I found that the auto scrolling stopped when I clicked on any item on the RecycelerView, the function when clickListener triggered just change background color of the view holder in TestAdapter
fun changeVhColor(position: Int) {
position
.takeIf { it in 0..itemCount }
?.also { getItem(it).clicked = true }
?.also { notifyItemChanged(it) }
}
here is the screen recording screen recording
issues I encounter
auto scrolling stopped when I tap any item on the ReycelerView
first tap make scrolling stopped, second tap trigger clickListener, but I expect to trigger clickListener by one tap
Can anybody to tell me how to resolve this? Thanks in advance.
There is a lot going on here. You should suspect the touch handling of the RecyclerView and, maybe, the call to notifyItemChanged(it), but I believe that the RecyclerView is behaving correctly. You can look into overriding the touch code in the RecyclerView to make it do what you want - assuming you can get to it and override it.
An alternative would be to overlay the RecyclerView with another view that is transparent and capture all touches on the transparent view. You can then write code for the transparent view that interacts with the RecyclerView in the way that meets your objectives. This will also be tricky and you will have to make changes to the RecyclerView as it is constantly layout out views as scrolling occurs. Since you have your own layout manager, this might be easier if you queue changes to occur pre-layout as scrolling occurs.
After tried several ways, found that the key of keep recycler view scrolling automatically is override onInterceptTouchEvent
Example
class MyRecyclerView #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyle: Int = 0
) : RecyclerView(context, attrs, defStyle) {
override fun onInterceptTouchEvent(e: MotionEvent?): Boolean = false
}
that will make the custom RecyclerView ignore all touch event
Related
I am attempting to write a recyclerview which has some of the Viewholders inside it as stacked ontop of one another. The idea is that you can drag the topmost view above the stacked list and have drop it above where it becomes separate.
I managed to get this working using a Recyclerview with a custom RecyclerView.ItemDecoration. However, after I drop the item, i have the adapter call notifyDataSetChange to update the background code. This causes the the next item in the stack to appear to be the wrong one (though this does change sometimes if you touch the item and start scrolling, then it displays the correct one).
The custom RecyclerView.ItemDecoration class:
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State
)
{
val itemPosition = parent.getChildAdapterPosition(view)
val adapter = parent.adapter
if (adapter is BaseRecVAdapter)
{
val item = adapter.getDataModel(itemPosition)
if (item is DragDropModel && item.mStackedPos != PMConsts.negNum)
{
if (item.mStackedPos != 0)
{
val context = view.context
val top = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 148f, context.resources.displayMetrics).toInt()
outRect.set(0, -top, 0, 0)
return
}
}
}
super.getItemOffsets(outRect, view, parent, state)
}
The drag interface I made for the Adapter and the ItemTouchHelper.Callback can be found below:
interface ItemTouchHelperListener
{
fun onItemMove(fromPosition: Int, toPosition: Int): Boolean
fun onClearView(recyclerView: RecyclerView?, viewHolder: RecyclerView.ViewHolder?)
}
The onItem move code is as follows:
override fun onItemMove(fromPosition: Int, toPosition: Int): Boolean
{
var newToPosition = toPosition
if (toPosition <= mDragUpLimit)
{//Prevent items from being dragged above maximum movement.
newToPosition = mDragUpLimit + 1
}
else if (toPosition >= mDragDownLimit)
{//Cannot drag below stacked List...
newToPosition = mDragDownLimit - 1
}
if (fromPosition < newToPosition)
{
for (i in fromPosition until newToPosition)
{
swap(mDataList, i, i + 1)
}
}
else
{
for (i in fromPosition downTo newToPosition + 1)
{
swap(mDataList, i, i - 1)
}
}
notifyItemMoved(fromPosition, newToPosition)
return true
}
I have a simple viewholder which is an invisible bar which i mark as the position you need to drag above in order to make a valid change to the list order.
I have the code call notifyDataSetChanged after the onClearView() method is called as I need to update the background features so that the next item in the stack is draggable and the background data feeding into the adapter is also updated. It seems the simplest way to keep the data updating smoothly, but I wonder if it is causing my problems
If someone would be able to give me a hand with this, I would be most grateful. I am tearing my hair out somewhat. I thought I had a good system setup but it was not quite working. I hope that this is enough information to get some help with this issue.
Thank you in advance
I am new in android with kotlin.
I have recylerview with unlimit amount of items. But i want to show only 6 items per view. I used constraint layout in items to bind data. I used setOnTouchListener and used drag functionality. If my drag intensity is short and direction is on left side so i passed the 2 and if its in right direction i passed -2. If my drag intensity is long and direction is on left side so i passed 6 and if in right direction i passed -6 in smoothScrollBy function by pixel. I am using smoothScrollBy, the items are scrolling fine but if i could drag quickly the first and last items are cut in the edge side. Then i am using normal scrollby its working fine. Can you please suggest me some solution as to why this is happening?
Adapter file
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val itemView: View =
LayoutInflater.from(parent.context)
.inflate(R.layout.calender_item_layout, parent, false)
itemView.layoutParams.width = Resources.getSystem().displayMetrics.widthPixels / 6
return ViewHolder(itemView)
}
CustomeRecyclerView
class CustomRecyclerView(context: Context, attrs: AttributeSet?) :
RecyclerView(context, attrs) {
init{
layoutManager = LinearLayoutManager(context).apply {
orientation = LinearLayoutManager.HORIZONTAL
stackFromEnd = true
}
setOnTouchListener(object : OnSwipeTouchListener() {
// pass 2 or 6 based on drag intensity
// 2 or -2 for short drag 6 and -6 for long drag
post { scrollItem(value) }
}
}
fun scrollItem(value: Int) {
smoothScrollBy(inpixel(value), 0)
}
private fun inpixel(offset: Int): Int {
val dim = Resources.getSystem().displayMetrics
return (dim.widthPixels / 6) * offset
}
}
thanks
First: I created a sample project showing this problem. By now I begin to think that this is a bug in either RecyclerView or MotionLayout.
https://github.com/muetzenflo/SampleRecyclerView
This project is set up a little bit different than what is described below: It uses data binding to toggle between the MotionLayout states. But the outcome is the same. Just play around with toggling the state and swiping between the items. Sooner than later you'll come upon a ViewHolder with the wrong MotionLayout state.
So the main problem is:
ViewHolders outside of the screen are not updated correctly when transition from one MotionLayout state to another.
So here is the problem / What I've found so far:
I am using a RecyclerView.
It has only 1 item type which is a MotionLayout (so every item of the RV is a MotionLayout).
This MotionLayout has 2 states, let's call them State big and State small
All items should always have the same State. So whenever the state is switched for example from big => small then ALL items should be in small from then on.
But what happens is that the state changes to small and most(!) of the items are also updated correctly. But one or two items are always left with the old State. I am pretty sure it has to do with recycled ViewHolders. These steps produce the issue reliably when using the adapter code below (not in the sample project):
swipe from item 1 to the right to item 2
change from big to small
change back from small to big
swipe from item 2 to the left to item 1
=> item 1 is now in the small state, but should be in the big state
Additional findings:
After step 4 if I continue swiping to the left, there comes 1 more item in the small state (probably the recycled ViewHolder from step 4). After that no other item is wrong.
Starting from step 4, I continue swiping for a few items (let's say 10) and then swipe all the way back, no item is in the wrong small state anymore. The faulty recycled ViewHolder seems to be corrected then.
What did I try?
I tried to call notifyDataSetChanged() whenever the transition has completed
I tried keeping a local Set of created ViewHolders to call the transition on them directly
I tried to use data-binding to set the motionProgress to the MotionLayout
I tried to set viewHolder.isRecycable(true|false) to block recycling during the transition
I searched this great in-depth article about RVs for hint what to try next
Anyone had this problem and found a good solution?
Just to avoid confusion: big and small does not indicate that I want to collapse or expand each item! It is just a name for different arrangement of the motionlayouts' children.
class MatchCardAdapter() : DataBindingAdapter<Match>(DiffCallback, clickListener) {
private val viewHolders = ArrayList<RecyclerView.ViewHolder>()
private var direction = Direction.UNDEFINED
fun setMotionProgress(direction: MatchCardViewModel.Direction) {
if (this.direction == direction) return
this.direction = direction
viewHolders.forEach {
updateItemView(it)
}
}
private fun updateItemView(viewHolder: RecyclerView.ViewHolder) {
if (viewHolder.adapterPosition >= 0) {
val motionLayout = viewHolder.itemView as MotionLayout
when (direction) {
Direction.TO_END -> motionLayout.transitionToEnd()
Direction.TO_START -> motionLayout.transitionToStart()
Direction.UNDEFINED -> motionLayout.transitionToStart()
}
}
}
override fun onBindViewHolder(holder: DataBindingViewHolder<Match>, position: Int) {
val item = getItem(position)
holder.bind(item, clickListener)
val itemView = holder.itemView
if (itemView is MotionLayout) {
if (!viewHolders.contains(holder)) {
viewHolders.add(holder)
}
updateItemView(holder)
}
}
override fun onViewRecycled(holder: DataBindingViewHolder<Match>) {
if (holder.adapterPosition >= 0 && viewHolders.contains(holder)) {
viewHolders.remove(holder)
}
super.onViewRecycled(holder)
}
}
I made some progress but this is not a final solution, it has a few quirks to polish. Like the animation from end to start doesn't work properly, it just jumps to the final position.
https://github.com/fmatosqg/SampleRecyclerView/commit/907ec696a96bb4a817df20c78ebd5cb2156c8424
Some things that I changed but are not relevant to the solution, but help with finding the problem:
made duration 1sec
more items in recycler view
recyclerView.setItemViewCacheSize(0) to try to keep as few unseen items as possible, although if you track it closely you know they tend to stick around
eliminated data binding for handling transitions. Because I don't trust it in view holders in general, I could never make them work without a bad side-effect
upgraded constraint library with implementation "androidx.constraintlayout:constraintlayout:2.0.0-rc1"
Going into details about what made it work better:
all calls to motion layout are done in a post manner
// https://stackoverflow.com/questions/51929153/when-manually-set-progress-to-motionlayout-it-clear-all-constraints
fun safeRunBlock(block: () -> Unit) {
if (ViewCompat.isLaidOut(motionLayout)) {
block()
} else {
motionLayout.post(block)
}
}
Compared actual vs desired properties
val goalProgress =
if (currentState) 1f
else 0f
val desiredState =
if (currentState) motionLayout.startState
else motionLayout.endState
safeRunBlock {
startTransition(currentState)
}
if (motionLayout.progress != goalProgress) {
if (motionLayout.currentState != desiredState) {
safeRunBlock {
startTransition(currentState)
}
}
}
This would be the full class of the partial solution
class DataBindingViewHolder<T>(private val binding: ViewDataBinding) :
RecyclerView.ViewHolder(binding.root) {
val motionLayout: MotionLayout =
binding.root.findViewById<MotionLayout>(R.id.root_item_recycler_view)
.also {
it.setTransitionDuration(1_000)
it.setDebugMode(DEBUG_SHOW_PROGRESS or DEBUG_SHOW_PATH)
}
var lastPosition: Int = -1
fun bind(item: T, position: Int, layoutState: Boolean) {
if (position != lastPosition)
Log.i(
"OnBind",
"Position=$position lastPosition=$lastPosition - $layoutState "
)
lastPosition = position
setMotionLayoutState(layoutState)
binding.setVariable(BR.item, item)
binding.executePendingBindings()
}
// https://stackoverflow.com/questions/51929153/when-manually-set-progress-to-motionlayout-it-clear-all-constraints
fun safeRunBlock(block: () -> Unit) {
if (ViewCompat.isLaidOut(motionLayout)) {
block()
} else {
motionLayout.post(block)
}
}
fun setMotionLayoutState(currentState: Boolean) {
val goalProgress =
if (currentState) 1f
else 0f
safeRunBlock {
startTransition(currentState)
}
if (motionLayout.progress != goalProgress) {
val desiredState =
if (currentState) motionLayout.startState
else motionLayout.endState
if (motionLayout.currentState != desiredState) {
Log.i("Pprogress", "Desired doesn't match at position $lastPosition")
safeRunBlock {
startTransition(currentState)
}
}
}
}
fun startTransition(currentState: Boolean) {
if (currentState) {
motionLayout.transitionToStart()
} else {
motionLayout.transitionToEnd()
}
}
}
Edit: added constraint layout version
I am following this tutorial and source code to implement Collapsing Toolbar by using Motion Layout.
When you do "fast scroll" on recyclerView and then do click event on any item of the recyclerView, this event only works after you the 2nd click. Or you have to wait 2-3 second then do the click event works. Otherwise click event can not be dispatch to the recyclerView. (Assuming it waits to finish animation on MotionLayout). How can we fix this issue?
Anyone can simulate the issue by adding below code to the adapter of the article's source code. And do fast scroll.
class ViewHolder(
view: View,
private val textView: TextView = view.findViewById(android.R.id.text1)
) : RecyclerView.ViewHolder(view) {
var text: CharSequence
get() = textView.text
set(value) {
textView.text = value
}
init {
view.setOnClickListener { showMessage(it) }
}
private fun showMessage(view: View) {
Toast.makeText(view.context, "OnClickListener: item ${adapterPosition + 1}", Toast.LENGTH_SHORT).show()
}
}
Update ConstraintLayout to version 2.0.0-beta2
https://issuetracker.google.com/issues/128914828
I feel like I am being silly,
I want to use MotionLayout on an ViewHolder within my RecyclerView to animate between two states (the current playing song is expanded, while the last playing song is shrunk)
However it seems that the recyclerview is too good, it simply changes the contents without changing the views, i.e. when the current playing song changes, the view is already in the End Transition state, so my transition does nothing.
Same my previously expanded item is rebound into the closed state so my animation does nothing.
So Okay i thought lets check the state of the transition and set the progress, but this leads to the transition not running if i set the progress the line before. I have tried, adding in some delays but no real improvement,
I feel like maybe I am over engineering this, or I am missing something fundamental about how to reset motionlayout animations.. Any help will be much appreciated.
override fun onBindViewHolder(holder: SongViewHolder, position: Int) {
if (songs.isNotEmpty() && position < songs.size) {
val current = songs[position]
holder.songName?.text = current.song
holder.albumArt?.setImageResource(current.albumArtId)
holder.artistName?.text = current.artist
var ml = holder.motionLayout
if (current.currentPlaying){
//The view is recycled so its already in the end state... so set it to the start state and animate
if (ml?.progress!! > 0f) {
ml?.progress = 0f //<- This resets the animation state
}
ml?.transitionToEnd() <- but at this point the animation does not work if i have manually set the progress the line above
}else{
if (current.previoussong){
//The view that was last expended is not in the end state, so set it then transation to start
if (ml?.progress!! < 1f) {
ml?.progress = 1f
}
ml?.transitionToStart()
}
}
}
}
Okay incase anyone has the same issue, i found "an" answer to my dilemma.
Insteead of setting the progress, i explicitly set the transition then asked it to transition to end, this worked for expand.
And to get shrink working i had to create a different initial layout with an inverted motionscene, then transition to the end, and set the "previoussong" as a different viewType in my creatViewHolder
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SongViewHolder {
//Use the int to switch?
val itemView : View = when (viewType) {
TYPEPLAYING -> inflater.inflate(R.layout.list_motion_layout, parent, false)
TYPEUPCOMING -> inflater.inflate(R.layout.list_motion_layout, parent, false)
TYPEPREVIOUS -> inflater.inflate(R.layout.list_motion_layout_shrink, parent, false)
else
-> inflater.inflate(R.layout.footer, parent, false)
}
...
}
override fun onBindViewHolder(holder: SongViewHolder, position: Int) {
if (songs.isNotEmpty() && position < songs.size) {
val current = songs[position]
holder.songName?.text = current.song
holder.albumArt?.setImageResource(current.albumArtId)
holder.artistName?.text = current.artist
var ml = holder.motionLayout
if (current.currentPlaying){
ml?.setTransition(list_motion_layout_start, currentplaying_song)
ml?.transitionToEnd()
}
if (current.previouslyPlaying) {
ml?.setTransition(currentplaying_song, list_motion_layout_start) // Not sure if this is actually required
ml?.transitionToEnd()
}
}
}
All in all i have a working expand/shrink list adapter using motionview it looks quite nice, but there is probably nicer ways to do this out there ,,, sorry cant share any pics.