Open In App

Create Custom Intro Slider of an Android App with Kotlin

Improve
Improve
Like Article
Like
Save
Share
Report

IntroSlider is seen in many android applications to display the introduction of the different screens within our application. This intro slider will display information about different features within the android application. In this article, we will take a look at How to Create a Custom Intro Slider in an Android app using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: If you are looking to implement Custom Intro Slider in your android application using Java. Check out the following article: How to Create Custom Intro Slider of an Android app using Java 

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--view pager for displaying our slides-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/idViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <!--on below line we are creating
         a simple linear layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent"
        android:orientation="horizontal"
        android:weightSum="5">
 
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="2" />
 
        <!--adding linear layout for
            creating dots view-->
        <LinearLayout
            android:id="@+id/idLLDots"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:weightSum="3">
 
            <!--on below line we are creating a text view
                 for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideOne"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/white"
                android:textSize="40sp"
                android:textStyle="bold" />
 
            <!--on below line we are creating a text view
                 for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideTwo"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/grey"
                android:textSize="40sp"
                android:textStyle="bold" />
 
            <!--on below line we are creating a text view
                for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideThree"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/grey"
                android:textSize="40sp"
                android:textStyle="bold" />
 
        </LinearLayout>
 
        <!--button for skipping our intro slider-->
        <Button
            android:id="@+id/idBtnSkip"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="2"
            android:backgroundTint="@color/button_color"
            android:padding="4dp"
            android:text="Skip"
            android:textAllCaps="false"
            android:textColor="@color/white" />
 
    </LinearLayout>
   
</RelativeLayout>


Step 3: Updating colors in the color.xml file

Navigate to app > res > values > colors.xml and add the below code to it to update the color within our application. 

XML




<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#0F9D58</color>
    <color name="purple_500">#0F9D58</color>
    <color name="purple_700">#0F9D58</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="grey">#aaa</color>
    <color name="button_color">#1E573B</color>
</resources>


Step 4: Creating a layout file for slider_item

Navigate to the app > res > layout > Right-click on it > New > Layout Resource file. Name it as slider_item and add the below code to it. Comments are added in the code to get to know in detail. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/idRLSlider"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_200">
 
    <!--text view for displaying
        our heading-->
    <TextView
        android:id="@+id/idTVSliderTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Slide 1"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--Image view for displaying
        our slider image-->
    <ImageView
        android:id="@+id/idIVSlider"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/idTVSliderTitle"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:padding="10dp"
        android:src="@mipmap/ic_launcher" />
 
    <!--text view for displaying our
        slider description-->
    <TextView
        android:id="@+id/idTVSliderDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVSlider"
        android:layout_marginStart="20dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="C++ data structure and ALgorithm Course"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="15sp" />
   
</RelativeLayout>


Step 5: Creating a modal class for storing our data

Navigate to app > java > your app’s package name > Right-click on it > New > Kotlin class and name it as SliderData. Add the below code to it. Comments are added in the code to get to know in detail. 

Kotlin




package com.gtappdevelopers.kotlingfgproject
 
data class SliderData(
    // on below line we are creating a string
    // for our slide title, slide
    // description and image.
    var slideTitle: String,
    var slideDescription: String,
    var slideImage: Int
)


Step 6: Creating an adapter class for setting data to each item of our slider

Navigate to app > java > your app’s package name > Right-click on it > New > Kotlin class and name the file as SliderAdapter and add the below code to it. Comments are added in the code to get to know in detail. 

Kotlin




package com.gtappdevelopers.kotlingfgproject
 
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.viewpager.widget.PagerAdapter
 
