Android ViewPager with bottom dots
No need for that much code.
You can do all this stuff without coding so much by using only viewpager
with tablayout
.
Your main Layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"/>
</RelativeLayout>
Hook up your UI elements inactivity or fragment as follows:
Java Code:
mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);
That's it, you are good to go.
You will need to create the following xml resource file in the drawable folder.
tab_indicator_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent"/>
</shape>
tab_indicator_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:thickness="2dp"
android:useLevel="false">
<solid android:color="@android:color/darker_gray"/>
</shape>
tab_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_indicator_selected"
android:state_selected="true"/>
<item android:drawable="@drawable/tab_indicator_default"/>
</selector>
Feeling as lazy as I am? Well, all the above code is converted into a library!
Usage
Add the following in your gradle:implementation 'com.chabbal:slidingdotsplash:1.0.2'
Add the following to your Activity or Fragment layout.
<com.chabbal.slidingdotsplash.SlidingSplashView
android:id="@+id/splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imageResources="@array/img_id_arr"/>
Create an integer array in strings.xml
e.g.
<integer-array name="img_id_arr">
<item>@drawable/img1</item>
<item>@drawable/img2</item>
<item>@drawable/img3</item>
<item>@drawable/img4</item>
</integer-array>
Done!
Extra in order to listen page changes use addOnPageChangeListener(listener);
Github link.
How do you create an Android View Pager with a dots indicator?
All we need are: ViewPager, TabLayout 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
<androidx.viewpager.widget.ViewPager
android:id="@+id/photos_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>
In this case
TabLayout
will be automatically connected withViewPager
, butTabLayout
will be next toViewPager
, not over it.
Separate TabLayout
<androidx.viewpager.widget.ViewPager
android:id="@+id/photos_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
In this case, we can put
TabLayout
anywhere, but we have to connectTabLayout
withViewPager
programmatically
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 version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/colorAccent"/>
</shape>
</item>
</layer-list>
default_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@android:color/darker_gray"/>
</shape>
</item>
</layer-list>
tab_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/selected_dot"
android:state_selected="true"/>
<item android:drawable="@drawable/default_dot"/>
</selector>
Now we need to add only 3 lines of code to TabLayout
in our XML layout.
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
Dots design in Viewpager with androidx
If you want dots in for your viewpager I suggest you to use this code.
It will give you perfect dots as you choose.
First create a linear layout for the dots and set its orientation to horizontal.
Then in your Java file declare the array of textview
TextView[] setDots;
Now add the following code snippet.
private void addDots(int position){
setDots = new TextView[3]; // No. of dots. Here you'll get three dots.
dots.removeAllViews();
for (int i = 0; i<setDots.length; i++){
setDots[i] = new TextView(this);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
setDots[i].setText(HtmlCompat.fromHtml("•", HtmlCompat.FROM_HTML_MODE_LEGACY));
}
setDots[i].setTextSize(35); //Dots size.
dots.addView(setDots[i]);
}
if (setDots.length > 0){
setDots[position].setTextColor(getResources().getColor(R.color.colorPrimaryDark, getTheme())); //Change the color as your need.
}
}
Then inside the ViewPager.OnPageChangedListener add the dots.
@Override
public void onPageSelected(int position) {
addDots(position);
}
Position ViewPager's (Carousel/Slider) indicators (dots) in bottom using TabLayout android studio
Use:
<androidx.viewpager.widget.ViewPager
....>
<com.google.android.material.tabs.TabLayout
android:layout_gravity="bottom"
.../>
</androidx.viewpager.widget.ViewPager>
Android ViewPager's dots indictor is not moving
One way could be that you use circle pager indicator instead of manually adding dots.
In your gradle add :
implementation 'fr.avianey.com.viewpagerindicator:library:2.4.1@aar'
activity_main.xml :
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/btn_login"
>
</android.support.v4.view.ViewPager>
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/circle_page_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/_8sdp"
android:layout_above="@+id/btn_login"
app:radius="4dp"/>
Then in your MainActivity.java
slidesAdapter = new SlidesAdapter(this);
viewPager.setAdapter(slidesAdapter);
mPageIndicator = (CirclePageIndicator) findViewById(R.id.circle_page_indicator);
mPageIndicator.setViewPager(mVwPager);
Related Topics
How to Create a Http Server in Android
How to Disable Past Dates in Android Date Picker
Android: How to Pass Parcelable Object to Intent and Use Getparcelable Method of Bundle
Android Adb Device Offline, Can't Issue Commands
Android Studio:How to Uninstall APK (Or Execute Adb Command) Automatically Before Run or Debug
Getting "Socketexception:Connection Reset by Peer" in Android
Edittext Loses Content on Scroll in Listview
Generate Bitmap from HTML in Android
How to Get Text on an Actionbar Icon
Multiline Edittext with Done Softinput Action Label on 2.3
Bind/Unbind Service Example (Android)
Android Firebase Dynamitemodule: Failed to Load Module Descriptor
Navigation Drawer: How to Set the Selected Item at Startup
Android - Linearlayout Horizontal with Wrapping Children
Environment.Getexternalstoragedirectory Does Not Return the Path to the Removable Storage