diff --git a/README.md b/README.md new file mode 100644 index 0000000..783f3a6 --- /dev/null +++ b/README.md @@ -0,0 +1,131 @@ +# View Pager(2) dots indicator + +This repository was created to present you implemented dots indicator +either for `ViewPager` or `ViewPager2`. + + +## How to implement View Pager dots indicator? + +All we need are: [ViewPager][1], [TabLayout][2] and 2 drawables for +selected and default dots. + +Firstly, we have to add `TabLayout` to our screen layout, and connect it +with `ViewPager`. We can do this in two ways: + + +### Nested `TabLayout` in `ViewPager` + +```xml + + + + +``` + +> In this case `TabLayout` will be automatically connected with +> `ViewPager`, but `TabLayout` will be next to `ViewPager`, not over it. + +### Separate `TabLayout` + +```xml + + + +``` + +> In this case, we can put `TabLayout` anywhere, but we have to connect +> `TabLayout` with `ViewPager` programmatically + +```java +ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager); +PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl); +pager.setAdapter(adapter); + +TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout); +tabLayout.setupWithViewPager(pager, true); +``` + +Once we created our layout, we have to prepare our dots. So we create +three files: `selected_dot.xml`, `default_dot.xml` and +`tab_selector.xml`. + +### selected_dot.xml + +```xml + + + + + + + + +``` + +### default_dot.xml + +```xml + + + + + + + + +``` + +### tab_selector.xml + +```xml + + + + + + + +``` + +--- + +Now we need to add only 3 lines of code to `TabLayout` in our XML +layout. + +```xml +app:tabBackground="@drawable/tab_selector" +app:tabGravity="center" +app:tabIndicatorHeight="0dp" +``` + + + +*[ViewPager with dots indicator][3] at medium.com* + +*Up-votes are welcome ;-)* + +[1]: +https://developer.android.com/reference/androidx/viewpager/widget/ViewPager?hl=en +[2]: https://developer.android.com/reference/com/google/android/material/tabs/TabLayout?hl=en +[3]: https://medium.com/@adrian.kuta93/android-viewpager-with-dots-indicator-a34c91e59e3a +