Create Custom Intro Slider of an Android App with Kotlin
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:android = "http://schemas.android.com/apk/res/android" 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 xmlns:android = "http://schemas.android.com/apk/res/android" 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: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" 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 Beginner for Beginner" 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: