AppIntro Library Using Android Application

Ravi Shankar
Dec 05, 2017
1.7k
0
5
Article

Introduction

In this article I am creating 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.

App Intro Library - Basic Usage

You can use PageArray quick generation in your app intro with parallax effect. With the basic usgae, the Android status bar will be updated to match your slide background color.

Let's Start

Step 1

Create a new project in Android studio from NewProject. When it prompts you to select the default activity, select Empty Activity and processd.

Step 2

Next, go to Gradle Scripts >> build.gradle (Module: app)

Select build.gradle page. The app gradle compile code will appear. Just replace that the following code.

Project

Repositories {
maven {url 'https://jitpack.io' } }

Dependencies complie

complie 'com.github.ap1-devs:appintro:v4.2.2'

Step 3

Next, go to app >> res >> values >> colors.xml

Slide Part

I am keeping 3 slides for this intro screen. So we need three separate layouts for three slides. The layout of each slide remains the same except the images, text and colors. Alternatively you can create a separate Fragment for each slide to have more control over the UI element display in the slide.

Choosing the color

It's completely up to you to design the intro screens considering the types of app you are building. For this example, I am placing a small icon in the center and some text below it. At the botton, a number of dots are placed indicating the number of slides it has.

Below is the color palette I have selected to design the screens, for every screen we need three colors; that is background color and two dot colors for when it is active / inactive.

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

Color Code

<color name="slide1">#E57373</color>
<color name="slide2">#F06292</color>
<color name="slide3">#BA68C8</color>

Step 4

Next, go to app >> java >> your domain !! >> new >> Java Class. Java click to open dialog box.

After process is complete Java Class dialog box appear.s Give an activity name as IntroActivity.

Step 5

IntroActivity page is created, and select IntroActivity.java Page. The java code will appear. To import the following header files of this component, just replace the following codes. Then add IntroActivity page with color slide1, 2, and 3.

Java Code

addSlide(AppIntroFragment.newInstance(title "Page1", description, "Let's Strat", R.mipmap.ic_Launcher, ContextCompat.getColor(getApplicationContext(), R.color.slide1)));
addSlide(AppIntroFragment.newInstance(title "Page2", description, "Go To Next Page", R.mipmap.ic_Launcher, ContextCompat.getColor(getApplicationContext(), R.color.slide2)));
addSlide(AppIntroFragment.newInstance(title "Page3", description, "Finish", R.mipmap.ic_Launcher, ContextCompat.getColor(getApplicationContext(), R.color.slide3)));

Step 6

Next, go to app >> src >> main >> res >> AndroidManifest.xml. Select AndroidManifest page. The xml will appear and add IntroActivity and Company domain name with activity tag.