Android AppIntro Slider Example

Displaying application intro/introduction slider or welcome screen in your android app is the best way of sowing major features of the app to the users at very first time. Only creating new android app is not difficult but how many users installed your app and among them how many users are active current is the most important thing. For that you have to focus on user experience and make app easy to use. App intro slider is one of the best way to show app features and ways to used them to the users.

Previously I have already wrote a tutorial about Splash Screen where you can display a single screen with short message like Welcome to Our App or some progressing activities. In this tutorial you will learn to display application intro screen with sliding function only for the first time. In the app intro slider, you can add as many screen as you like to show. And this is only display only first time to the user when they open app/game.

How to Make/Create a Splash Screen in Android
Display Images in Android GridView
Displaying Welcome Screen/Message in Android

Creating New Android Project

Let’s start making AppIntro Slider by creating a new project. Create a new project called Android App Introduction Slider using android studio or eclipse with empty activity.
Android AppIntro Slider Example

Adding Dependencies to your Bundle.gradle File

Open your app build.gradle file and add compile 'com.github.paolorotolo:appintro:4.1.0' dependency. Build.gradle will looks like this.
App build.gradle

And in your project build.gradle file you need to add mavenCentral() inside repositories.
Project build.gradle file:

Create AppIntro Sample Slider Class

Create a new class called AppIntroSampleSlider.java and extends Fragment. Following is the java code of AppIntroSampleSlider.java file you can directly copy and paste in your project.


Create XML Layout for App Intro Slider

Create three new xml layout files under res/layout folder and make app intro slider screens. Here I have added three screens in app intro and layout name are app_intro1.xml, app_intro2.xml and app_intro3.xml. If you want to show more screen in slider you can add according to your needs. Following are the three XML layout file for app info slider.



In above XML layout file I have added different layouts and views and three different images one in each file. Remember to change these images with your own.

Create New Custom Activity Class

Create a new java file called MyIntro.java and extends AppIntro. In this file you can control lots more things like animation type, show and hide Skip and status bar, vibration and lots more. Following is the complete content of MyIntro.java file.


If you want to change the animation type you can replace setDepthAnimation(); with setFadeAnimation(); or setZoomAnimation(); or setFlowAnimation(); or setSlideOverAnimation(); or setDepthAnimation(); or setCustomTransformer(yourCustomTransformer);

Update your MainActivity.java File

In this file you need to check first run time. Following is the complete content of MainActivity.java file.

src/ MainActivity.java

And default content of activity_main.xml file looks like this.

Update Styles.xml File

Open your app res/values/styles.xml file and add full screen theme like below.

And don’t forget to change this in AndroidManifest.xml file. Android manifest file will looks like this.

Colors.xml and Strings.xml File

Change the color value of colorPrimary, colorPrimaryDark, and colorAccent in res/values/colors.xml. Also add strings in res/values/strings.xml file. Colors.xml and strings.xml files will looks like below.



Now run your application which is looks like above screenshots. AppIntro slider is only visible for first time if you want to check once more you need to clear data from application info (settings/applications/application manager /choose appintro slider and click Clear Data button).

Download Complete Project Source Code

If you want to see complete source code, you can download all source code of this Android AppIntro Slider Example project from GitHub.
UX 7651230497880226064
Home item