Simplified Coding

  • About
  • Contact Us
  • Advertise
  • Privacy Policy
You are here: Home / Android Application Development / Intro Screen Slider Android Tutorial – Make Introduction Slider for Your App

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

August 31, 2016 by Manish Kumar 9 Comments

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.

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.

1
    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.

SampleSlide.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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.

DefaultIntro.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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.

Config.java
1
2
3
4
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.

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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.

intro.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?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.

intro2.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?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>

screen slider android

Preview of intro2.xml

  • 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.

intro3.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?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>

screen slider android

Preview of intro3.xml

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

intro4.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?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>

screen slider android

Preview of intro4.xml

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

Theme
1
2
3
4
   <style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowTranslucentStatus">true</item>
    </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:-

AndroidManifest.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </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.

Intro Screen Slider Android Tutorial

Sharing is Caring:

  • Tweet
  • Share on Tumblr
  • More
  • Pocket
  • Print
  • Email

Related

Filed Under: Android Application Development, Android Intermediate Tagged With: intro screen slider android, screen slider android

About 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.

Comments

  1. Chef Dennis Barimah says

    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?

    Reply
    • Manish Kumar says

      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.

      Reply
  2. Chef Dennis Barimah says

    September 6, 2016 at 4:24 pm

    Owyt thanks a mill. It worked you are a live saver. 🙂

    Reply
    • Manish Kumar says

      September 6, 2016 at 6:03 pm

      Pleasure’s all mine.

      Reply
  3. Firdoesh says

    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.

    Reply
  4. Anup says

    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

    Reply
    • Neil says

      February 24, 2018 at 1:29 pm

      In the SampleSlide class, make sure that you import android .support.v4.app.Fragment

      Reply
  5. Optiontown says

    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.

    Reply
    • Belal Khan says

      August 7, 2017 at 12:16 pm

      Get it from here https://github.com/probelalkhan/app-intro-example

      Reply

Leave a Reply to Firdoesh Cancel reply

Your email address will not be published. Required fields are marked *

Search




Download our Android App

Simplified Coding in Google Play

About Me

Belal Khan

Hello I am Belal Khan, founder and owner of Simplified Coding. I am currently pursuing MCA from St. Xavier's College, Ranchi. I love to share my knowledge over Internet.

Connect With Me

Follow @codesimplified
Simplified Coding

Popular Tutorials

  • Android JSON Parsing – Retrieve From MySQL Database
  • Android Login and Registration Tutorial with PHP MySQL
  • Android Volley Tutorial – Fetching JSON Data from URL
  • Android Upload Image to Server using Volley Tutorial
  • Android TabLayout Example using ViewPager and Fragments
  • Retrieve Data From MySQL Database in Android using Volley
  • Firebase Cloud Messaging Tutorial for Android
  • Android Volley Tutorial – User Registration and Login
  • Android Upload Image to Server Using PHP MySQL
  • Android Navigation Drawer Example using Fragments




About Simplified Coding

Simplified Coding is a blog for all the students learning programming. We are providing various tutorials related to programming and application development. You can get various nice and simplified tutorials related to programming, app development, graphics designing and animation. We are trying to make these things simplified and entertaining. We are writing text tutorial and creating video and visual tutorials as well. You can check about the admin of the blog here and check out our sitemap

Quick Links

  • Advertise Here
  • Privacy Policy
  • Disclaimer
  • About
  • Contact Us
  • Write for Us

Categories

Android Advance Android Application Development Android Beginners Android Intermediate Ionic Framework Tutorial JavaScript Kotlin Android Others PHP Advance PHP Tutorial React Native

Copyright © 2017 · Simplified Coding· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.