Viewpager2 with Dot indicator/ Image Slide with Dot indicator in Android | Kotlin | Android Tutorial

hi today in this video I'm going to show you how to implement view pager two with DOT indicator or image slider with do indicator so let's get it started first we create our project here I'm selecting empty view activity and click on next name of your project and here I'm selecting language cotl and click on next so first I'm saving some images in dyable folders so here you can see I have added some images in drawable folder now we create some drawable resource files so here create dyable resource file and name it do selected and here we use shape so when we swp any image how it will displayed so here we Define find the shape and the colors Now set the size so this file defines the appearance of the selected dots now create another drivable resource file and name it do unselected and this file defines the appearance of of unselected dots now we create another travel resource file and name in do selector so this is a selector file and it is used to change the appearance of dots when selected and unselected now open mean activity. XML and this XML file contain the view pager and the custom do indicator so here we use linear layout now now at view pager so here we have to add some dependency in build. gridle app level so here you can see I have added view pager two dependency and click on sync now now open activity me. XML now add linear layout for custom. indicator now we create a layout file so here we click on layout resource file and name it item page and this layout file we will use to define the individual items in the view pager and you can customize it according to your need so here we use linear layout so here you can add your content here so here I'm add one text View and one image View now we create another layout resource file and name it indicator and this file we use for the dot indicator so here we use do selector drawable file now we will create viewer adapter that will display the content so here click on cotlin class file so in the my paser adapter class you should place the data that you want to display within your view pager to and this data should be in the format that correspond to the content of each page or it in the view pager too and your model class should encapsulate the information you want to display so here we create data class and name it model so here model class is a data class that represent the data for each page in the view pager two and it contains the properties like title description and image View and here we pass model class and this class my paser adapter class extend the res cycl view so now we create view holder for each page and wind the data from your model class to the view in the item. page. XML file and here we use view holder so here on create view holder and this method is called when the recycl view needs a new view holder of the given type of to represent an item and here get count written the total number of item in the data set held by the adapter and on Vine view holder is called by the recycler view to display the data at the specified position so here we create View and we here we insulate our item page XML file and online view holder we use to display the data by using position so here we get the ID of the title text view similarly description text View and the image View now after creating the adapter open main activity. KT and here we set up the view pager two with our adapter and Dot indicator so first we get the ID of view pager and do indicator from XML file by using find viy ID now we create the list of model instance and pass this list to the my page adapter when setting of the view pager so here we create the list of model instance now we set the adapter and here we pass our list of items and then we set this adapter to our view page now we create the dot indicator so this dot indicator depend upon the size of your list so here we create create do indicator function and here we pass the dot selector so here create dot indicator function is used to create the dot indicator for each page in the view page two and these dot indicator are typically used to visually present the number of page and indicate which page is currently being viewed so this function is responsible for creating a set of do indicator views and adding them to the dot indicator each do indicator represent a page in view pager now we create update do indicator function and this update do indicator function is used to update the appearance of the dot indicators in response to changes in the currently selected page within the view pager it ensure that the dot corresponding to the selected page is highlighted while remains are unselected so here we attach a page change call back to update the selected Dot now create an override method on page selected and here we call update do indicator now run the project so here you can see the output when I slide the image our DOT indicators is also changes position don't forget to like comment share and subscribe

Channel: Learn With Deeksha

Views: 827

Keywords: android viewpager2, viewpager2 in android, viewpager2, android viewpager, android studio, android, android image slider, viewpager2 with tablayout android kotlin example, android viewpager2 tutorial, viewpager2 with fragments example in android, android tutorial, android viewpager2 tablayout, auto image slider in android studio, android tablayout tutorial using viewpager and fragments, kotlin, image silder with dot indicator

Id: tUEJ-GakBis

Length: 15min 22sec (922 seconds)

Published: Sat Oct 21 2023