Kotlin App Intro Slider Android Example Tutorial From Scratch

kotlin splash screen, kotlin listview searchview, kotlin app intro slider, kotlin webview with progress bar, kotlin webview back forward navigation, kotlin parse json from url, kotlin login register android, kotlin upload image from gallery, kotlin upload image from camera, kotlin sqlite database, kotlin sqlite crud

Today is about Kotlin App Intro Slider Android Example Tutorial.

App intro slider allows you to give information about your app to the first time users.

If you want to give basic information about your app to a user, then intro slider is a good choice.

We will use kotlin to develop this example. A github library called AppIntro will help us to write user friendly code.

First of all, see the following video to see the result of this example.

 

Step 1. A New Project

First of all, make a new project in android studio. While doing this, select empty activity as a default activity.

Another thing to look for is to select Kotlin as the primary language of the project.

Step 2. Gradle and Style Works

In your build.gradle(Module:app) file, add the below code line

implementation 'com.github.AppIntro:AppIntro:4.2.3'

This line will add some required classes from github into our android studio project.

We will be able to use this library’s file directly in any class in our project.

Now, go to your build.gradle(Project: AppintroSliderKotlin) file and add the following line in allprojects { } block.

 maven { url 'https://jitpack.io' }

So, the final code for build.gradle(Project: AppintroSliderKotlin) file is like the below

buildscript {
    ext.kotlin_version = '1.3.31'
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.4.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
        
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

So now we are done with gradle works.

It is time to add some styles. So, navigate to app->res->values directory and open styles.xml file.

Add the following lines in styles.xml file.

  <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

Now, in your AndroidManifest.xml file, add the below lines in <activity name=”.MainActivity”>

 android:theme="@style/AppTheme.NoActionBar"

So, the final code for AndroidManifest.xml file is as the below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.appintrosliderkotlin">

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".WelcomeActivity">
        </activity>
        <activity android:name=".MainActivity"
                  android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

This new style will remove the title bar from Main Activity. So, we will have full screen for Main Activity.

Step 3. Making New Fragments

We need to create four new fragments in this example.

For opening new fragment in Android Studio, click on File option which is present at the left top bar.

Now go to File->New->Fragment->Fragment(Blank) to create new fragment.

app intro image slider android, kotlin app intro slider

 

Just create four new blank fragments. Give names to fragments as the below

  1. IntroFragment1
  2. IntroFragment2
  3. IntroFragment3
  4. IntroFragment4

Now let us edit XML and Kotlin files for all four fragments.

First of all, write the following code in fragment_intro_fragment1.xml

<LinearLayout 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"
              android:gravity="center"
              android:background="#c64e77">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Intro 1"/>

</LinearLayout>

In fragment_intro_fragment2.xml file, add the below code

<LinearLayout 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"
              android:gravity="center"
              android:background="#25ed46">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Intro 2"/>

</LinearLayout>

Write the below coding lines in fragment_intro_fragment3.xml file,

<LinearLayout 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"
              android:gravity="center"
              android:background="#3c45e6">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Intro 3"/>

</LinearLayout>

Finally, in fragment_intro_fragment4.xml file, add the following

<LinearLayout 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"
              android:gravity="center"
              android:background="#ff9340">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Intro 4"/>

</LinearLayout>

After writing all the XML files for fragments, let us write Kotlin files for the same.

In IntroFragment1.kt file, write down the below source snippet

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class IntroFragment1 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_intro_fragment1, container, false)
    }


}

Add the following code lines in IntroFragment2.kt file

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup



class IntroFragment2 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_intro_fragment2, container, false)
    }
}

Below is the code for IntroFragment3.kt file

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class IntroFragment3 : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_intro_fragment3, container, false)
    }
}

And for last fragment IntroFragment4.kt file

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class IntroFragment4 : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_intro_fragment4, container, false)
    }
}

Step 4. Saving Preferences

Make a new kotlin class and give it a name like PreferenceHelper.kt file.

Now in this PreferenceHelper.kt file, add the below source block

import android.content.Context
import android.content.SharedPreferences

class PreferenceHelper(private val context: Context) {

    private val INTRO = "intro"
    private val app_prefs: SharedPreferences


    init {
        app_prefs = context.getSharedPreferences(
            "shared",
            Context.MODE_PRIVATE
        )
    }

    fun putIntro(loginorout: String) {
        val edit = app_prefs.edit()
        edit.putString(INTRO, loginorout)
        edit.commit()
    }