class SliderAdapter(
    val context: Context,
    val sliderList: ArrayList<SliderData>
) : PagerAdapter() {
 
    override fun getCount(): Int {
        // on below line we are returning
        // the size of slider list
        return sliderList.size
    }
 
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        // inside isViewFromobject method we are
        // returning our Relative layout object.
        // inside isViewFromobject method we are
        // returning our Relative layout object.
        return view === `object` as RelativeLayout
    }
 
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        // in this method we will initialize all our layout
        // items and inflate our layout file as well.
        // in this method we will initialize all our layout
        // items and inflate our layout file as well.
        val layoutInflater: LayoutInflater =
            context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
 
        // below line is use to inflate the
        // layout file which we created.
 
        // below line is use to inflate the
        // layout file which we created.
        val view: View = layoutInflater.inflate(R.layout.slider_item, container, false)
 
        // on below line we are initializing our image view,
        // heading text view and description text view with their ids.
        val imageView: ImageView = view.findViewById(R.id.idIVSlider)
        val sliderHeadingTV: TextView = view.findViewById(R.id.idTVSliderTitle)
        val sliderDescTV: TextView = view.findViewById(R.id.idTVSliderDescription)
 
        // on below line we are setting data to our text view
        // and image view on below line.
        val sliderData: SliderData = sliderList.get(position)
        sliderHeadingTV.text = sliderData.slideTitle
        sliderDescTV.text = sliderData.slideDescription
        imageView.setImageResource(sliderData.slideImage)
         
        // on below line we are adding our view to container.
        container.addView(view)
 
        // on below line we are returning our view.
        return view
    }
 
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        // this is a destroy view method
        // which is use to remove a view.
        // this is a destroy view method
        // which is use to remove a view.
        container.removeView(`object` as RelativeLayout)
    }
 
}


Step 7: Creating a new activity for our Home Screen

Navigate to app > java > your app’s package name > Right-click on it > New Empty Activity and name your activity as MainActivity2. After creating this activity. We will be using this activity to display a simple text view message which will be called when a user clicks on the skip button. 

Step 8: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package com.gtappdevelopers.kotlingfgproject
 
import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating a
    // variable for our view pager
    lateinit var viewPager: ViewPager
 
    // on below line we are creating a variable
    // for our slider adapter and slider list
    lateinit var sliderAdapter: SliderAdapter
    lateinit var sliderList: ArrayList<SliderData>
 
    // on below line we are creating a variable for our
    // skip button, slider indicator text view for 3 dots
    lateinit var skipBtn: Button
    lateinit var indicatorSlideOneTV: TextView
    lateinit var indicatorSlideTwoTV: TextView
    lateinit var indicatorSlideThreeTV: TextView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // on below line we are initializing all
        // our variables with their ids.
        viewPager = findViewById(R.id.idViewPager)
        skipBtn = findViewById(R.id.idBtnSkip)
        indicatorSlideOneTV = findViewById(R.id.idTVSlideOne)
        indicatorSlideTwoTV = findViewById(R.id.idTVSlideTwo)
        indicatorSlideThreeTV = findViewById(R.id.idTVSlideThree)
 
        // on below line we are adding click listener for our skip button
        skipBtn.setOnClickListener {
            // on below line we are opening a new activity
            val i = Intent(this@MainActivity, MainActivity2::class.java)
            startActivity(i)
        }
 
        // on below line we are initializing our slider list.
        sliderList = ArrayList()
 
        // on below line we are adding data to our list
        sliderList.add(
            SliderData(
                "Python",
                "Python Development Course",
                R.drawable.python
            )
        )
 
        sliderList.add(
            SliderData(
                "Java",
                "Java Development Course",
                R.drawable.java
            )
        )
 
        sliderList.add(
            SliderData(
                "C++",
                "C++ Development Course",
                R.drawable.c
            )
        )
 
        // on below line we are adding slider list
        // to our adapter class.
        sliderAdapter = SliderAdapter(this, sliderList)
 
        // on below line we are setting adapter
        // for our view pager on below line.
        viewPager.adapter = sliderAdapter
 
        // on below line we are adding page change
        // listener for our view pager.
        viewPager.addOnPageChangeListener(viewListener)
 
    }
 
    // creating a method for view pager for on page change listener.
    var viewListener: ViewPager.OnPageChangeListener = object : ViewPager.OnPageChangeListener {
        override fun onPageScrolled(
            position: Int,
            positionOffset: Float,
            positionOffsetPixels: Int
        ) {
        }
 
        override fun onPageSelected(position: Int) {
            // we are calling our dots method to
            // change the position of selected dots.
 
            // on below line we are checking position and updating text view text color.
            if (position == 0) {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.white))
 
            } else if (position == 1) {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.white))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.grey))
            } else {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.white))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.grey))
            }
        }
 
        // below method is use to check scroll state.
        override fun onPageScrollStateChanged(state: Int) {}
    }
}


Step 9: Working with the activity_main2.xml file

Navigate to app > res > layout > activity_main2.xml and add the below code to it. Comments are added in the code to get to know in detail. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">
 
    <!--on below line we are creating a
         simple text view for heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Welcome to\n Geeks for Geeks"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
</RelativeLayout>


Now run your application to see the output of it. 

Output: 



Last Updated : 25 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads