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.
Just create four new blank fragments. Give names to fragments as the below
- IntroFragment1
- IntroFragment2
- IntroFragment3
- 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.