Tag: tablayout

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

---