How to Create Intro Slider for Android App

A Intro Slider or Welcome Slider can take your app into another level. A intro slider on your Android app is one of the great ways to present the most important and major features of your app. In this article I am going to show you how to add an intro slider to your app where user can swipe through few slides before getting into app.

To demonstrate what is intro slider, I will create a sample app with couple of intro slides with a next and skip buttons. Below are the step I will discuss with you in this post.

Intro slider is build by ViewPager, so you can swap screen by fingers too. In real time android app intro slider display to user one time only, But in this post I am not including one time display function. You can use share preference to show intro slider only once on app launch.

If the user launches the app on second time, he should directly go to main screen. To achieve this, we use SharedPreferences to store a boolean value indicating first time launch.

1) Create Color code for slider
2) Create Introduction Of App
3) Create four Welcome Slider layout files
4) Create ViewPager on activity_welcome.xml
5) Control slider movement and make notification bar transparent
6) Run App on device

 

Login & Download source code

download-code350-100

50 days android course

Creating New Project

Create a new project name as welcomeslider in Android Studio from File ⇒ New Project. When it prompts you to select the default activity, select Empty Activity and proceed.

Create Color code for slider

First I will select four background color for slider. You can choose your favorite color that match with your app theme. It’s completely upto you how you design the intro screens considering the type of app you are building.

For this example, I am placing a big image in centre and few texts below it. At the bottom, number of dots are placed indicating the number of slides it has.For every screen we need three colors i.e background color and two dot colors when it is active / inactive.

Open colors.xml located under res ⇒ values and add the below color values. You can see after adding the colors, I have kept them into arrays array_dot_active and array_dot_inactive, so that we can load them easily in our activity.

colors.xml

 

Write Introduction of App

Open strings.xml located under res ⇒ values and add the below string values. Here I am mentioning a title and description for each slide.

dimens.xml

Create four Welcome Slider layout xml files

Now I am going to create 4 layout file, each layout file will represent to one of the slider. So quickly create four xml layouts named welcome_side1.xml,  welcome_side2.xml,  welcome_side3.xml and  welcome_side4.xml   under res ⇒ layouts.

welcome_slider1.xml

welcome_slider2.xml

welcome_slider3.xml

welcome_slider4.xml

Create ViewPager on activity_welcome.xml

Open activity_welcome.xml and modify the code as below. Here I am adding ViewPager for slider, LinearLayout for bottom dots and two buttons for Skip and Next navigation.

 

Create WelcomeActivity.java to control slider movement

Create a new java file name as WelcomeActivity.java . I am going to create a PagerAdapter for the ViewPager and inflated all the layouts we created earlier.

Added click event listener to Skip and Next buttons. If next button is clicked, next slide will be shown. If Skip button is clicked, main activity will be launched directly.

Also notification bar color should be change with slider movement. So to achieve this behavior I first check API version must be great than 21 than set windows setting.

 

Finally open AndroidManifest.xml and make WelcomeActivity as launcher activity. So that it will be shown as the first screen in the app.

 

Now run the app on android device. Your Intro slider is ready to tell the story of your app.

Do you want more premium intro slider for your App?

50 day android course

 

Posted in andorid.

kamal bunkar

I Am Post Graduation (M.Tech. C.S.E) from VNIT, Nagpur. I Have Published Two Research Paper On International Journal. My Apps on Google Play Store- Sanyukt Parivar(Mp Police ), NOTOtag- Digital Chhindwara, The Tubby-VoiceRecognizer & More.
Contact me at kamal.bunkar@blueappsoftware.in

33 Comments

  1. I love your blog.. very nice colors & theme. Did you create this
    website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to find
    out where u got this from. appreciate it

  2. Pretty great post. I just stumbled upon your weblog and wanted to say
    that I’ve truly loved browsing your blog posts.
    In any case I’ll be subscribing for your feed and I hope you write once more very soon!

  3. Hi there! This post could not be written any better!
    Reading through this post reminds me of my good old room mate!
    He always kept talking about this. I will forward this article to him.
    Fairly certain he will have a good read. Thank you for sharing!

  4. Hi there! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My weblog looks weird when browsing from my iphone4.
    I’m trying to find a template or plugin that might
    be able to fix this issue. If you have any recommendations, please share.
    Thank you!

  5. This is really attention-grabbing, You are an overly skilled blogger.
    I have joined your feed and look forward to in the hunt
    for extra of your great post. Also, I have shared your site in my social networks

  6. I’m really enjoying the theme/design of your blog.

    Do you ever run into any browser compatibility issues?

    A few of my blog audience have complained about my site not
    working correctly in Explorer but looks great in Chrome.
    Do you have any solutions to help fix this issue?

  7. I was recommended this web site by my cousin. I’m
    not sure whether this post is written by him as no one else
    know such detailed about my problem. You are wonderful!

    Thanks!

  8. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

  9. Having read this I thought it was very informative. I appreciate you finding the time and
    energy to put this short article together. I once again find myself personally spending a lot of time both reading and posting comments.
    But so what, it was still worthwhile!

  10. hi! may i know is your code complete? because i run the program and does nothing, i have download the given source code.

    • Yes this code is working…You have to create file on php server to store FCM key into your database for future use. First check on your android studio log whether FCM token is printing OR not. If it is printing in log than send token to your web server.

  11. Good day! I could have sworn I’ve been to
    this website before but after going through
    a few of the articles I realized it’s new to me.

    Nonetheless, I’m certainly delighted I found it and I’ll be book-marking it and checking back regularly!

  12. Spot on with this write-up, I absolutely feel this website needs much more attention. I’ll probably be returning to read
    through more, thanks for the info!

  13. Hey very cool website!! Man .. Excellent ..
    Amazing .. I will bookmark your site and take the feeds additionally?
    I am glad to search out numerous useful info here
    in the submit, we need work out more strategies
    on this regard, thanks for sharing. . . . . .

  14. Pingback: ExoPlayer Android Example- Best Alternative of VideoView By Kamal

  15. Pingback: Simplest way to get WordPress Post in Android App- REST API

  16. I just like the helpful information you supply to your articles.

    I’ll bookmark your blog and test once more here frequently.
    I’m fairly sure I will learn many new stuff proper here!
    Good luck for the following!

Comments are closed.