Here we provides a simple tutorials to implement ViewPager in Kotlin.
ViewPager is one of most popular widgets available in android libraries. It is used in most of the famous apps like PlayStore,WhatsApp etc.
ViewPager is a widget that is used to implement tabs in Android Applications. ViewPager allows users to swipe left or right to see new screens.
Setup Layout file
This step is to add ViewPager in your Layout file. Go to your xml file and add the following code into it.
Make sure you have added the following dependency in your build.gradle file
implementation ‘com.android.support:design:27.1.1’
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabGravity="fill"
app:tabMode="fixed" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#c6c4c4" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>Implementing The Activity
Now we will implement the MainActivity.kt. Please keep in mind.
- MainActivity class have a Fragment and FragmentPagerAdapter to setup the view pager, this are defined bit later
- FragmentPagerAdapter inherited from PagerAdapter
- Function initViews() initializes the views
- Function setupViewPager() setting up the ViewPager
MainActivity.ktI
package kotlincodes.com.viewpagerkotlin.activity
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager
import kotlincodes.com.viewpagerkotlin.R
import kotlincodes.com.viewpagerkotlin.ViewPagerAdapter.MyFragmentPagerAdapter
import kotlincodes.com.viewpagerkotlin.fragments.MyFrament
class MainActivity : AppCompatActivity() {
private lateinit var viewpager: ViewPager
private lateinit var tabs: TabLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews()
setupViewPager()
}
private fun initViews() {
tabs = findViewById(R.id.tabs)
viewpager = findViewById(R.id.viewpager)
}
private fun setupViewPager() {
val adapter = MyFragmentPagerAdapter(getSupportFragmentManager())
var firstFragmet: MyFrament = MyFrament.newInstance("First Fragment")
var secondFragmet: MyFrament = MyFrament.newInstance("Second Fragment")
var thirdFragmet: MyFrament = MyFrament.newInstance("Third Fragment")
adapter.addFragment(firstFragmet, "ONE")
adapter.addFragment(secondFragmet, "TWO")
adapter.addFragment(thirdFragmet, "THREE")
viewpager!!.adapter = adapter
tabs!!.setupWithViewPager(viewpager)
}
}
Implementing The PagerAdapter Class
Now that we have the MainActivity.kt covered, we need to define the FragmentPagerAdapter Class. We have a addFragment inside FragmentPagerAdapter to add the Fragments .
MyFragmentPagerAdapter.kt
package kotlincodes.com.viewpagerkotlin.ViewPagerAdapter
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import java.nio.file.Files.size
import android.support.v4.app.FragmentPagerAdapter
import kotlincodes.com.viewpagerkotlin.fragments.MyFrament
class MyFragmentPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {
private val mFragmentList: ArrayList<Fragment> = ArrayList()
private val mFragmentTitleList: ArrayList<String> = ArrayList()
override fun getItem(position: Int): Fragment {
return mFragmentList.get(position)
}
override fun getCount(): Int {
return mFragmentList.size
}
fun addFragment(fragment: Fragment, title: String) {
mFragmentList.add(fragment)
mFragmentTitleList.add(title)
}
override fun getPageTitle(position: Int): CharSequence? {
return mFragmentTitleList.get(position)
}
}Setting Up The Fragment
We are almost finished now we need to setup the Fragmet class. First we need to set the fragment_home.xml layout
Layout have only a TextView to indicate the changes .
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:padding="12dp"
android:background="#000"
android:id="@+id/text"
android:layout_centerInParent="true"
android:textSize="22dp"
android:textAllCaps="true"
android:text="Fragment ONE"
android:textAlignment="center"
android:textColor="#fff"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>now we need to setup the Fragment class MyFragment.kt
package kotlincodes.com.viewpagerkotlin.fragments
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.support.v4.view.ViewPager
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.view.TextureView
import android.widget.TextView
import kotlincodes.com.viewpagerkotlin.R
import android.provider.AlarmClock.EXTRA_MESSAGE
import android.provider.AlarmClock.EXTRA_MESSAGE
class MyFrament : Fragment() {
companion object {
fun newInstance(message: String): MyFrament {
val f = MyFrament()
val bdl = Bundle(1)
bdl.putString(EXTRA_MESSAGE, message)
f.setArguments(bdl)
return f
}
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
var view: View? = inflater.inflate(R.layout.fragment_home, container, false);
val message = arguments!!.getString(EXTRA_MESSAGE)
var textView: TextView = view!!.findViewById(R.id.text)
textView!!.text = message
return view
}
}That’s With the above we can simply implement a ViewPager in Kotlin. you can also get a Source code of the project from GitHub
kotlincodes/ViewPagerKotlinTutorial
Contribute to kotlincodes/ViewPagerKotlinTutorial development by creating an account on GitHub.
