Skip to content

ByBus/dots-tab-layout

Repository files navigation

DotsTab Layout

DotsTab Layout is a view for displaying viewPager2's pagination in the form of dots.

To get a Git project into your build:

Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.github.ByBus:dots-tab-layout:0.9.0'
}

How to use

1. Add DotsTabLayout view to your layout

<host.capitalquiz.dotstablayout.DotsTabLayout
    android:id="@+id/dotstab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:gravity="center"
    android:paddingVertical="32dp"
    app:baseColor="#FFFFFF"
    app:dotSize="20dp"
    app:dotStrokeWidth="2dp"
    app:dotsHorizontalPadding="2dp"        
    app:indicatorType="growingDotIndicator"
    app:dotsClickable="true"/>

2. Attach DotsTabLayout to ViewPager2 and LifecycleOwner

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val pager = findViewById<ViewPager2>(R.id.pager)
    pager.adapter = FragmentAdapter(supportFragmentManager, lifecycle)
    // Attachment
    val dotsLayout = findViewById<DotsTabLayout>(R.id.dotstab_layout)
    dotsLayout.attachTo(pager, this)
}

Parameters

  • dotSize - max diameter/length of the dot/line indicator
  • baseColor - color of the dots
  • dotStrokeWidth - stroke width in case of circle indicator and width of line in case of line indicator
  • dotsHorizontalPadding - padding between dots
  • evenly - if true, distributes dots evenly along the entire length of DotsTabLayout
  • dotsClickable - if true, clicking the button will change pager item
  • dotsNumber - sets dots for preview (for example tools:dotsNumber="6")
  • indicatorType - sets type of indicator and its animation. See all types below

Indicator types

discreteDotIndicator - default indicator


movingDotIndicator


fillingDotIndicator


contractingDotIndicator


crawlingDotIndicator


movingLineIndicator

here dotSize is the length of the line and dotStrokeWidth is the line width


growingCircleIndicator

here dotSize is the size of the circle, size of a regular dot depends on dotStrokeWidth


expandingLineIndicator

here dotSize is the length of the line and dotStrokeWidth is the width of the line and size of a regular dot


jumpingDotIndicator


compactJumpingDotIndicator


swappingDotIndicator


fadingDotIndicator


growingDotIndicator

here dotSize is the size of selected dot, size of a regular dot will be smaller by two dotStrokeWidth

for example: if dotSize=20dp and dotStrokeWidth=2dp then size of a regular dot will be 16dp