RecyclerView in nested ScrollView below CollapsingToolbar auto scroll - kotlin

I have a CordinatorLayout in which there is CollapsingToolbarLayout and below it is NestedScrollView to achieve collapsing with:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Inside nested scroll view there is a RecyclerView. I need to auto scroll the RecyclerView to a particular position when the Fragment is called. Need to set it programmatically. Any help please.

try this:
Handler(Looper.getMainLooper()).postDelayed(
{
binding.nestedScrollContainer.smoothScrollTo(0, binding.myRecyclerview.bottom)
binding.myRecyclerview.nestedScrollBy(0, binding.myRecyclerview.bottom)
},
200
)

Related

BottomSheetDialogFragment scrolls down on notifyDataSetChanged()

I am using recycler view inside BottomSheetDialogFragment with dialog state behaviour as BottomSheetBehavior.STATE_EXPANDED but when I notify recycler view with notifyDataSetChanged the bottomSheet scrolls down.
The expected behaviour is that the bottomSheet height remains same.
Please help me in achieving this??

How to implement left and right swipe to reveal buttons in recycler view?

I need to implement left and right buttons in recycler view. I need to have 3 buttons in left side and right side. Also when say bottons like Pin, Edit etc. Something like below images.
I have implemented this using item decoration of recyclerview
val itemTouchHelper = ItemTouchHelper(swipeController)
itemTouchHelper.attachToRecyclerView(recyclerView)
recyclerView?.addItemDecoration(object : RecyclerView.ItemDecoration() {
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
swipeController.onDraw(c)
}
})
When I select favorite in a row that state needs to be saved and when I swipe that particular cell again it should be highlighted to show that it is selected. I am not able to implement this. Please let me know if there is some alternative solution to implement this.
Thanks

Why aren't all items displayed in the ScrollView?

I have a Flatlist inside a ScrollView with 100 items, but no matter what height I give to the ScrollView or Flatlist, there are always just 18 items displayed on my Phone. After that the slider of the ScrollView is still scrolling down, but the list ends after 18 items. I want to be able to scroll through the complete list of items with the ScrollView containing the FlatList. I am using a Samsung Galaxy S8+ as a test device.
Here is a snack of the problem: https://snack.expo.io/#christophhummler/stickyheaderscrollscreens
Thanks for your help :)
I think it has to do with the scrollEnabled={false}, set it to true or remove the prop altogether otherwise it may be your todos array
Edit
Since you want to create a sticky header you must set the height to be the device height of screen + height of header, change styles.scrollView to :
scrollView: {
height: height + 200,
}
also on android there is an issue of nesting scrollviews, to enable a nested scrollview add the nestedScrollEnabled prop:
<FlatList
...
nestedScrollEnabled={true}
/>
You will have to implement logic to enable the Flatlist scroll view when the specific threshholds are met. It works at the moment in conjunction with scrollEnabled={true}
i hope this helps

How can I implement animate on page scroll?

When a user scrolls through a webpage, how can I trigger animate css?
Is it a matter of when v-show="element" appears, trigger x?
Using Vue 2 + animate css
I found answer from Ikbel useful
How to display and transition when scroll position reaches element position in the screen?
you can achive this with custom directive which adds binding inViewport for window scroll event to elements that you want to animate.
I added data-transition to html element that I want to animate
<div v-vpshow data-transition="flipInX"><div>
and changed binding like this
el.$onScroll = function() {
if (binding.def.inViewport(el)) {
el.classList.add('animated')
el.classList.add(el.getAttribute('data-transition'))
el.classList.remove('before-enter')
binding.def.unbind(el, binding)
}
}

Setting an initial scroll position of a React Native ListView

I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.