Swipeable Tab Rows - UX With Material3
Vložit
- čas přidán 8. 09. 2024
- In this video you will learn how you can create a tab layout in Material3 and Jetpack Compose so you can swipe between pages.
⭐ Let me be your mentor and I'll make you an industry-ready Android developer in 10 weeks
⭐ Apply now:
pl-coding.com/...
Get the source code for this video on GitHub:
github.com/phi...
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
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
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?
This is the best of Tutorial, you explain all need we must learn without chitchat 🎉🎉🎉
@Phillip Lackner The Source code link is responding with 404... is the link correct?
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
thanks Philipp, you are great
Philp you are the best
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 .
Dude ur so so so underrated
keep the good work❤
Did something very similar on flutter very recently 😅. My implementation was for 2 tabs and 2 pages.
Like always great videos , thanks you very much ! :)
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
Hi why are you not using button nav bar in the scaffold?
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
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
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.
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.
Hi Phillip, please make a tutorial with MongoDB 🙏
thanks so much you saved me
Awesome!! well done
Thank you Sir
Source code is 404, where can i get it. I have problem, my pager does not change when tab is changed
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
Page not found for repo in description
What will be best way achieve bottom bar? I mean viewpager is better or bottom bar layout?
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
Thank you!!!!!
Great 👍
amazing
Source code link is saying 404 not found
Hi ,XIaomi device does not dismiss lockscreen when opening Activity from background (VOIP Call) please help me out regarding this
point
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.
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 🤣
고아워여
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?
github url not taking me to the code. ?
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
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()
}
}
}
tabrow is deprecated now so what alternative can i use
Please provide a good promo code for your " Ultimate PL course bundle"
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