I am using Recyclerview with PageSnapHelper to create an Image carousel.
First item - Not Centered
The first Item is not centered and Subsequent Items should be centered, I have achieved this using item decorator. RecyclerView is inside nested scrollview.
Issue:
Scrolling is not smooth, I have override findTargetSnapPosition, It is scrolling 2 items for the first fling.
override fun findTargetSnapPosition(layoutManager: RecyclerView.LayoutManager, velocityX: Int, velocityY: Int): Int {
if (layoutManager !is RecyclerView.SmoothScroller.ScrollVectorProvider) {
return RecyclerView.NO_POSITION
}
val currentView = findSnapView(layoutManager) ?: return RecyclerView.NO_POSITION
val layoutManager = layoutManager as LinearLayoutManager
val position1 = layoutManager.findFirstVisibleItemPosition()
val position2 = layoutManager.findLastVisibleItemPosition()
var currentPosition = layoutManager.getPosition(currentView)
if (velocityX > 500) {
currentPosition = position2
} else if (velocityX < 500) {
currentPosition = position1
}
return if (currentPosition == RecyclerView.NO_POSITION) {
RecyclerView.NO_POSITION
} else currentPosition
}
If i got you right, you need to override LinearSnapHelper instead, cause your item views are not full screened. For achieving focusing on first/last items you need to override findSnapView next way(note that this snippet only applicable when RecyclerView.layoutmanager is LinearLayoutManager):
fun RecyclerView.setLinearSnapHelper(isReversed: Boolean = false) {
object : LinearSnapHelper() {
override fun findSnapView(layoutManager: RecyclerView.LayoutManager?): View? {
val firstVisiblePosition = (layoutManager as LinearLayoutManager).findFirstCompletelyVisibleItemPosition()
val lastVisiblePosition = layoutManager.findLastCompletelyVisibleItemPosition()
val firstItem = 0
val lastItem = layoutManager.itemCount - 1
return when {
firstItem == firstVisiblePosition -> layoutManager.findViewByPosition(firstVisiblePosition)
lastItem == lastVisiblePosition -> layoutManager.findViewByPosition(lastVisiblePosition)
else -> super.findSnapView(layoutManager)
}
}
}.apply { attachToRecyclerView(this#setLinearSnapHelper) }
}
Related
I am implementing pagination to show data from API by using the recyclerview gridlayout manager. I have tried multiple ways to implement it, finally found a solution but still, it is not working properly. I show data in the list from API, but whenever my data shows in recyclerview from API then it's on scrolllistener automatically works which it should only when I scroll the list.
I am adding a snippet of my code below.
private lateinit var scrollListener: RecyclerviewLoadMore
private lateinit var mLayoutManager: RecyclerView.LayoutManager
//int
private var pageNum = 1
private var limit = 0
motivationAdapter = MotivationsAdapter(requireActivity(), getVideoList, object : RecyclerViewClickHandler {
override fun onItemClicked(position: Int, type: Int, view: View) {
})
rvMotivation?.adapter = motivationAdapter
rvMotivation?.addItemDecoration(SpacesItemDecoration(2, 30, false))
mLayoutManager = GridLayoutManager(requireActivity(), 2)
rvMotivation?.setHasFixedSize(true)
(mLayoutManager as GridLayoutManager).spanSizeLookup =
object : GridLayoutManager.SpanSizeLookup() {
override fun getSpanSize(position: Int): Int {
return when (motivationAdapter?.getItemViewType(position)) {
RecyclerScrollEnums.VIEW_TYPE_ITEM.viewType -> 1
RecyclerScrollEnums.VIEW_TYPE_LOADING.viewType -> 2 //number of columns of the grid
else -> -1
}
}
}
Handler(Looper.getMainLooper()).postDelayed({
//scroll listener
scrollListener = RecyclerviewLoadMore(mLayoutManager as GridLayoutManager)
scrollListener.setOnLoadMoreListener(object :
OnLoadMoreListener {
override fun onLoadMore() {
//Get the number of the current Items of the main Arraylist
val start = motivationAdapter?.itemCount
scrollListener.isLoading = false
if(scrollListener.lastVisibleItem==limit){
motivationAdapter?.addLoadingView()
getVideoAPi()
}
}
})
rvMotivation?.addOnScrollListener(scrollListener)
}, 1000)
I notify data when getting data from the API success.
if (response.success == SOCKET_TRUE) {
pageNum += 1
if (limit>0) {
motivationAdapter?.removeLoadingView()
}
limit += response?.data?.size!!
updateAdapterCategory(response.data)
}
fun updateAdapterCategory(getMotivatedList: ArrayList<DataItem?>?) {
getVideoList?.addAll(getMotivatedList!!)
motivationAdapter?.notifyDataSetChanged()
}
This recyclerview scroll listener class which I found on the internet.
class RecyclerviewLoadMore : RecyclerView.OnScrollListener {
private var visibleThreshold = 5
private lateinit var mOnLoadMoreListener: OnLoadMoreListener
internal var isLoading: Boolean = false
internal var lastVisibleItem: Int = 0
internal var totalItemCount: Int = 0
private var mLayoutManager: RecyclerView.LayoutManager
//linear layout manager
constructor(layoutManager: LinearLayoutManager) {
this.mLayoutManager = layoutManager
}
//grid layout manager
constructor(layoutManager: GridLayoutManager) {
this.mLayoutManager = layoutManager
visibleThreshold *= layoutManager.spanCount
}
//staggered layout manager
constructor(layoutManager: StaggeredGridLayoutManager) {
this.mLayoutManager = layoutManager
visibleThreshold *= layoutManager.spanCount
}
//interface to load more data for pagination
fun setOnLoadMoreListener(mOnLoadMoreListener: OnLoadMoreListener) {
this.mOnLoadMoreListener = mOnLoadMoreListener
}
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
}
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
totalItemCount = mLayoutManager.itemCount
if (mLayoutManager is StaggeredGridLayoutManager) {
val lastVisibleItemPositions =
(mLayoutManager as StaggeredGridLayoutManager).findLastVisibleItemPositions(null)
// get maximum element within the list
lastVisibleItem = getLastVisibleItem(lastVisibleItemPositions)
} else if (mLayoutManager is GridLayoutManager) {
lastVisibleItem = (mLayoutManager as GridLayoutManager).findLastVisibleItemPosition()
} else if (mLayoutManager is LinearLayoutManager) {
lastVisibleItem = (mLayoutManager as LinearLayoutManager).findLastVisibleItemPosition()
}
if (!isLoading && totalItemCount <= lastVisibleItem + visibleThreshold) {
mOnLoadMoreListener.onLoadMore()
isLoading = true
}
}
private fun getLastVisibleItem(lastVisibleItemPositions: IntArray): Int {
var maxSize = 0
for (i in lastVisibleItemPositions.indices) {
if (i == 0) {
maxSize = lastVisibleItemPositions[i]
} else if (lastVisibleItemPositions[i] > maxSize) {
maxSize = lastVisibleItemPositions[i]
}
}
return maxSize
}
}
I have recyclerview with horizontal scroll and it snaps by default with LinearSnapHelper or PagerSnapHelper to the center of item. I want to snap to the left side of the each item. Is it possible?
You can easily extend PagerSnapHelper to align items by left side. There is one trick only needed with last item.
My solution is:
class AlignLeftPagerSnapHelper : PagerSnapHelper() {
private var horizontalHelper: OrientationHelper? = null
override fun findSnapView(layoutManager: RecyclerView.LayoutManager?): View? {
return getStartView(layoutManager as LinearLayoutManager, getHorizontalHelper(layoutManager))
}
private fun getStartView(layoutManager: LinearLayoutManager, helper: OrientationHelper): View? {
val firstVisibleChildPosition = layoutManager.findFirstVisibleItemPosition()
val lastCompletelyVisibleChildPosition = layoutManager.findLastCompletelyVisibleItemPosition()
val lastChildPosition = layoutManager.itemCount - 1
if (firstVisibleChildPosition != RecyclerView.NO_POSITION) {
var childView = layoutManager.findViewByPosition(firstVisibleChildPosition)
if (helper.getDecoratedEnd(childView) < helper.getDecoratedMeasurement(childView) / 2) {
childView = layoutManager.findViewByPosition(firstVisibleChildPosition + 1)
} else if (lastCompletelyVisibleChildPosition == lastChildPosition) {
childView = layoutManager.findViewByPosition(lastChildPosition)
}
return childView
}
return null
}
override fun calculateDistanceToFinalSnap(layoutManager: RecyclerView.LayoutManager, targetView: View): IntArray =
intArrayOf(distanceToStart(targetView, getHorizontalHelper(layoutManager)), 0)
override fun findTargetSnapPosition(
layoutManager: RecyclerView.LayoutManager,
velocityX: Int,
velocityY: Int
): Int {
val currentView = findSnapView(layoutManager) ?: return RecyclerView.NO_POSITION
val currentPosition = layoutManager.getPosition(currentView)
return if (velocityX < 0) {
(currentPosition - 1).coerceAtLeast(0)
} else {
(currentPosition + 1).coerceAtMost(layoutManager.itemCount - 1)
}
}
private fun distanceToStart(targetView: View, helper: OrientationHelper): Int =
helper.getDecoratedStart(targetView) - helper.startAfterPadding
private fun getHorizontalHelper(layoutManager: RecyclerView.LayoutManager): OrientationHelper {
if (horizontalHelper == null) {
horizontalHelper = OrientationHelper.createHorizontalHelper(layoutManager)
}
return horizontalHelper!!
}
}
I have a horizontal Recyclerview inside another horizontal Recyclerview. Now I want to show the scrollbar. But the height of the scrollbar is changing as I scroll. I want to have a fixed height of the scrollbar as I scroll. How can I achieve that? I have a custom LinearLayoutManager. But it is not working properly. Any better solution to this problem?
class CoolLayoutManager(context: Context,orientation: Int,
reverseLayout: Boolean) : LinearLayoutManager(context,orientation,
reverseLayout) {
init {
isSmoothScrollbarEnabled = true
}
override fun computeHorizontalScrollExtent(state: State): Int {
val count = childCount
return if (count > 0) {
SMOOTH_VALUE * 3
} else 0
}
override fun computeHorizontalScrollRange(state: State): Int {
return Math.max((itemCount - 1) * SMOOTH_VALUE, 0)
}
override fun computeHorizontalScrollOffset(state: State): Int {
val count = childCount
if (count <= 0) {
return 0
}
if (findLastCompletelyVisibleItemPosition() == itemCount - 1) {
return Math.max((itemCount - 1) * SMOOTH_VALUE, 0)
}
val widthOfScreen: Int
val firstPos = findFirstVisibleItemPosition()
if (firstPos == RecyclerView.NO_POSITION) {
return 0
}
val view = findViewByPosition(firstPos) ?: return 0
// Top of the view in pixels
val top = getDecoratedTop(view)
val width = getDecoratedMeasuredWidth(view)
widthOfScreen = if (width <= 0) {
0
} else {
Math.abs(SMOOTH_VALUE * top / width)
}
return if (widthOfScreen == 0 && firstPos > 0) {
SMOOTH_VALUE * firstPos - 1
} else SMOOTH_VALUE * firstPos + widthOfScreen
}
companion object {
private const val SMOOTH_VALUE = 100
}
}
Here is the screenshot of the layout:
I'd like to headers in a list using the android.arch.paging components.
Usually this would easy enough, just add different types for a RecyclerView adapter to handle and create a new list from items including headers.
But with the paging components I'm essentially handing the PagedList a PositionalDataSource from an SQL query. Is it possible to interrupt this and add header types?
How I ended up solving this for anyone interested.
when binding the data I pass in the previous item as well
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val item = getItem(position)
val previousItem = if (position == 0) null else getItem(position - 1)
holder.bind(item, previousItem)
}
Every view then sets a header, which is only made visible if the previous item doesn't have the same header.
val previousHeader = previousItem?.name?.capitalize().first()
val header = item?.name?.capitalize()?.first()
view.cachedContactHeader.text = header
view.cachedContactHeader.isVisible = previousHeader != header
Update 24/01/20
Since answering this I have changed to using a custom ItemDecoration
class StickyHeaderDividerItem(
context: Context,
private val stickyHeaderCallbacks: StickyHeaderCallbacks
) : ItemDecoration() {
private val headerHeight = context.resources.getDimensionPixelOffset(R.dimen.sticky_header_height)
private var headerView: View? = null
private var headerTextView: TextView? = null
private var headerEndTextView: TextView? = null
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: State) {
super.getItemOffsets(outRect, view, parent, state)
val position = parent.getChildAdapterPosition(view)
if (position >= 0 && stickyHeaderCallbacks.isHeader(position)) {
outRect.top = headerHeight
}
}
override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: State) {
super.onDrawOver(canvas, parent, state)
if (headerView == null) {
headerView = (parent.inflate(R.layout.list_item_sticky_header)).apply {
fixLayoutSize(this, parent)
}
headerTextView = headerView?.headerText
headerEndTextView = headerView?.headerEndText
}
var previousHeader = ""
parent.children.toList().forEach { child ->
val position = parent.getChildAdapterPosition(child)
val headerTitle = position.takeIf { it >= 0 }?.let(stickyHeaderCallbacks::headerTitle).orEmpty()
val headerEndTitle = position.takeIf { it >= 0 }?.let(stickyHeaderCallbacks::headerTitleEnd)
headerTextView?.text = headerTitle
headerEndTextView?.text = headerEndTitle
if ((previousHeader != headerTitle) || (position >= 0 && stickyHeaderCallbacks.isHeader(position))) {
headerView?.let { drawHeader(canvas, child, it) }
previousHeader = headerTitle
}
}
}
private fun drawHeader(canvas: Canvas, child: View, headerView: View) {
canvas.run {
save()
translate(0F, maxOf(0, child.top - headerView.height).toFloat())
headerView.draw(this)
restore()
}
}
private fun fixLayoutSize(view: View, parent: ViewGroup) {
val widthSpec = View.MeasureSpec.makeMeasureSpec(parent.width, View.MeasureSpec.EXACTLY)
val heightSpec = View.MeasureSpec.makeMeasureSpec(parent.height, View.MeasureSpec.UNSPECIFIED)
val childWidth = ViewGroup.getChildMeasureSpec(widthSpec, parent.paddingStart + parent.paddingEnd, view.layoutParams.width)
val childHeight = ViewGroup.getChildMeasureSpec(heightSpec, parent.paddingTop + parent.paddingBottom, view.layoutParams.height)
view.measure(childWidth, childHeight)
view.layout(0, 0, view.measuredWidth, view.measuredHeight)
}
}
interface StickyHeaderCallbacks {
fun isHeader(itemPosition: Int): Boolean
fun headerTitle(itemPosition: Int): String
fun headerTitleEnd(itemPosition: Int): String? = null
}
In my app there is a recycler-view having video-views, I want to auto-play the specific video view which is completely in focus when scrolled.
RecyclerView rv_featureList;
private View currentFocusedLayout, oldFocusedLayout;
#Override
public void onCreate(Bundle instanceState) {
rv_featuredList.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView,
int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
//get the recyclerview position which is completely visible and first
int positionView = ((LinearLayoutManager) rv_featuredList.getLayoutManager()).findFirstCompletelyVisibleItemPosition();
Log.i("VISISBLE", positionView + "");
if (positionView >= 0) {
if (oldFocusedLayout != null) {
//Stop the previous video playback after new scroll
VideoView vv_dashboard = (VideoView) oldFocusedLayout.findViewById(R.id.vv_dashboard);
vv_dashboard.stopPlayback();
}
currentFocusedLayout = ((LinearLayoutManager) rv_featuredList.getLayoutManager()).findViewByPosition(positionView);
VideoView vv_dashboard = (VideoView) currentFocusedLayout.findViewById(R.id.vv_dashboard);
//to play video of selected recylerview, videosData is an array-list which is send to recyclerview adapter to fill the view. Here we getting that specific video which is displayed through recyclerview.
playVideo(videosData.get(positionView));
oldFocusedLayout = currentFocusedLayout;
}
}
}
});
}
Answer inspired from https://stackoverflow.com/a/45281307/9752209
Callback to get center item position when scrolling stopped
import android.content.Context
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class RecyclerCenterItemFinder(
private val context: Context,
private val layoutManager: LinearLayoutManager,
private val callback: (Int) -> Unit,
private val controlState: Int = RecyclerView.SCROLL_STATE_IDLE
) :
RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (controlState == ALL_STATES || newState == controlState) {
val firstVisible = layoutManager.findFirstVisibleItemPosition()
val lastVisible = layoutManager.findLastVisibleItemPosition()
val itemsCount = lastVisible - firstVisible + 1
val screenCenter: Int = context.resources.displayMetrics.widthPixels / 2
var minCenterOffset = Int.MAX_VALUE
var middleItemIndex = 0
for (index in 0 until itemsCount) {
val listItem = layoutManager.getChildAt(index) ?: return
val topOffset = listItem.top
val bottomOffset = listItem.bottom
val centerOffset =
Math.abs(topOffset - screenCenter) + Math.abs(bottomOffset - screenCenter)
if (minCenterOffset > centerOffset) {
minCenterOffset = centerOffset
middleItemIndex = index + firstVisible
}
}
callback(middleItemIndex)
}
}
companion object {
const val ALL_STATES = 10
}
}
recycler.addOnScrollListener(RecyclerCenterItemFinder(requireContext(),
recycler.layoutManager,
{ centerItemPosition ->
playVideoAtPosition(centerItemPosition)
}
))