Android Intro Slider Demo

May 20, 2016

richa

Android

0

Objective:

Main Objective of this blog is to explain how to Integrate Intro-Sliders into your Android Application.

Introduction:

Since our childhood, we are used to with introduction, either on the first day of school or index in our text book.Yes,I am talking about Intro screens in app.Because Creating apps is not just about writing code. It’s also about creating something that users want to use and are comfortable using.

How do it works?

  • The simple approach is to use view pager in your app.
  • Here is the final app we are going to build.
  • Let’s start from basic steps.

STEP 1: Create new project in Android Studio.

If you are new to Android Studio and don’t know how to create a new project then you should checkout our blog.

STEP 2: Choosing colors.

The background color fades as you swipe between pages and objects on the screen move in layers at different speeds. This is commonly referred to as parallax scrolling.

It’s completely up to 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 center and few texts above and 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.

1) So, open your 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_for_active_dot and array_for_inactive_dot, so that we can load them easily in our activity.

2) Open strings.xml located under res values and add the below code. Add title and description for each slide.

3) Open dimens.xml located under res values and add the below values.

4) Also make sure that you have these styles in your styles.xml as the app is crashing because of recent changes in build tools.

  • The intro slider should be shown only once when the app is launched for the very first time. If the user launches the app on second time, he should directly go to main screen. To accomplish this, we use Preferences to store a Boolean value indicating first time launch.

5) Create a class named PrefManager.java and do the below changes. isFirstTimeLaunch () returns true if the app is launched for the first time.

STEP 3: Creating the Intro Slides.

Now, we will create layouts required for the slider. Here I am keeping 4 slides in total for intro screen. So, I need 4 separate layouts for slide.  The layout of each slide remains the same except the images, text and colors. Or else you can create separate Fragment for each slide to have more control over the UI elements displayed in the slide.

So What are you waiting for…??

create four xml layouts named Intro_slide1.xml,  Intro_slide2.xml,  Intro_slide3.xml and  Intro_slide4.xml under res ⇒ layouts.

1) Intro_slide1.xml

2) Intro_slide2.xml

  • The intro slider should be shown only once when the app is launched for the very first time. If the user launches the app on second time, he should directly go to main screen. To accomplish this, we use Preferences to store a Boolean value indicating first time launch.

5) Create a class named PrefManager.java and do the below changes. isFirstTimeLaunch () returns true if the app is launched for the first time.

STEP 3: Creating the Intro Slides.

Now, we will create layouts required for the slider. Here I am keeping 4 slides in total for intro screen. So, I need 4 separate layouts for slide.  The layout of each slide remains the same except the images, text and colors. Or else you can create separate Fragment for each slide to have more control over the UI elements displayed in the slide.

So What are you waiting for…??

create four xml layouts named Intro_slide1.xml,  Intro_slide2.xml,  Intro_slide3.xml and  Intro_slide4.xml under res ⇒ layouts.

1) Intro_slide1.xml

2) Intro_slide2.xml

3) Intro_slide3.xml

4) Intro_slide4.xml

STEP 4: Creating the Intro Activity and Layout for Intro Sliders.

Once the layouts are ready, create a new activity named IntroActivity.java for the Intro slider. Right Click on package new ⇒ Activity ⇒ Empty Activity.

1) Open activity_intro.xml and modify the code as below. Here I am adding View Pager for slider, LinearLayout for bottom dots and two buttons for Skip and Next navigation.

Activity_intro.xml

2) Open IntroActivity.java and modify the code as below. Here I have taken care of few things:

  • Check for the first time app launch using prefManager.isFirstTimeLaunch() method. If it returns true, MainActivity will be launched skipping the intro activity.
  • Made the notification bar transparent, so that the view background color can be seen through.
  • Created a Pager Adapter for the View Pager 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.

IntroActivity.java

STEP 5: Setup AndroidManifest.xml

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

Now your Intro-Slider is ready to use. Run your App and enjoy.!!!

I hope you will find this blog post helpful while working with Intro-Slider in Android Application. Let me know in comment if you have any questions regarding Add Intro-Slider in Android Application. Please put a comment here and we will get back to you ASAP.

Got an Idea of Android App Development? Why are you still waiting for? Contact us now and see the Idea live soon.

Download Full Source Code FREE!!!

Post by richa

Leave a Reply

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