Swipeable Tab Rows - UX With Material3

[@Alchemist10241]

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

[@Luffy_2804]

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

[@tusharbhatia6777]

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

[@nadirseddaoui8136]

thx bro !

[@makix08]

This is the correct way to do it, thanks

[@ritikrawat2447]

What if we need to add composables in side these tab rows how can we do it can you help pls

[@tusharbhatia6777]

We call that composable Like Screen A() Screen B()

[@MuhammadUbaid-j4o]

great work bro

[@azickri]

This is the best of Tutorial, you explain all need we must learn without chitchat 🎉🎉🎉

[@teovladusic]

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]

How did you handle the delay?

[@cyrdas]

@@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.

[@ChrisAthanas]

@Phillip Lackner The Source code link is responding with 404... is the link correct?

[@Ayor88]

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

[@JJSS90]

Philp you are the best

[@kirwakelvinkering3122]

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 .

[@wikigerman]

Thank you very much Philipp,, is it possible to reduce the space between tabs? the current default value is: private val ScrollableTabRowMinimumTabWidth = 90.dp

[@lucachangretta2025]

Dude ur so so so underrated

[@nastenkaoo]

thanks Philipp, you are great

[@anthonydanyameabuah4542]

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

[@funclips767]

keep the good work❤

[@Leon-un2ii]

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.

[@GandhiWibowo-h7f]

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?

[@wilianc.b.3065]

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?

[@nadirseddaoui8136]

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.

[@itsusinn]

i came into this wired situation too

[@itsusinn]

@wilianc.b.3065 @nadirseddaoui8136 LaunchedEffect(pagerState.targetPage){ selectedTabIndex= pagerState.targetPage } should fix this problem

[@JJSS90]

@@itsusinn Thanks, this fixed the issue

[@luciferGOD1234]

What will be best way achieve bottom bar? I mean viewpager is better or bottom bar layout?

[@johnoricha7088]

Did something very similar on flutter very recently 😅. My implementation was for 2 tabs and 2 pages.

[@unknownBoy85lover]

Thank you so useful it's I need it just right now 😂❤

[@david_whyte]

Hi why are you not using button nav bar in the scaffold?

[@wyneci]

Hi Phillip, please make a tutorial with MongoDB 🙏

[@dreW1-]

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

[@zulhijananda5772]

Source code is 404, where can i get it. I have problem, my pager does not change when tab is changed

[@abada-s]

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

[@PhilippLackner]

Does that also behave correctly when switching from start to end tab?

[@abada-s]

@@PhilippLackner I didn't test it but it should be fine because we are dealing with one state

[@PhilippLackner]

@@abada-s if that works well, it seems like the better solution. Thanks for adding 👍🏼

[@wesd3fer]

@@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.

[@John-qt6qk]

Awesome!! well done

[@gamecool2110]

thanks so much you saved me

[@padmakargarg9720]

Hi ,XIaomi device does not dismiss lockscreen when opening Activity from background (VOIP Call) please help me out regarding this point

[@jishnupdileep3143]

[@saeedghiassy5435]

Like always great videos , thanks you very much ! :)

[@rakam.a8070]

Can you make a video how to combine TabRows with TopAppBar that has scroll behaviour?

[@anthonydanyameabuah4542]

Especially how to keep the selected tab in focus. This would be very helpful as I'm struggling to figure out

[@divyathakur5885]

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.

[@DmitryZatuchny]

Page not found for repo in description

[@TheFlexath]

Thank you Sir

[@denisk3852]

Great 👍

[@زيد_اليماني]

amazing

[@m777rmc3]

Thank you!!!!!

[@nijithebuji]

Source code link is saying 404 not found

[@lariniabdellah1820]

tabrow is deprecated now so what alternative can i use

[@dr.paradoxdelusionsofgrandeur]

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.

[@KaroKaro290]

Bro 🤣

[@thelight786]

github url not taking me to the code. ?

[@goole-k3z]

고아워여

[@DasBy768]

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

[@tushar_mahale]

Please provide a good promo code for your " Ultimate PL course bundle"

[@ritikrawat2447]

What if we need to add composables in side these tab rows how can we do it can anyone help pls

[@ritikrawat2447]

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() } } }

[@lawrence1519]

heeey :D Can you make a video about cucumber(BDD) in android (with hilt)?

[@MohdAflah.k]

Mool😮😅

[@goole-k3z]

방해해..누가

[@goole-k3z]

😂😂

[@goole-k3z]

😂

[@GRIFTYRODRIGUEZ]

bruh why you make your voice sound so weird. sounds like metal gear solid and the codec is running out of batteries

[@Relax-4-Relax]

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 } } }

[@enriqueajin6016]

Thanks! I this approach works perfectly.

[@tech_ch1211]

This solution is better than the one provided in the video, and without lags and workarounds. Thanks