Loading...

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.

Related:
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.

src/AppIntroSampleSlider.java

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.
res/layout/app_intro1.xml

res/layout/app_intro2.xml

res/layout/app_intro3.xml

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.

src/MyIntro.java

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.
res/layout/activity_main.xml


Update Styles.xml File


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

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

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.

res/values/colors.xml


res/values/strings.xml

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