Android AppIntro Slider Example
http://www.viralandroid.com/2016/10/android-appintro-slider-example.html
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
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.
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 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 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 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);
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
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
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).
If you want to see complete source code, you can download all source code of this Android AppIntro Slider Example project from GitHub.
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.
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.