    fun getIntro(): String? {
        return app_prefs.getString(INTRO, "")
    }

}

Generally, developers need to show app intro slider just for new users. Regular users are aware with the functionalities of your app.

So, we should show the app intro only for the first time after installation. For this, we will shared preference.

We will store this preference using the above class.

Step 5. Welcome Activity or First Activity

We will show the app intro in the Main Activity. So, practically, your app’s first activity will not be MainActivity.

So let us create the first or Home activity of our app. Make a new activity and give it a name like WelcomeActivity

Write the following source code lines for activity_welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
              android:orientation="vertical">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Welcome to App"
            android:textSize="25sp"
            android:textColor="#000"/>

    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn"
            android:text="click here to see intro when restarting the app"/>

</LinearLayout>

Now in WelcomeActivity.kt class, write the following code lines

package com.example.appintrosliderkotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class WelcomeActivity : AppCompatActivity() {

    private var btn: Button? = null
    private var preferenceHelper: PreferenceHelper? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_welcome)

        btn = findViewById(R.id.btn) as Button
        preferenceHelper = PreferenceHelper(this)

        btn!!.setOnClickListener {
            preferenceHelper!!.putIntro("")
            onBackPressed()
        }

    }
}

There is one button in this welcome activity.

When the user clicks this button, compiler will set the value of preference as empty “”.

Step 6. Last But Main Activity

When you created a new project, you must have two files : activity_main.xml and MainActivity.kt

In your activity_main.xml file, add the below writings

<?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">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
</RelativeLayout>

For MainActivity.kt file, you should write the below code snippet

import android.content.Intent
import android.support.v4.app.Fragment
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import com.github.paolorotolo.appintro.AppIntro

class MainActivity : AppIntro() {

    private var preferenceHelper: PreferenceHelper? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState)

        //setContentView(R.layout.activity_main);

        preferenceHelper = PreferenceHelper(this)

        if (preferenceHelper!!.getIntro().equals("no")) {
            val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
            startActivity(intent)
            this.finish()
        }

        addSlide(IntroFragment1())  //extend AppIntro and comment setContentView
        addSlide(IntroFragment2())
        addSlide(IntroFragment3())
        addSlide(IntroFragment4())

    }

    override fun onSkipPressed(currentFragment: Fragment?) {
        super.onSkipPressed(currentFragment)

        preferenceHelper!!.putIntro("no")

        val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
        startActivity(intent)
        this.finish()
    }

    override fun onDonePressed(currentFragment: Fragment?) {
        super.onDonePressed(currentFragment)

        preferenceHelper!!.putIntro("no")

        val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
        startActivity(intent)
        this.finish()
    }

    override fun onSlideChanged(oldFragment: Fragment?, newFragment: Fragment?) {
        super.onSlideChanged(oldFragment, newFragment)
        // Do something when the slide changes.
    }

}

Details on Main Activity

First of all, see the below code

  this.requestWindowFeature(Window.FEATURE_NO_TITLE);
  this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Above two lines will help us to remove title bar and make our screen as a full screen.

Now, read the following

  if (preferenceHelper!!.getIntro().equals("no")) {
            val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
            startActivity(intent)
            this.finish()
        }

Compiler will first check one if condition that if preference helper has a value as “no” or not.

If preference helper has value as “no” then if condition will be true and compiler will redirect the flow towards Welcome Activity.

And if the if condition is false then compiler will run the follow lines

 addSlide(IntroFragment1())  //extend AppIntro and comment setContentView
 addSlide(IntroFragment2())
 addSlide(IntroFragment3())
 addSlide(IntroFragment4())

Now focus on the following source code

 override fun onSkipPressed(currentFragment: Fragment?) {
        super.onSkipPressed(currentFragment)

        preferenceHelper!!.putIntro("no")

        val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
        startActivity(intent)
        this.finish()
    }

When the user clicks the skip text, compiler will run the above code.

It will first set the value of preference as “no” and then it will open the Welcome Activity.

Compiler will execute the below source when the user clicks Done

 override fun onDonePressed(currentFragment: Fragment?) {
        super.onDonePressed(currentFragment)

        preferenceHelper!!.putIntro("no")

        val intent = Intent(this@MainActivity, WelcomeActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK or Intent.FLAG_ACTIVITY_NEW_TASK)
        startActivity(intent)
        this.finish()
    }

It will also do the same thins as skip button. Change the value of the preference and then starting the welcome activity.

Download Full Code

Click to get kotlin app intro