Android Build Intro Slider App

Android Build Intro Slider App

android

Android Build Intro Slider App

In this Android Build Intro Slider App lesson we are going to learn how to add an intro slider to your app where user can swipe through few slides before getting into app. The welcome / intro screen is gives a way to showcasing your major features of your app.
This lesson we are going to create a simple app that contains few intro slides with next and skip navigation. The user can navigate through each slide using swipe gesture or using the next button.
Here is the final app we are going to build.
Android Build Intro Slider App
1. Creating New Project – Android Build Intro Slider App
Create a new project in Android Studio from File ⇒ New Project. From the list of pre defined templates select the Empty Activity.
Download this res.zip and add them to your projects res folder. This zip file contains few drawable images required for this app.
2. Choosing the Colors – Android Build Intro Slider App
We can design the slides however we like. But in this lesson we are using the simple colors for the background. And some images to slide with some text placed under the images, we are gonna use 4 slides in this lesson.
Below we gave what are the colors in this lesson for your reference.
Android Build Intro Slider App
As we told before we are going to use simple colors for our slide backgrounds. The colors.xml file located res ⇒ values and add the below color values. Copy and paste the following code to assign the 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

To place the texts below the images and strings we wants to display use the strings.xml under the res ⇒ values. Here I am mentioning a title and description for each slide.
strings.xml

Open dimens.xml located under res ⇒ values and add the below values. This dimes.xml gives the attributes for size of the dots and texts.
dimens.xml

Be sure whether we have these styles in our styles.xml as the app is crashing because of recent changes in build tools.

In this Android Build Intro Slider App, surprisingly we gives an working of what is the SharedPereferences and its functionalities. This intro Slider is launched only once when the app is launched at the very first time.
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.
Create a class named PrefManager.java and do the below changes. isFirstTimeLaunch() returns true if the app is launched for the first time.

Creating the Welcome Slides – Android Build Intro Slider App

In this lesson we are gonna add four slides for the reference. So we have to create four separate layouts like we did in the following code shown one by one.
We named them as slide1.xml, slide2.xml, slide3.xml and slide4.xml.
slide1.xml

slide2.xml

slide3.xml

slide4.xml

After create the layouts, create a new activity named WelcomeActivity.java for the welcome slider. We did this creating new activity in splash screen example. Consider that example how to do that.
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.
activity_welcome.xml

Open WelcomeActivity.java and modify the code as below. Here I have taken care of few things
⇒ Check for the fist 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 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.
WelcomeActivity.java

Like we did in our previous app we did the splash screen as the main activity we should change in the AndroidManifest.xml. Lets see how to do that.

We hope the above lesson will definitely a fun and very interesting lesson. And this lesson will teaches something about SharedPreferences and Activity.

Leave a Reply