How to Create Image Slider in Jetpack Compose with Indicator and Animate the Pages While Swiping

[Music] so hey guys in this tutorial I'm going to show you how you can create image slider using view pag in jetp compos so let's get started so first we need to create a new package here screens and let's uh create a composable function let's say uh image slider screen okay and composable one image slider screen okay and for image slider we need to create a list so I have already downloading uh downloading and place in images in the derable folder so you can see 2 three okay so first we need to create a list so w images list L of let let's say uh D do we need to import the resource image one images to do images 3 uh D image 4 and last image image 5 okay and then we need to create a view P pag state so War P state is equal to remember uh pag State okay and we need to pass the size okay so page count page count and image is do size okay uh this is the experimental AP so we need to import that okay this and okay so we need to Define box modifier modifier do rap content size comma content alignment uh alignment center okay and we need to define the horizontal viewpure and pass it State P the state okay and then we need to create a row and then we need to pass modifier by do rap content size do pting let's say dop and need to import that okay and we need to Define two paramet more parameters let's say horizontal Arrangement do Center and vertical alignment alignment do Center vertically okay and we need to Define c modifier your F Max BD do height let's say 300 AP okay and then we need to Define image um painter to painter The Source uh ID is equal to images list page okay uh yep p okay and we need Define content description why is this giving error I don't sorry uh content description let's say name it n and content scale content um cow and modifier modifier per next size okay okay and then we need to define the indicators as well so row modifier do R content height F Max P okay uh align alignment do bottom center and then we need to Define horizontal Arrangement Arrangement Center okay and then we need to create a indicators inside it so we need to use repeat and then pager state DOT page count okay and then let's uh iation and then W color is equal to if P state do current page is equal to iation and color dot [Applause] black okay lse color light gray okay and we need to create box modifier uh do padding let's say 2 DP do clip circle shape yes this one and background let's say color and do size let's say 16 okay so uh this part is to show the view of images and this part is for the indicator okay now we need to create uh call this image slider composable inside the main so image slide sorry image slider screen okay so let's run the application e [Applause] let's wait for the yes it's install so yes we have created the image slider okay you can customiz it uh according to your your use case Okay so if you want to customize it for example let's say using the anim uh animation on the pages then you can modify it using the graphic layer so let me show you how you can customize it okay dot graphic layer okay and then so for first you need to create a extension function so let's say one Pate do of set for page page which will be in typeal to current page minus Page Plus current of set flection okay yep uh we need to import experimental so here we go okay let's close it and then we need to go back to the graphic layer function and let's say one page offset equal to pager state do offset for page page okay and V of scre then write page offset l0 F okay this will be follow for degree could let's say 5 F 105 F and while interpolate ital to fast out L fast out linear in this is arising dot transform P offset do absolute value okay and uh rotation y to mean inter related if of off screen right then degree else minus degree comma 90f okay then transform orig is equal to Transformer is pit x uh if of screen right z l SP F okay P it y p y equal to let let's say5 F okay so that's it and let's test it by running the application again so now let's test it yes it working it's working okay uh I'm testing it on limitor that's why it's delaying the pages so that's it for this tutorial if you need any help then comment it on this video okay see you in next video okay see you bye-bye

Channel: Code With Danish

Views: 63

Keywords: Android, Jetpack Compose, Jetpack, Kotlin, Android Studio, KMP, CMP, Kotlin Multiplatform, Compose Multiplatform, Git, Github, ViewPager, Horizontal View Pager, Animation, ImageSlider, Layout, Manifest, IOS, Kotlin 2.0, ViewPager 2.0

Id: HId6DdgJzAc

Length: 16min 51sec (1011 seconds)

Published: Wed Jun 12 2024