Onboarding Screen with ViewPager 2 and Recyclerview

fragment_onbaording.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimary"
    tools:context=".view.main.ui.OnboardingFragment">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager_onboarding"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="134dp"
        android:layout_gravity="bottom">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="horizontal">
                <ImageView
                    android:id="@+id/intro_indicator_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="12dp"
                    android:background="@drawable/ic_indicator_selected"
                    android:contentDescription="Indicator 1" />

                <ImageView
                    android:id="@+id/intro_indicator_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="12dp"
                    android:background="@drawable/ic_indicator_unselected"
                    android:contentDescription="Indicator 2" />

                <ImageView
                    android:id="@+id/intro_indicator_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_indicator_unselected"
                    android:contentDescription="Indicator 3" />
            </LinearLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout_onboarding_buttons"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:visibility="gone"
                android:layout_marginTop="40dp"
                android:orientation="horizontal">

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/materialButton_signIn_onboarding"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:layout_marginEnd="12dp"
                    android:background="@drawable/btn_login_onboarding"
                    android:text="@string/login"
                    android:textAppearance="@style/TextAppearance.Header"
                    android:textSize="18sp"
                    app:backgroundTint="@null"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/view"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                </com.google.android.material.button.MaterialButton>

                <View
                    android:id="@+id/view"
                    android:layout_width="0.01dp"
                    android:layout_height="0.01dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/materialButton_signUp_onbarding"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="12dp"
                    android:layout_marginEnd="20dp"
                    android:background="@drawable/btn_signup_onboarding"
                    android:text="@string/sign_up"
                    android:textAppearance="@style/TextAppearance.Header"
                    android:textColor="@color/textColorPrimary"
                    android:textSize="18sp"
                    app:backgroundTint="@null"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/view"
                    app:layout_constraintTop_toTopOf="parent">

                </com.google.android.material.button.MaterialButton>
            </androidx.constraintlayout.widget.ConstraintLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:id="@+id/materialButton_next_onboarding"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/next"
                app:backgroundTint="@null"
                android:textSize="18sp"
                android:layout_marginTop="40dp"
                android:textColor="@color/textColorPrimary"
                android:textAppearance="@style/TextAppearance.Header"
                android:background="@drawable/btn_next_onboarding"/>

        </LinearLayout>
    </FrameLayout>



</androidx.coordinatorlayout.widget.CoordinatorLayout>

onboarding_items.xml

<?xml version="1.0" encoding="utf-8"?>
<!--suppress XmlUnusedNamespaceDeclaration -->
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/imageView_onbaoarding"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="199dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_create_projects"
        android:contentDescription="@string/onboarding_image" />

    <TextView
        android:id="@+id/textView_title_onboarding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="101dp"
        android:text="@string/create_projects"
        android:textAppearance="@style/TextAppearance.Header"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="@+id/imageView_onbaoarding"
        app:layout_constraintStart_toStartOf="@+id/imageView_onbaoarding"
        app:layout_constraintTop_toBottomOf="@+id/imageView_onbaoarding" />

    <TextView
        android:id="@+id/textView_subTitle_onboarding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="11dp"
        android:gravity="center"
        android:textAppearance="@style/TextAppearance.subtitle"
        android:text="@string/create_projects_desc"
        app:layout_constraintEnd_toEndOf="@+id/textView_title_onboarding"
        app:layout_constraintStart_toStartOf="@+id/textView_title_onboarding"
        app:layout_constraintTop_toBottomOf="@+id/textView_title_onboarding" />
</androidx.constraintlayout.widget.ConstraintLayout>

OnboardingAdapter.kt

package com.ehmaugbogo.rigotrak.view.main.ui

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.ViewHolder
import com.ehmaugbogo.rigotrak.R
import kotlinx.android.synthetic.main.onboarding_items.view.*
import java.util.*

