PagerIndicator using TabLayout Example
Learn PageIndicator using this example. This is a sample application that easily implemented pager's indicator using TabLayout.
Here is the demo GIF:
This is written in Kotlin and will comprise the following files:
MainActivity.ktPageViewModel.ktPlaceholderFragment.ktSectionsPagerAdapter.kt
Step 1: Create Project
- Open your
AndroidStudioIDE. - Go to
File-->New-->Projectto create a new project.
Step 2: Add Dependencies
No external dependencies are needed for this project.
Step 3: Design Layouts
Here are our layouts:
*(a). activity_main.xml
Create a file named activity_main.xml and design it as follows:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="18dp"
android:layout_gravity="bottom"
android:layout_marginBottom="16dp"
android:background="@android:color/transparent"
app:tabBackground="@drawable/bg_tab_item"
app:tabGravity="center"
app:tabIndicator="@drawable/tab_indicator"
app:tabIndicatorGravity="stretch"
app:tabMaxWidth="18dp"
app:tabMinWidth="18dp"
app:tabRippleColor="@null" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
*(b). fragment_main.xml
Create a file named fragment_main.xml and design it as follows:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.PlaceholderFragment">
<TextView
android:id="@+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:layout_marginEnd="@dimen/activity_horizontal_margin"
android:layout_marginBottom="@dimen/activity_vertical_margin"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4: Write Code
Write Code as follows:
(a). MainActivity.kt
Create a file named MainActivity.ktand instantiate our PagerAdapter and set it to our ViewPager as well as our TabLayout:
val sectionsPagerAdapter = SectionsPagerAdapter(supportFragmentManager)
view_pager.adapter = sectionsPagerAdapter
tabs.setupWithViewPager(view_pager)
Here is the full code
package com.numero.pagerindicator.example
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.numero.pagerindicator.example.ui.main.SectionsPagerAdapter
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
val sectionsPagerAdapter = SectionsPagerAdapter(supportFragmentManager)
view_pager.adapter = sectionsPagerAdapter
tabs.setupWithViewPager(view_pager)
}
}
(b). PageViewModel.kt
Create a file named PageViewModel.kt and make it extend the androidx.lifecycle.ViewModel.
Here is the full code
package com.numero.pagerindicator.example.ui.main
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.Transformations
import androidx.lifecycle.ViewModel
import androidx.lifecycle.ViewModelProvider
class PageViewModel : ViewModel() {
private val _index = MutableLiveData<Int>()
val text: LiveData<String> = Transformations.map(_index) {
"Hello world from section: $it"
}
fun setIndex(index: Int) {
_index.value = index
}
}
(c). PlaceholderFragment.kt
Create a file named PlaceholderFragment.kt and extend the androidx.fragment.app.Fragment.
Here is the full code
package com.numero.pagerindicator.example.ui.main
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProviders
import com.numero.pagerindicator.example.R
/**
* A placeholder fragment containing a simple view.
*/
class PlaceholderFragment : Fragment() {
private lateinit var pageViewModel: PageViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
pageViewModel = ViewModelProviders.of(this).get(PageViewModel::class.java).apply {
setIndex(arguments?.getInt(ARG_SECTION_NUMBER) ?: 1)
}
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val root = inflater.inflate(R.layout.fragment_main, container, false)
val textView: TextView = root.findViewById(R.id.section_label)
pageViewModel.text.observe(this, Observer<String> {
textView.text = it
})
return root
}
companion object {
/**
* The fragment argument representing the section number for this
* fragment.
*/
private const val ARG_SECTION_NUMBER = "section_number"
/**
* Returns a new instance of this fragment for the given section
* number.
*/
@JvmStatic
fun newInstance(sectionNumber: Int): PlaceholderFragment {
return PlaceholderFragment().apply {
arguments = Bundle().apply {
putInt(ARG_SECTION_NUMBER, sectionNumber)
}
}
}
}
}
(d). SectionsPagerAdapter.kt
Create a file named SectionsPagerAdapter.kt and extend the androidx.fragment.app.FragmentPagerAdapter then override the following callbacks:
override fun getItem(position: Int): Fragment {
return PlaceholderFragment.newInstance(position + 1)
}
override fun getCount(): Int = 5
Here is the full code
package com.numero.pagerindicator.example.ui.main
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
class SectionsPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
return PlaceholderFragment.newInstance(position + 1)
}
override fun getCount(): Int = 5
}
Run
Simply copy the source code into your Android Project,Build and Run.
Reference
PagerIndicator Library in Android
PagerIndicator is a library that allows you to easily add a pager indicator to your Android app. A pager indicator is a UI component that shows the user their position in a series of screens or pages. With PagerIndicator, you can add a pager indicator to your app with just a few lines of code.
Step 1: Add the library to your project
To use PagerIndicator in your Android app, you first need to add the library to your project. There are a few ways to do this, but the easiest method is to use Gradle. To do this, add the following line to the dependencies section of your app's build.gradle file:
implementation 'com.romandanylyk:pageindicatorview:1.0.3'
Step 2: Add the PagerIndicator to your layout
Once you've added the library to your project, you can add the PagerIndicator to your layout. To do this, add the following code to your layout XML file:
<com.romandanylyk.pageindicatorview.PageIndicatorView
android:id="@+id/pageIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:piv_animationType="scale"
app:piv_dynamicCount="true"
app:piv_selectedColor="@color/colorAccent"
app:piv_unselectedColor="@color/colorPrimary"
app:piv_viewPager="@id/viewPager" />
This code creates a new instance of the PageIndicatorView class and sets some attributes. The piv_animationType attribute determines the type of animation used when the indicator changes position. The piv_dynamicCount attribute enables the indicator to adjust its size based on the number of pages in the ViewPager. The piv_selectedColor and piv_unselectedColor attributes determine the colors used for the selected and unselected indicators, respectively. Finally, the piv_viewPager attribute specifies the ID of the ViewPager that the indicator should be associated with.
Step 3: Initialize the PagerAdapter
Before you can use the PagerIndicator, you need to initialize the PagerAdapter. The PagerAdapter is responsible for providing the content to the ViewPager. Here's an example of how to initialize a PagerAdapter in Kotlin:
class MyPagerAdapter(private val context: Context, private val items: List<MyItem>) : PagerAdapter() {
override fun instantiateItem(container: ViewGroup, position: Int): Any {
val view = LayoutInflater.from(context).inflate(R.layout.item_layout, container, false)
val item = items[position]
// Bind data to view
container.addView(view)
return view
}
override fun destroyItem(container: ViewGroup, position: Int, obj: Any) {
container.removeView(obj as View)
}
override fun getCount(): Int = items.size
override fun isViewFromObject(view: View, obj: Any): Boolean = view == obj
}
This code creates a new PagerAdapter that takes a list of MyItem objects. The instantiateItem method inflates a layout file and binds data to it based on the item at the current position. The destroyItem method is called when a page is destroyed and removes the view from the container. The getCount method returns the number of items in the list, and the isViewFromObject method determines whether a given view is associated with a given object.
Step 4: Set the PagerAdapter on the ViewPager
Now that you've initialized the PagerAdapter, you can set it on the ViewPager. Here's how to do this in Kotlin:
val viewPager = findViewById<ViewPager>(R.id.viewPager)
val adapter = MyPagerAdapter(this, items)
viewPager.adapter = adapter
This code gets a reference to the ViewPager and creates a new instance of the PagerAdapter. It then sets the adapter on the ViewPager.
Step 5: Update the PagerIndicator
Finally, you need to update the PagerIndicator when the user swipes between pages. Here's how to do this in Kotlin:
val pageIndicatorView = findViewById<PageIndicatorView>(R.id.pageIndicatorView)
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
// Not used
}
override fun onPageSelected(position: Int) {
pageIndicatorView.selection = position
}
override fun onPageScrollStateChanged(state: Int) {
// Not used
}
})
This code gets a reference to the PagerIndicatorView and adds a new OnPageChangeListener to the ViewPager. The onPageSelected method is called when the user changes pages, and sets the current selection of the PagerIndicatorView.
Conclusion
PagerIndicator is a powerful library that allows you to easily add a pager indicator to your Android app. By following the steps outlined in this article, you should be able to add a PagerIndicator to your own app in no time.