Add button slider like image slider in kotlin - android

I am making a mobile app in kotlin in which I need to run different Machine Learning models by clicking buttons. The idea is simple there will only be one button at a time on the screen and the user can slide left or right to get the next button just like an image slider where you can access the next or prev image by sliding.
This effect can be achieved in kotlin by Horizontal Scroll View but the problem is if we do an incomplete scroll there can be 2 buttons on the screen but I want an autocomplete scroll effect where when you scroll only the next button should stay on screen.
Edited
So far I have used RecyclerView to implement my buttons but I can't seem to have a good startSmoothScroll. I embedded startSmoothScroll in onScrolled to trigger it for first time and to find the position to smoothScroll but it starts to jiggle between 2 items to and fro.
binding.recyclerView.setHasFixedSize(true)
val smoothScroller: SmoothScroller =
object : LinearSmoothScroller(binding.recyclerView.context) {
override fun getHorizontalSnapPreference(): Int {
return SNAP_TO_START
}
}
binding.recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
if (!(recyclerView.layoutManager as LinearLayoutManager).isSmoothScrolling) {
val firstPosition =
(recyclerView.layoutManager as LinearLayoutManager).findFirstVisibleItemPosition()
val lastPosition =
(recyclerView.layoutManager as LinearLayoutManager).findLastVisibleItemPosition()
if ((targetPosition == 0) || (targetPosition < lastPosition))
targetPosition = lastPosition
else if (firstPosition != lastPosition)
targetPosition = firstPosition
smoothScroller.targetPosition = targetPosition
(recyclerView.layoutManager as LinearLayoutManager).startSmoothScroll(
smoothScroller
)
}
}
})

Without having much code to go by, here's a general idea you could implement.
First try to set a setOnScrollChangeListener on your Horizontal Scroll View and override the onScrollChange.
Depending on the direction, calculated by the current X and old X position, you can figure out the direction and appropriately move the view left or right: yourHorizontalScrollView.pageScroll(View.FOCUS_LEFT) //or View.FOCUS_RIGHT
If you use a RecyclerView, you could have a few more options with it's OnScrollListener and the recyclerView's smoothScrollToPosition()

Related

Item loses focus when scrolling up in RecyclerView

I'm facing a problem on recyclerview when developing an android app on TV
I have a list of reviews I'd like to scroll through
when scrolling to the second review, i have some logic to resize the layout to take the entire screen, however, the second review is not centered when scrolling down. all the other items after the second review are centered because im overriding
override fun calculateDtToFit(
viewStart: Int,
viewEnd: Int,
boxStart: Int,
boxEnd: Int,
snapPreference: Int
): Int {
return boxStart + (boxEnd - boxStart) / 2 - (viewStart + (viewEnd - viewStart) / 2)
}
Scrolling up works perfectly with all the reviews centered
Since only the scrolling down behavior was odd, I tried adding a scroll listener and using scrollToPositionWithOffset to scroll the second review to a specific position when scrolling down, and kept the scrolling up logic untouched. somehow it ended up messing with scrolling up anyway, when scrolling up to the second review, recycler view somehow loses focus
code to identify scroll direnction
var firstVisibleInListview = layoutManager.findFirstVisibleItemPosition()
var isScrollingUp = false
private val reviewsListScrollListener = object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
val currentFirstVisible = layoutManager.findFirstVisibleItemPosition()
isScrollingUp = currentFirstVisible > firstVisibleInListview
firstVisibleInListview = currentFirstVisible;
}
}
init {
listRecyclerView.addOnScrollListener(reviewsListScrollListener)
}
code to control scrolling behavior
private fun getScrollToPositionCallback(position: Int): (View, Boolean) -> Unit {
return { view, hasFocus ->
if (hasFocus) {
picksViewModel.selectReviewPosition(position)
if (position == 2) {
if (!isScrollingUp) {
listRecyclerView.setPadding(0,listRecyclerView.paddingBottom,
0, listRecyclerView.paddingBottom)
layoutManager.scrollToPositionWithOffset(position, 300)
}
} else if (position == 1) {
listRecyclerView.setPadding(0,0, 0, listRecyclerView.paddingBottom)
}
listRecyclerView.scrollToUserReviewPosition(position)
}
}
}
I then tried adding onKeyListner to the items and requireFocus to the second review when I'm pressing the up key on the third review, but it immediately skip past the second review and jumps to the first review.
So the problem seems to be the second review can't be focused on after I attached the onScrollListener, how do I fix that?

Android RecycleView how to disable manual scroll but allow item clicked

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

Kotlin Recyclerview Stack Layout Type showing wrong views

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

View flicking on slow scroll of Android RecyclerView