@Suppress("SpellCheckingInspection")
class OnboardingAdapter(private val data : List<Screen>  ) : RecyclerView.Adapter<OnboardingAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): OnboardingAdapter.ViewHolder {
        return OnboardingAdapter.ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.onboarding_items, parent, false)
        )
    }

    override fun getItemCount() = data.size

    override fun onBindViewHolder(holder: OnboardingAdapter.ViewHolder, position: Int) =
        holder.bind(data[position])


     class ViewHolder (itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(item: Screen) = with(itemView) {
            imageView_onbaoarding.setImageResource(item.image)
            textView_title_onboarding.text = resources.getText(item.title)
            textView_subTitle_onboarding.text = resources.getText(item.desc)
        }
    }

}

data class Screen(val image : Int, val title : Int, val desc: Int )

OnboardingFragment.kt

package com.ehmaugbogo.rigotrak.view.main.ui

import android.net.Uri
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.core.net.toUri
import androidx.navigation.NavDeepLinkBuilder
import androidx.navigation.NavOptions
import androidx.navigation.fragment.findNavController
import androidx.viewpager2.widget.ViewPager2

import com.ehmaugbogo.rigotrak.R
import kotlinx.android.synthetic.main.fragment_onbaording.*

/**
 * A simple [Fragment] subclass.
 */
class OnboardingFragment : Fragment() {
    private lateinit var  indicators : Array<ImageView>
    private var currentPosition = 0
    private val onBoardingAdapter = OnboardingAdapter(

        listOf(
            Screen(R.drawable.ic_create_projects, R.string.create_projects, R.string.create_projects_desc ),
            Screen(R.drawable.ic_create_shopping_lists, R.string.create_shoping_list, R.string.create_shopping_list_desc ),
            Screen(R.drawable.ic_join_and_colaborate, R.string.join_and_collaborate, R.string.join_and_collaborate_desc )
        )

    )
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_onbaording, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initializeStuff()
        setupCallbacks()
    }




    private fun initializeStuff () {

        viewPager_onboarding.adapter = onBoardingAdapter
        viewPager_onboarding.currentItem = currentPosition
        indicators = arrayOf(intro_indicator_1, intro_indicator_2, intro_indicator_3 )
        setIndicator(currentPosition)
    }


    private fun setupCallbacks() {

//        Overrode only the one needed ViewPager Callback

        viewPager_onboarding.registerOnPageChangeCallback(

            object: ViewPager2.OnPageChangeCallback(){
                override fun onPageSelected(position: Int) {
                    currentPosition = position
                    setIndicator(currentPosition)
                    materialButton_next_onboarding.visibility = if ( position != 2) View.VISIBLE else View.GONE
                    constraintLayout_onboarding_buttons.visibility = if ( position != 2) View.GONE else View.VISIBLE
                }
            }
        )

//        Next Button Callback

        materialButton_next_onboarding.setOnClickListener{
            currentPosition += 1
            viewPager_onboarding.setCurrentItem(currentPosition, true)
        }

//        SignIn Button Callback

        materialButton_signIn_onboarding.setOnClickListener{

//         TODO: set Onboarding as done in sharedPref
            findNavController().navigate(R.id.action_onBoardingFragment_to_registration_nav_graph)
        }

//        SignUp Button Clicked

        materialButton_signUp_onbarding.setOnClickListener{

//         TODO: set Onboarding as done in sharedPref
            val uri = Uri.parse("rigotrak://com.ehmaugbogo.rigotrak/registerFragment")
           findNavController().navigate(uri, NavOptions.Builder()
                   .setPopUpTo(R.id.onBoardingFragment,
                       true).build())
        }

    }

    private fun setIndicator( position: Int) {

        for ( (index, indicator) in indicators.withIndex()){
            indicator.setBackgroundResource(
                if (index == position) R.drawable.ic_indicator_selected
                else R.drawable.ic_indicator_unselected
            )
        }
    }


}