Intro Screen Slider Android Tutorial

Hi there, In this tutorial, I am gonna teach you how you can create an introductory slide show for your android application. The point to ponder about this task is that the slide show must run just for once after the installation. From the second time, the app must open with some home screen. So lets begin our Intro Screen Slider Android Tutorial.

Creating a New Android Studio Project

First create a new project. You can do the same in your existing application.
I just created a project named AppIntro.

Adding AppIntro dependency

In this Screen Slider Android Tutorial we will be using AppIntro library.
So the first thing we need to add this library into our project. For this just go to your app level build.gradle file and add the following line inside dependencies block and then just sync your project.

compile 'com.github.paolorotolo:appintro:4.0.0'

Creating a Fragment to Show Different Slides

Next, we need to create a class named SampleSlide.java through which the view of different slides is inflated.

package com.example.manish.simplifiedcodingappintro;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class SampleSlide extends Fragment {

private static final String ARG_LAYOUT_RES_ID = "layoutResId";

public static SampleSlide newInstance(int layoutResId) {

SampleSlide sampleSlide = new SampleSlide();

Bundle args = new Bundle();

args.putInt(ARG_LAYOUT_RES_ID, layoutResId);

sampleSlide.setArguments(args);

return sampleSlide;

}

private int layoutResId;

public SampleSlide() {}

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

if(getArguments() != null && getArguments().containsKey(ARG_LAYOUT_RES_ID))

layoutResId = getArguments().getInt(ARG_LAYOUT_RES_ID);

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

return inflater.inflate(layoutResId, container, false);

}

Creating Intro Screen Sliders

Next, we need to create a class named DefaultIntro.java.

package com.example.manish.simplifiedcodingappintro;

import android.Manifest;

import android.content.Intent;

import android.graphics.Color;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.View;

import android.widget.Toast;

import com.github.paolorotolo.appintro.AppIntro;

public final class DefaultIntro extends AppIntro {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//Down here, we add the xml layouts into sample slide inflater.

addSlide(SampleSlide.newInstance(R.layout.intro));

addSlide(SampleSlide.newInstance(R.layout.intro2));

addSlide(SampleSlide.newInstance(R.layout.intro3));

addSlide(SampleSlide.newInstance(R.layout.intro4));

showStatusBar(true);

setDepthAnimation();

}

@Override

public void onDonePressed(Fragment currentFragment) {

super.onDonePressed(currentFragment);

loadMainActivity();

}

private void loadMainActivity(){

Intent intent = new Intent(this, MainActivity.class);

startActivity(intent);

}

@Override

public void onSkipPressed(Fragment currentFragment) {

super.onSkipPressed(currentFragment);

loadMainActivity();

Toast.makeText(getApplicationContext(), getString(R.string.skip), Toast.LENGTH_SHORT).show();

}

public void getStarted(View v){

loadMainActivity();

}

Next, we need to create a class named Config.java to store constants.

public class Config {

public static String FLAG="It the start";

}

Next, we need to configure our MainActivity.java. In order to make sure that the appintro runs just for once, we make use of Thread and SharedPreferences as it can be seen down into the code of MainActivity.

package com.example.manish.simplifiedcodingappintro;

import android.content.Context;

import android.content.Intent;

import android.content.SharedPreferences;

import android.preference.Preference;

import android.preference.PreferenceManager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Thread t=new Thread(new Runnable() {

@Override

public void run() {

SharedPreferences sharedPreferences = getSharedPreferences(Config.FLAG, Context.MODE_PRIVATE);

if(sharedPreferences.getBoolean(Config.FLAG,true)){

startActivity(new Intent(MainActivity.this,DefaultIntro.class));

SharedPreferences.Editor e=sharedPreferences.edit();

e.putBoolean(Config.FLAG,false);

e.apply();

}

});

t.start();

}

Here, the Java part gets over. Now, we need to configure our design resources i.e. xml layouts.

Creating Layouts for Slider

Create a Layout resource file named intro.xml. This would be our first slide in the introduction.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#222222"

android:layout_weight="10"

android:id="@+id/main">

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_gravity="center"

android:gravity="center"

android:paddingLeft="32dp"

android:layout_weight="3"

android:fontFamily="sans-serif-thin"

android:textColor="#ffffff"

android:paddingRight="32dp"

android:textSize="28sp"

android:text="Slide 1 title"/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="0dp"

android:orientation="vertical"

android:gravity="center"

android:layout_weight="5">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:src="@drawable/ic_slide1"/>

</LinearLayout>

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="3"

android:layout_gravity="center"

android:gravity="center"

android:textColor="#ffffff"

android:paddingLeft="64dp"

android:paddingRight="64dp"

android:textSize="16sp"

android:text="Long description here"/>

<TextView

android:layout_width="fill_parent"

android:layout_height="64dp" />

</LinearLayout>

screen slider android — Preview of intro.xml

Create a layout resource file named intro2.xml which would be our second slide.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#00BCD4"

android:layout_weight="10"

android:id="@+id/main">

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_gravity="center"

android:gravity="center"

android:paddingLeft="32dp"

android:layout_weight="3"

android:fontFamily="sans-serif-thin"

android:textColor="#ffffff"

android:paddingRight="32dp"

android:textSize="28sp"

android:text="Slide 2 title"/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="0dp"

