PagingNavigation

Setup

Gradle

Add this to your project level build.gradle:

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

Add this to your app build.gradle:

dependencies {
    implementation 'com.github.edtslib:pagingnavigation:latest'
}

Usage

The PagerNavigationView is very easy to use. Just add it to your layout like any other view.

Via XML

Here's a basic implementation.

    <id.co.edtslib.pagingnavigation.PagingNavigation
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:count="6"
    app:shape="@drawable/bg_test"
    app:shapeSize="@dimen/dimen_8dp"
    app:shapeSelectedWidth="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Attributes information

app:count

[integer]: size of pager

app:shape

[integer]: shape form resource id, default

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- shape for selection -->
    <item android:state_selected="true">
        <shape android:shape="oval">
            <solid android:color="#1171D4" />
        </shape>
    </item>
    <!-- shape for defaul -->
    <item>
        <shape android:shape="oval">
            <solid android:color="#DCDEE3" />
        </shape>
    </item>
</selector>

app:shapeSize

[dimension]: size of shape, default 4dp

app:shapeSelectedWidth

[dimension]: size of shape if selected, default = shapeSize

app:space

[reference]: space between shape, default 8dp

Listening for click actions on the PagingNavigation

You can set a listener to be notified when the user click the PagingNavigation. An example is shown below.

        val navigation = findViewById<PagingNavigation>(R.id.navigation)
        navigation.delegate = object : PagingNavigationDelegate {
            override fun onSelected(position: Int) {
                Toast.makeText(this@MainActivity, "Selected Index $position",
                    Toast.LENGTH_SHORT).show()
            }
        }

Setting the view attributes via code

For convenience, many of the PagingNavigation attributes can be set via code.

        // set size of pager
        var count: Int = 0

Method for navigation actions on the PagingNavigation

    // selected index of shape
    var selectedIndex: Int = -1