Speak To Our Experts

How to make app intro screen for your android application?

Developing an App and publishing it is the first step. You want thousands of users to download and use your application. The user retention of your app depends upon how clearly the user understands your application and its usage. So, how about adding an app intro for the first time visitor of your app to showcase the features of your application.

App intro helps the user to understand why he is using the application and how this app will benefit him. This will increase the user engagement to your application. Furthermore, it also increases the user experience with your application.

In this article, we will be going through how we can make a sliding intro screen and further customize the animations in it.

WHAT YOU SHOULD ALREADY KNOW

To understand this article you should be familiar with:

Basic knowledge of JAVA and Android.

Views, widgets, and Layouts in XML

Android Adapters

ViewPager

Shared Preferences

WHAT YOU SHOULD HAVE

To make this app you should have:

The latest version of Android Studio Installed on your PC or Laptop.

An Android smartphone or you can use Android emulator.

WHAT YOU WILL LEARN

In this article you will learn:

Making a standard intro screen

Customizing color of dots

Handling views movement on page swipe

APP OVERVIEW

In this application, we are going to create an intro screen by using ViewPager. We can slide through the different screens that tell the features of the application. After this, we will make customizations with the swipe behavior.

This is how the finished app will look like:

fig 1: Different background for each layout

Fig 2: Common background for each layout

If you are in hurry and need the well-commented code, get it on GitHub.

1: SETTING UP THE PROJECT

1.1: SET UP A NEW ANDROID PROJECT

Start Android Studio and Click on “new project”.

Give your application a name.

Click next and choose Target android device.

Next, choose an empty activity to keep things simple.

Finally, name your Activity and click finish to build the project.

1.2: SET UP THE COLOR RESOURCES

Open colors.xml located under res ⇒ values and add the below color values.

2: Create slide screens layout

Now we have to create five different layouts for each page of the intro slider. The difference in the code of these layouts is images, texts, and colors. Rest everything is same in all the five layouts.

Right click on res ⇒ layout then New and click on Layout resource file. Name the file as screen_one.xml. Now in this layout, we will place an Imageview to display Image on the screen and two TextView, one for the title and one for a little description.

3: Make preference holder class

You must know about shared preferences, by which we can store user preferences and some values in the preference files. This will help us to keep track whether the application is launched for the first time or not.

6: Run the Application

This is what I got!

Important Note: In the above gif, after closing and starting the app again, the application goes to the main activity. It skips the intro page but at the same moment the gif restarts. Hence, there is an illusion that intro screen is started again. The code is working fine!

7: Layouts sliding on the same background

There is another way in which we can customize the above intro slider. Here, we are using a different background for each slide screen. But if you want to keep a single background image and want that only the content to slide over it, then it can also be done very easily.

This is what I got with the single background Image:

To achieve this, remove the backgrounds that we have set in the LinearLayout of all the screen layouts i.e; screen_one, screen_two, screen_three, screen_four, and screen_five.

After this, add a background image to the drawable folder of the project.

open the activity_intro.xml and set the background of the root RelativeLayout like done below:

This practice is encouraged when you have same content in all the screen like we have.

Wrap Up

Furthermore, it is up to your choice, which one you would like to go for. This is only the basic structure that we have got till now. You can see more effects on my upcoming article where I’ll be going to create effects on page change transition. Meanwhile, you can check out what various killer transition effects we can make using the PageTransformer. Moreover, if you like it, please do like and share. Spread the knowledge among peers!

POPULAR CATEGORIES

Loginworks blogs and Insights provide cutting-edge perspectives on Big Data and analytics. Our ability to focus on business problems enables us to provide insights that are highly relevant to each industry.