android:orientation="vertical"

android:gravity="center"

android:layout_weight="5">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:src="@drawable/ic_slide2"/>

</LinearLayout>

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="3"

android:layout_gravity="center"

android:gravity="center"

android:textColor="#ffffff"

android:paddingLeft="64dp"

android:paddingRight="64dp"

android:textSize="16sp"

android:text="Long description here"/>

<TextView

android:layout_width="fill_parent"

android:layout_height="64dp" />

</LinearLayout>

By now, you might come across errors saying the resources such as drawbles not found. Leave it for now. I’ll deal with the same at the end.
Create a layout resource file named intro3.xml. This would be our third slide.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#5C6BC0"

android:layout_weight="10"

android:id="@+id/main">

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_gravity="center"

android:gravity="center"

android:paddingLeft="32dp"

android:layout_weight="3"

android:fontFamily="sans-serif-thin"

android:textColor="#ffffff"

android:paddingRight="32dp"

android:textSize="28sp"

android:text="Slide 3 title"/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="0dp"

android:orientation="vertical"

android:gravity="center"

android:layout_weight="5">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:src="@drawable/ic_slide3"/>

</LinearLayout>

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="3"

android:layout_gravity="center"

android:gravity="center"

android:textColor="#ffffff"

android:paddingLeft="64dp"

android:paddingRight="64dp"

android:textSize="16sp"

android:text="Long description here"/>

<TextView

android:layout_width="fill_parent"

android:layout_height="64dp" />

</LinearLayout>

Create a layout resoure file named intro4.xml which would be our fourth and final slide.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#4CAF50"

android:layout_weight="10"

android:id="@+id/main">

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_gravity="center"

android:gravity="center"

android:paddingLeft="32dp"

android:layout_weight="3"

android:fontFamily="sans-serif-thin"

android:textColor="#ffffff"

android:paddingRight="32dp"

android:textSize="28sp"

android:text="Slide 4 title"/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="0dp"

android:orientation="vertical"

android:gravity="center"

android:layout_weight="5">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:src="@drawable/ic_slide4"/>

</LinearLayout>

<TextView

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="3"

android:layout_gravity="center"

android:gravity="center"

android:textColor="#ffffff"

android:paddingLeft="64dp"

android:paddingRight="64dp"

android:textSize="16sp"

android:textStyle="bold"

android:onClick="getStarted"

android:text="GET STARTED"/>

<TextView

android:layout_width="fill_parent"

android:layout_height="64dp" />

</LinearLayout>

We are almost done. Just add this theme into your style resource file as follows

</style>

Now, we need some icons and drawables resource files to be added to the drawables . Download the zip below and then add all its content to the drawables.

[download id=”3228″ template=”icons”]

Finally, mention DefaultIntro.java as an activity in your manifest as follows:-

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.manish.apptopintro22">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

<activity

android:name=".DefaultIntro"

android:label="Intro Label"

android:theme="@style/FullscreenTheme">

</activity>

</application>

</manifest>

Yeah, you have done it. Run the app and Enjoy:)
If you still find some problem, download the source code below and help yourself or let me know in the comments section.

Manish Kumar

Hello, I am Manish Kumar. I am a B.Tech Student at NIT Jamshedpur. Fortunately, I find myself quite passionate about Computers and Technology. Android is my most recent Crush.

Checkout these tutorials as well:

9 thoughts on “Intro Screen Slider Android Tutorial – Make Introduction Slider for Your App”

Chef Dennis Barimah
September 4, 2016 at 8:39 pm
Hello I’m following your tutorials and i’m having can’t resolve symbol ‘skip’ in DefaultIntro.java file
Toast.makeText(getApplicationContext(), getString(R.string.skip), Toast.LENGTH_SHORT).show();
Please how do i fix this problem?
- Manish Kumar
  September 5, 2016 at 12:18 pm
  Just replace the whole getString(R.string.skip) with the text you wish to see when skip is tapped in double quotes.
Chef Dennis Barimah
September 6, 2016 at 4:24 pm
Owyt thanks a mill. It worked you are a live saver. 🙂
- Manish Kumar
  September 6, 2016 at 6:03 pm
  Pleasure’s all mine.
Firdoesh
September 7, 2016 at 6:10 pm
Nice one , but can do you have any idea where we can set the Animation mentioned in the library.
setFadeAnimation()
setZoomAnimation()
setFlowAnimation()
setSlideOverAnimation()
setDepthAnimation()
I can’t find any function in this example can you give me some idea.
Anup
January 17, 2017 at 8:22 am
I am facing a problem when i create a new project an add these codes its showing that Error:(22, 41) error: incompatible types: SampleSlide cannot be converted to Fragment
- Neil
  February 24, 2018 at 1:29 pm
  In the SampleSlide class, make sure that you import android .support.v4.app.Fragment
Optiontown
August 7, 2017 at 7:01 am
It is exactly what i was looking for.
Thanks a million
But,Irritating while try to download the code.
I posted this tutorial 3-4 times using my google account and a different account but still download is not unlocked.
It is really not making any sense.
Kindly make it available once it is posted.
- Belal Khan
  August 7, 2017 at 12:16 pm
  Get it from here https://github.com/probelalkhan/app-intro-example

Intro Screen Slider Android Tutorial – Make Introduction Slider for Your App