How to Build a Swipeable Image Slider in Jetpack Compose - Android Studio Tutorial
Вставка
- Опубліковано 8 лют 2025
- In this video you'll learn how you can swipe between pages in Jetpack Compose. This is what was previously a ViewPager :)
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/...
💻 Let me be your mentor and become an industry-ready Android developer in 10 weeks:
pl-coding.com/...
🎓Become an industry-ready developer in the Mobile Dev Campus:
pl-coding.com/...
🎁 Get my FREE 4.5h course "The Best Practice Guide to Android Architecture":
pl-coding.com/...
Read our weekly Android blog:
pl-coding.com/...
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/phi...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/phi...
You like my free content? Here you can buy me a coffee:
www.buymeacoff...
Amazing as usual 🚀
you read my mind again. thanks !
Hi Sir, I am a student from India. I am passionate about Android dev and your channel is like wikipedia for me. But please make a video on how in app billing/subscription work in Android. Should we be build our own backend and create user account, how to call google billing api, etc. Please make a video that explains the entire process, if possible please show it practically.
Thank you 🙏
All that I needed, thanks.
thanks philip you r amazing
Hi Philipp! Thanks to you, I discovered Jetpack Compose, and I've already created two projects based on it. However, I am now facing a sad issue: implementing the Admob interstitial into the Compose function. I believe many would be interested in a video on this topic.
It's the same as in XML, you just put it in an AndroidView composable
@@PhilippLackner You are right, I've figured out today with it
hey Philip.. thanks for the video.. how to update the compose after deleting any item from the list? something like notifyItemRemoved() from recyclerview adapter
Nice video. I'm not a chicken expert but that seems a duckling instead 😄
How d'you make the swipe/scroll sensitive enough so tha you don't have to have your finger scroll/swipe through the entire screen?
Hi, Philipp!
Can you make video about strength of GPS signal or accuracy? For example, you are running in the forest, and gps signal was lost, I need to show strength of signal to user.
Thank you!
Hi Philip.. any idea on how to scroll to next image after deleting any image?
Thank you
Hello Phillipp,
Can you tell how to make this HorizontalPager infinite scrolling with this 3 items ?
I tried to use horizontal pager few weeks ago but it was kinda unstable. I had to implement it so It will automatically go to next page every few seconds. And It failed. The issue was - after navigation to next page it stopped when you saw 50% of previous screen, and 50% of next screen.
So i thought - well the thing i need is just a simple navigation. So i used navigator (Voyager library, but it can be any nav library, but please dont use google official navigation) and every few seconds i navigated to next screen. So if anyone struggle with the thing i struggled - i recommend navigation approach.
i search this thing in whole youtube funally founded
hey ! I have a question : when I wanna use horizontalPager, I have an error saying " This foundation API is experimental and is likely to change or be removed in the future. "
I know that I can avoid this error with @ExperimentalFoundationApi but this error is a real pain in the ass cause I have to put the @ at each function calling it
How to not have this error, like you ?
Is it about the version you show at the begining of the video ?
Good Video. Could you make a video of you showing a complex UI with compose?
How to make centered focus item bit bigger?
Hi Philip, Thanks for your efforts
What if I want to save the last image before closing the to open it on the next time
Hi,
Can you please make a video on ANR, how to detect and handle it.
Phillip HorizontalPager class not found :(( how to fix ?
are you using the source from the repo?
in Jetpack Compose project using HorizontalPager that it can't destroy old page. For example beyondBoundsPageCount arranged to 1 and then we expect HorizontaPager should destroy 0 index page when currentPageIndex is 2 but it couldn't. How can i fix that? Thanks.
how to make image scrollabe on landscape mode?
Does anyone know how to add an "overScroll" or "bounce" effect when you try to scroll before the first or past the last item on the list?
How should I change it to be infinite page that I can swipe 0 -> 1 -> 2 -> 0 -> 1 ->2 ... and so on.
You have to manipulate the underlying list accordingly
When we try to scroll right:If we are on the last page scroll to beginning.
if (pageState.CurrentPage == (animals.size -1) { animateScrollToPage(0)}.
Similarly, if we are on page 0 and try to scroll left, scroll to last item in the list.
lazy way of doing it would be to allocate INT.MAX_VALUE list size, position at half of that and just use mod to get the list index.
more efficient way of doing it if you use horizontal content padding to see left and right item as well is to use list,size + 4 (2 "fake" elements on the start, and 2 "fake" elements on the end. you could get away with just 1 but i find it smoother to scroll with 2. then you just map the pager index to your list index like so: list[(pagerState.currentPage - 2).mod(list.size)] and use launched effect to observe pager state and scroll to first and last elements when user goes to "fake" first or last. also be wary of isScrollInProgress flag and make sure to collect pager state when flag is false, otherwise user scroll can override your scrollToPosition coroutine and fuck up the paging
. Doesn't we need put a businees logic separately to ViewModel And State to Data class? thank you
that is a customary practice in Android, but its not required. You can write apps completely without viewmodels with just Compose.
@@ChrisAthanas thank you
what about vector images?
The problem is, when you start adding pan and zoom, things will start getting out of hand. Anyone know the workaround?
Why use offset of -16.dp and not paddingBottom of 16.dp?
That would also add padding to the pager
@@PhilippLackner but we still add a padding modifier of 8dp after the offset modifier
@@safionweb with padding we expand white background for our box. With offset we move the box higher so that borders don't touch edge of the screen
@@tambosa1 thanks. Got it.
@@PhilippLackner
adding 16dp bottom padding after the background modifier should do the trick as well.
in order like... padding(bottom = 16.dp) -> clip -> background -> fillMaxWidth() -> padding(8.dp)
padding before setting the size is actualy a margin, padding after the size is the real padding, if we are looking at xml layout behaviour
Please make a video on instagram clone from scratch using jetpack compose. Not as an UI and proper logic and firebase
1