AUTO IMAGE SLIDER - PAGER - Android Jetpack compose

hello my friends and welcome back to new video in this video I'm going to show you how to build this application in the most of famous applications you can see they have a banner just like this on the top and some pictures uh will be displayed and automatically it will be slided to next uh picture pictures are based on the topic of the application if it is a shopping application you can see different products of this application of the shop if it's a News application you can see the breaking news on the top if it's currency app you can see the famous currencies exchange rates on the top and it's like this you have two buttons to control the SL slides based on your need and you can slide just like this and you can hold one of them to read the news for example and that's it let's implement it before I start recording I have located four images in the draw and also in the grade I have added this dependency for the pager and I've changed as always the target SDK and the compile SDK 234 at this time that I'm recording this uh video then let's sync them and we are ready to use uh the page okay let's check again what do we have to uh start designing the layout here on the top we have this uh slider the horizontal pager let's say and inside of it we have the images and uh down below we have the spage indicator so we need a column to locate this uh horizontal pager inside it and to locate this below of this uh horizontal page and also these buttons as you can see the position of them is constant on the screen so uh on the top of this horizontal uh pager we have uh one box to hold this buttons inside it these are icon buttons so we need that box as let's create it I'm going to start with having a column here here in the column I need a modifier uh field Max size and horizontal alignment alignment center horizontally then inside of it I need a box as I said modifier dot uh rap content size and inside of this box I'm going to create uh this pager first and uh for the pager we need a state so here I'm going to create a value calling it uh pager estate equals to remember pager State and as the page count I'm going to pass the size of this list so images do size uh sorry we don't need this bracket okay and I'm going to pass this pager State here then for the pager I need a modifier R content size and padding of 26. DP importing DP and that's it for the horizontal pager inside of the pager uh we need a card that holds a image inside okay and inside of this uh I'm going to use image as the painter we need a painter Resource as the ID I'm going to pass images and current page and for the content description I'm going to pass not uh I think that's okay for this part uh let's check what do we have till now on the emulator okay uh we have this uh image inside of this uh card and as you can see these are attaching each other so it's better to have the padding inside of this horizontal pager on the card not on the pager so let's take this padding and and leave it here and let's take it again okay now we have the space between the Cards and it looks great okay let's implement the logic for it uh to make it automatic uh sliding then we will continue with the rest of the uh material okay here on the top after this I'm going to call uh no a launch effect and no need anything here we are going just to pass a unit here and inside it while it's true uh we need a delay let's have it 2,000 milliseconds and I'm going to create a value calling it next page equals to page estate. current page uh plus one and modulus pager State DOT page count then pager estate do scroll to page then we are going to pass this next page here so simply it will find the next page number and we will pass it here and uh that's it okay let's check it okay as you can see after 2 second the slide will be changed now let's go uh further to create this page indicator and this buttons here okay here down below I'm going to add this uh icon buttons inside of this box it has unclick and uh also we need a modifier here as well a padding of 30. DP then size of 48. DP uh align alignment dot uh Center end do c uh circle shape okay and here we need an icon with image Vector then icons dot field dot let me go down to find it now it's here this one uh keyboard Arrow right and content description null again and for the icon we need again a modifier with size or maybe have it fi Max size better then tin and color do light gray okay here we have everything for this and let's duplicate it and this time uh instead of Center end we will have Center start and instead of right we will have left okay now we need to implement Logic for the unclick of this uh icon buttons to control the slide number here on the top we need value calling it a scope equals to remember cor routin scope and here for the next button uh we will check if value next page equal to pager estate. current Page Plus one we'll take it if uh this next page is smaller than images. size then we are going to use this es scope do lunch and pag estate do scroll to page next page and uh we will use this part for the back button sorry I made a mistake this one is the back button so it should be here and this one should be here but with some changes uh this time we are going to create another value calling it preview uh page equals to pager state DOT current page minus 1 and checking this preview page if it's greater or equal to zero then we will go to previous page and uh that's it let's check it we have an error okay here we don't need this on the import the rest are good let's take it here we have this uh buttons but the background uh is missing let me create a background for it and as you can see the slide is changing okay um after this modifier inside this uh icon button after the modifier uh we need the color colors equal to Icon uh button defaults dot icon button colors and here container color equals to color z x FF 37 37 37 it's a gray color and I'm going to make it transparent just like this let's copy this for the next button as well icon button after the modifier and let's check it [Music] again okay we have this Shadow under this buttons and you can see it now the page indicator okay it should be uh let's say inside of this uh column this one but outside of the uh box better to have it outside of the box so here this is the end of this PL here I'm going to add this Zoom uh uh we need a function for this calling it page indicator and we need page count and we can use the page count by the uh pager estate but no matter let's send it here so images do size and current page equals to pag estate do current page and the modifier let's create this function okay we have everything that we need uh here for the page indicator we need a row to have the dots inside it and uh then we will have another uh composable function for the dots itself uh so here I need a row horizontal Arrangement Arrangement uh a spaced between then vertical alignment alignment center vertically and a modifier equals to modifier then we will repeat the page count okay what's the functionality of this repeat uh the page count here is three that mean sorry four that means four time repeat whatever that we have during inside of this uh block uh so inside of this block I'm going to create another compos function indicator D dots and uh I'm going to create a Boolean if it's selected or not then It Gos to current page let's create create this composable function as well and this Boolean is passed here okay we need a box uh and also let's pass the modifier here as well modifier equals to modifier okay we have the modifier here so equals to uh modifier dot not fi Max size I just want to pass this to next line okay dot a padding for the beginning uh two DP between the dots then do size and here we have to create this size um I want to have different size for the dots if it's selected bigger if it's not selected a bit smaller so we are going to create a value calling it size equals to animate uh DP as a state then the target value if uh is selected we will have it 12. DP and else 10. DP and finally we need a label and I'm going to leave it empty then I'm going to pass this size here dot value the next thing that we need is a clip and circle shape again and the background if uh again is selected we will Implement uh color a gray color we need so 0 x uh FF 37 37 37 something like that and else color again the same uh 0 x FF 37 37 37 and the second color I'm going to choose it and make it a bit transparent okay now we don't have same color the selected color is uh darker and unselected color is uh lighter let's check it okay here we have different size in the dots and different color in the dots as you can see everything works uh perfect I can control the slide by press pressing the buttons back and next and also by sliding them and that was everything about this video if it's uh first time that you are here please hit the Subscribe button to be aware about new videos and if you like this video please give me a thumbs up uh to make uh me happy and give me energy to make more videos for you thank you very much for your time if if you have any question if any suggestion write them down below in the comment box and I will be so happy to read answer them have a good time bye-bye

Channel: MkrDeveloper

Views: 1,167

Keywords: AUTO SLIDING BANNER Android Jetpack compose, Android jetpack compose AUTO SLIDING BANNER, AUTO SLIDING BANNER in Android Jetpack Compose?, AUTO SLIDING BANNER - jetpack compose, AUTO SLIDING BANNER jetpack compose, jetpack compose AUTO SLIDING BANNER, AUTO SLIDING BANNER android kotlin, AUTO SLIDING BANNER android studio, MkrDeveloper, Mohsen mashkour, android studio, android image slider, image slider, jetpack compose, android studio tutorial, auto image slider in android studio

Id: yGPfPVV6bLo

Length: 27min 36sec (1656 seconds)

Published: Sat Oct 14 2023