I have a horizontal linear layout at the top of recycler view and I want to hide that view if findFirstCompletelyVisibleItemPosition is > 2 and if findFirstCompletelyVisibleItemPosition <= 2, that view should be visible.
I was able to achieve that with scroll listener on recycler view . But there is one problem, when you are scrolling slow view is flickering (showing and hiding fast). However this works fine if we do a fast scroll on recycler view.
This is my code
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
val findFirstCompletelyVisibleItemPosition =
layoutManager.findFirstCompletelyVisibleItemPosition()
if (findFirstCompletelyVisibleItemPosition > 2) {
layout.visibility = View.GONE
} else {
layout.visibility = View.VISIBLE
}
}
})
After tinkering a bit, here's what I came up with. It's not the prettiest solution due to slight performance implications but it should do the trick.
Because your LinearLayout should change its visibility during scrolling and not just when scrolling is completed, we'll have to stick with onScrolled. While this method does provide the amount of scrolling done (dx and dy), it's provided in pixels (seemingly, I did some testing). This means that we'd have to convert this to dp to actually get some use out of this value which is probably too expensive to be doing every time the method is called.
Instead, I decided to just save the last couple of values of findFirstCompletelyVisibleItemPosition in an array. This array is then checked each time onScrolled runs. It will look for items below your target value of 2. Your LinearLayout will only be shown if no values smaller than 2 are found.
This results in a more usable and more consistent true or false value that shouldn't cause flickering anymore.
Here's the code to achieve this behavior:
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
val layoutManager = recyclerView.layoutManager as LinearLayoutManager // TODO: unchecked cast
val prevValues = IntArray(5) // this can be changed to increase performance
var counter = 0
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
prevValues[counter++] = layoutManager.findFirstCompletelyVisibleItemPosition()
if(counter == prevValues.size)
counter = 0
var smallerValueFound = false
for(prevValue in prevValues.indices) {
if(prevValue < 2) {
smallerValueFound = true
break
}
}
if(smallerValueFound) layout.visibility = View.GONE
else layout.visibility = View.VISIBLE
}
})
To decrease the amount of performance lost, you could only access the array every couple of times onScrolled is run, though this could have issues on its own. You could also decrease the array's size.

How to get the offset of scroll position relative to the current text view's start?

I have a RecyclerView that contains TextViews. The number of TextViews can vary and the size of them vary as well and can be dynamically changed.
When the user scrolls to a certain position within the list and exits app, I want to be able to return to that exact position in the next session.
To do this, I need to know how many pixels have scrolled past from where the current TextView in view started and where the current position of the scroll is. For example, if the user has the 3rd TextView in view and scrolls 100 pixels down from where that TextView started, I will be able to return to this spot with scrollToPositionWithOffset(2, 100). If the TextView changes size (due to font changes), I can also return to the same spot by calculating the percentage of offset using the TextView's height.
Problem is, I cannot get the offset value in any accurate manor.
I know I can keep a running calculation on the Y value scrolled using get scroll Y of RecyclerView or Webview, but this does not give me where the TextView actually started. I can listen to when the user scrolled past the start of any TextView and record the Y position there but this will be inaccurate on fast scrolling.
Is there a better way?
Don't use position in pixels, use the index of the view. Using layout manager's findFirstVisibleItemPosition or findFirstCompletelyVisibleItemPosition.
That's a very popular question, although it may be intuitive to think and search for pixels not index.
Get visible items in RecyclerView
Find if the first visible item in the recycler view is the first item of the list or not
how to get current visible item in Recycler View
A good reason to not trust pixels is that it's not useful on some situations where index is, like rotating the screen, resizeing/splitting the app size to fit other apps side by side, foldable phones, and changing text / screen resolution.
I solved this by converting to a ListView:
lateinit var adapterRead: AdapterRead // Custom Adapter
lateinit var itemListView: ListView
/*=======================================================================================================*/
// OnViewCreated
itemListView = view.findViewById(R.id.read_listview)
setListView(itemListView)
// Upon entering this Fragment, will automatically scroll to saved position:
itemListView.afterMeasured {
scrollToPosition(itemListView, getPosition(), getOffset())
}
itemListView.setOnScrollListener(object : AbsListView.OnScrollListener {
private var currentFirstVisibleItem = 0
var offset = 0
override fun onScrollStateChanged(view: AbsListView, scrollState: Int) {
// When scrolling stops, will save the current position and offset:
if(scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
offset = if(itemListView.getChildAt(0) == null) 0 else itemListView.getChildAt(0).top - itemListView.paddingTop
saveReadPosition(getReadPosition(itemListView), offset)
}
}
override fun onScroll(view: AbsListView, firstVisibleItem: Int, visibleItemCount: Int, totalItemCount: Int) {
currentFirstVisibleItem = firstVisibleItem
}
})
/*=======================================================================================================*/
// Thanks to https://antonioleiva.com/kotlin-ongloballayoutlistener/ for this:
inline fun <T : View> T.afterMeasured(crossinline f: T.() -> Unit) {
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
if(measuredWidth > 0 && measuredHeight > 0) {
viewTreeObserver.removeOnGlobalLayoutListener(this)
f()
}
}
})
}
/*=======================================================================================================*/
fun setListView(lv: ListView) {
adapterRead = AdapterRead(list, context!!)
lv.apply {this.adapter = adapterRead}
}
/*=======================================================================================================*/
fun scrollToPosition(lv: ListView, position: Int, offset: Int) {
lv.post { lv.setSelectionFromTop(position, offset) }
}
/*=======================================================================================================*/
fun saveReadPosition(position: Int, offset: Int) {
// Persist your data to database here
}
/*=======================================================================================================*/
fun getPosition() {
// Get your saved position here
}
/*=======================================================================================================*/
fun getOffse() {
// Get your saved offset here
}

Categories

Resources