you are one of the best just because of you i just switched to jetpack , initially i was hating this jetpack stuff and finding xml , easy as compared to jetpack , but now i started liking jetpack too much , it is really amazing , initially it becomes way to difficult , not able to understand what is happening with regular practice efforts and i am able to understand how it is working
PagerState has a property called "targetPage", it works better than what Philipp suggested as there is some delay when waiting pager animation to finish.
@@tonymont72 I've used setup by @tusharbhatia6777 's comment, but replaced the pagerState.currentPage with pagerState.targetPage, that prevents the weird flickering issue happening otherwise as you scroll over the in-between pages.
For anyone facing the delay in indicator changing , i fixed the issue code: val scope = rememberCoroutineScope() LaunchedEffect(pagerState.currentPage) { selectedTabIndex = pagerState.currentPage } in Tab ,onclick = { scope.launch { pagerState.animateScrollToPage(index) } selectedTabIndex = index } remove the other LauchedEffect he typed in video
@@abada-s Just wanted to chime in and say that I tested this and it works as expected. The only minor thing is that for the onClick you have to account for PagerState.animateScrollToPage being a suspending function.
Thank you very much Philipp,, is it possible to reduce the space between tabs? the current default value is: private val ScrollableTabRowMinimumTabWidth = 90.dp
Funny thing I spent almost the last two days figuring this thing out and now it's here. Should've waited. Question : When using the scrollable tab, how do you keep the selected tab focused on the screen when swiping the horizontal pager to a tab that isn't on the screen yet(say the last screen). I hope my question is clear
So this could also easily be bottom Navigation bar or should we then stick to the other video for this topic? I am a bit confused. Your way in this video now looks better and has more features.
First, thank you very much for all of your content, I watch almost all of your videos. While it works, The tab doesn't update until the end of the scrolling. It would be better if booth where synchronized
you just solved me a bug with the horizontal pager to get the index, i was executing a method inside the horizontal pager instead of launched effect.... those timings insane
Hy Philip. Sorry if asking off topic. I've seen your video creating an Instagram profile page. I want to ask, how can the list of "content" that appears continue to scroll down?
Hi! Thanks for the video. One question please: When I use isScrollInProgress, there is a bit of a lag to move the selectedTabIndex in the TabRow. Is there a solution for this lag?
Hi! I have the same issue. Did you got any solution ? when i dont use isScrollInProgress there is still a very little lag. I mean this is not smooth as Watsapp swip for exemple.
How can I make multiple pages with different stateflow list?? spwiping pages are worling terrible and recreating multiple ties if using live data inside it.
Hi everyone, I repeated exactly the code from the video, but when I got to two Lauchedeffect's, they did not change the operation of the application in any way and even with them the application works the same as without them. I don't understand what's wrong here. Thanks to everyone who can help me
I still have difficulty in using jetpack compose because it doesn't have the xml view where you can just drag and drop your designs (from figma) then code the functions in the background.
Hello, I am writing through a translator so it may not be clear... In the place where there is a comment ( //Some screen) I place my screen. In your example, there are a lot of unnecessary recompositions. see if I made the changes correctly. Thank you Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) {
This is the simplest and easiest solution for implementing swipeable tab rows in jetpack compose I've seen so far, well done and thanks Phillips
you are one of the best just because of you i just switched to jetpack , initially i was hating this jetpack stuff and finding xml , easy as compared to jetpack , but now i started liking jetpack too much , it is really amazing , initially it becomes way to difficult , not able to understand what is happening with regular practice efforts and i am able to understand how it is working
This is the best of Tutorial, you explain all need we must learn without chitchat 🎉🎉🎉
PagerState has a property called "targetPage", it works better than what Philipp suggested as there is some delay when waiting pager animation to finish.
How did you handle the delay?
@@tonymont72 I've used setup by @tusharbhatia6777 's comment, but replaced the pagerState.currentPage with pagerState.targetPage, that prevents the weird flickering issue happening otherwise as you scroll over the in-between pages.
@Phillip Lackner The Source code link is responding with 404... is the link correct?
For anyone facing the delay in indicator changing , i fixed the issue
code:
val scope = rememberCoroutineScope()
LaunchedEffect(pagerState.currentPage) {
selectedTabIndex = pagerState.currentPage
}
in Tab ,onclick = {
scope.launch {
pagerState.animateScrollToPage(index)
}
selectedTabIndex = index
}
remove the other LauchedEffect he typed in video
thx bro !
This is the correct way to do it, thanks
What if we need to add composables in side these tab rows how can we do it can you help pls
We call that composable
Like
Screen A()
Screen B()
great work bro
Philp you are the best
thanks Philipp, you are great
Philip you've been my best teacher in Kotlin .was just wondering if we could modify the Tab indicator to have rounded corners like that of twitter .
Source code is 404, where can i get it. I have problem, my pager does not change when tab is changed
Why didn't you use the pagerState.currentPage as the index of the selected tab? also tab onClick will animate the pager state to the selected index
Does that also behave correctly when switching from start to end tab?
@@PhilippLackner I didn't test it but it should be fine because we are dealing with one state
@@abada-s if that works well, it seems like the better solution. Thanks for adding 👍🏼
@@abada-s Just wanted to chime in and say that I tested this and it works as expected. The only minor thing is that for the onClick you have to account for PagerState.animateScrollToPage being a suspending function.
Thank you so useful it's I need it just right now 😂❤
Thank you very much Philipp,, is it possible to reduce the space between tabs?
the current default value is: private val ScrollableTabRowMinimumTabWidth = 90.dp
keep the good work❤
Funny thing I spent almost the last two days figuring this thing out and now it's here. Should've waited.
Question : When using the scrollable tab, how do you keep the selected tab focused on the screen when swiping the horizontal pager to a tab that isn't on the screen yet(say the last screen). I hope my question is clear
What will be best way achieve bottom bar? I mean viewpager is better or bottom bar layout?
Hi why are you not using button nav bar in the scaffold?
Hi Phillip, please make a tutorial with MongoDB 🙏
So this could also easily be bottom Navigation bar or should we then stick to the other video for this topic? I am a bit confused. Your way in this video now looks better and has more features.
thanks so much you saved me
Like always great videos , thanks you very much ! :)
First, thank you very much for all of your content, I watch almost all of your videos.
While it works, The tab doesn't update until the end of the scrolling. It would be better if booth where synchronized
Page not found for repo in description
Dude ur so so so underrated
you just solved me a bug with the horizontal pager to get the index, i was executing a method inside the horizontal pager instead of launched effect.... those timings insane
Source code link is saying 404 not found
Thank you Sir
Hy Philip.
Sorry if asking off topic.
I've seen your video creating an Instagram profile page. I want to ask, how can the list of "content" that appears continue to scroll down?
Can you make a video how to combine TabRows with TopAppBar that has scroll behaviour?
Especially how to keep the selected tab in focus. This would be very helpful as I'm struggling to figure out
Hi! Thanks for the video.
One question please: When I use isScrollInProgress, there is a bit of a lag to move the selectedTabIndex in the TabRow. Is there a solution for this lag?
Hi! I have the same issue. Did you got any solution ?
when i dont use isScrollInProgress there is still a very little lag. I mean this is not smooth as Watsapp swip for exemple.
i came into this wired situation too
@wilianc.b.3065 @nadirseddaoui8136
LaunchedEffect(pagerState.targetPage){
selectedTabIndex= pagerState.targetPage
}
should fix this problem
@@itsusinn Thanks, this fixed the issue
Did something very similar on flutter very recently 😅. My implementation was for 2 tabs and 2 pages.
tabrow is deprecated now so what alternative can i use
How can I make multiple pages with different stateflow list?? spwiping pages are worling terrible and recreating multiple ties if using live data inside it.
github url not taking me to the code. ?
Thank you!!!!!
Awesome!! well done
Great 👍
Hi ,XIaomi device does not dismiss lockscreen when opening Activity from background (VOIP Call) please help me out regarding this
point
amazing
What if we need to add composables in side these tab rows how can we do it can anyone help pls
Answer
HorizontalPager(state = pagerState, modifier = Modifier
.fillMaxWidth()
.weight(1f)
){ index ->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
){
when ( index ){
0 -> PersonalScreen()
1 -> ServicesScreen()
2 -> BusinessScreen()
}
}
}
Please provide a good promo code for your " Ultimate PL course bundle"
Hi everyone, I repeated exactly the code from the video, but when I got to two Lauchedeffect's, they did not change the operation of the application in any way and even with them the application works the same as without them. I don't understand what's wrong here. Thanks to everyone who can help me
I still have difficulty in using jetpack compose because it doesn't have the xml view where you can just drag and drop your designs (from figma) then code the functions in the background.
Bro 🤣
고아워여
heeey :D Can you make a video about cucumber(BDD) in android (with hilt)?
Mool😮😅
😂😂
방해해..누가
😂
bruh why you make your voice sound so weird. sounds like metal gear solid and the codec is running out of batteries
Hello, I am writing through a translator so it may not be clear...
In the place where there is a comment ( //Some screen)
I place my screen.
In your example, there are a lot of unnecessary recompositions.
see if I made the changes correctly.
Thank you
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
val pagerState = rememberPagerState { tabItem.size }
val coroutineScope = rememberCoroutineScope()
Column(
modifier = Modifier.fillMaxSize()
) {
TabRow(selectedTabIndex = pagerState.currentPage) {
tabItem.forEachIndexed { index, tabItem ->
Tab(
selected = true,
onClick = {
coroutineScope.launch { pagerState.animateScrollToPage(index) }
},
text = { Text(text = tabItem.title) },
icon = {
Icon(
imageVector =
if (index == pagerState.currentPage) tabItem.selected else tabItem.unselected,
contentDescription = null
)
})
}
}
HorizontalPager(
modifier = Modifier.weight(1f),
state = pagerState
) { index ->
//Some screen
}
}
}
Thanks! I this approach works perfectly.
This solution is better than the one provided in the video, and without lags and workarounds.
Thanks