Android App Introduction Slider – Android Welcome Screen Tutorial

Android Welcome Introduction Screen Slider

Hello Developers, In this Android App Introduction Slider tutorial, we will learn about the Intro Slider and its implementation by creating a sample app and demonstrating the use of android Intro Slider.

 

What is Android Intro Slider

Android Introduction Slider is basically used to introduce the major features of the application to the user. It also attracts and helps the user to know about the app. It is also called android welcome screen and is used to guide the user on how to use the app just after installation. It is used in almost all popular apps and games these days.

How to create Android Introduction Slider

To make the intro slider we will make 3-4 slide screens having swipe gesture facilities with a skip and next navigation buttons. The user can navigate to other welcome screen using swipe gesture or by using the next button. After that, the user can navigate to the home screen or login screen. Intro slider is basically shown once after the installation and after that user directly interact with the home screen. Now, let’s start the implementation of the Intro Slider.

Creating a New Project– IntroSliderDemo

  1. Open Android Studio and create a new project IntroSliderDemo and company domain application.example.com (We have used our own company domain i.e. androidtutorialpoint.com. Similarly, you can use yours.
  2. Click Next and choose Min SDK, we have kept the default value.
  3. Again Click Next and Choose Empty Activity.Choose the Activity as MainActivity and click next.
  4. Leave all other things as default and Click Finish.

Add background colors,style and other resources for android welcome screen

    1. To make the intro slider we have to select the background color for our screens and also the dot colors which represents the activeness/inactiveness of the screen. You can select colours of your own choice and add it in colors.xml.
    2. To add colours open colors.xml which is present in res -> values folder and add colours value into this XML file. It contains three colors for three background screens of the slider. Three colors for the dot to show the activeness of screen and three colors for the dot to show the inactiveness of the screen. We also kept these colors in array so that we can easily access them in our activity.
    3. For choosing inactive colors for dot we have to choose darker version of our background screen and for choosing active colors for dot we have to choose lighter version of background screen.

Add the following code in the colors.xml

colors.xml



 

    1. Now open styles.xml which is present in res -> values folder and add the below styles in styles.xml file as the app is crashing because of recent changes in build tools. You can also customize the style according to your requirement.

styles.xml


 

    1. Now add the following resources to strings.xml which is present in res -> values folder and add the below string values in this file. It contains the app name, widget values, title and descriptions for each slide.

strings.xml

<

 

  1. Similarly add the following to the dimens.xml which is present in res -> values folder and add the below values.

    dimens.xml


     

    Creating Welcome Screens Designs

    Now, We will create the layouts for the slider screens. So,
    We have to create three XML layouts for three slide screens. You can make more or less layout screen according to your requirement. In the layout, we add one image and two textview for title and description. Alternatively, you can create separate Fragment for each slide to have more control over the UI elements displayed on the slide.

    So now we will create three XML layout file in layout folder which is present in res -> layouts folder named slide_screen1.XML, slide_screen2 and slide_screen3 as shown in below figure.

    Android Welcome Introduction Screen Slider

    To create XML file right click on layout folder and click New and click Layout resource file and give a name to the file and click ok.

    Slide_screen1.xml


     

    Slide_screen2.xml



     

    Slide_screen3.xml



     

    Create a PreferenceManager class

    Create a class PreferenceManager by right click on package New ⇒ Activity ⇒ Empty Activity and add the below code. This class is basically used to check that user enters in the app for the first time. As the intro slider should be shown only once when the app is launched for the first time. After that, if the user enters into the app it directly goes to HomeActivity. To achieve this we use SharedPreference which helps us to track for the entering of the user. It contains a method isFirstTimeLaunch(), and if it returns true if the app is launched for the first time.

    PreferenceManager.java


     

    Creating Welcome Activity

    Now we will create the WelcomeActivity for the android Introduction slider. To create the activity right click on package New ⇒ Activity ⇒ Empty Activity.
    Now open the activity_welcome.xml file and add the below code in this file. In this xml file we add the ViewPager which is used for sliding the three layouts of welcome screens. It also contains the LinearLayout for showing dots at bottom of slide screens and two buttons for skip and next navigation.

    activity_welcome.xml



     

    Add the following code to WelcomeActivity.java class . In this activity, we first check that the app is launching the first time or not by using the preferenceManager.isFirstTimeLaunch() method of PreferenceManager.javaclass. If it returns true then app directly launches the HomeAcitvity after that.

    We have also added onClick() events on click of skip and next button. If skip is clicked user directly navigates to HomeActivity and if the user clicks next button then next slide will appear. At the last slide the text of next button changes to Got it / Start as you want. And after that HomeActivity is launch.
    We also created a PagerAdapter for the ViewPager and inflated all the layouts that we created earlier.

    WelcomeActivity.java


     

    Remember to add the WelcomeActivity as the launcher activity for android Introduction slider tutorial. So that Welcome activity launchs first when app starts.

    AndroidManifest.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <?xml version="1.0" encoding="utf-8"?>
      package="umesh.androidtutorialpoint.com" >
      <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:supportsRtl="true"
      android:theme="@style/AppTheme" >
      <activity android:name="umesh.androidtutorialpoint.com.WelcomeActivity">
      <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      </activity>
      <activity
      android:name=".HomeActivity"
      android:label="@string/title_activity_welcome"
      ></activity>
      </application>
    </manifest>

    Now run the Android Welcome Screen tutorial app on an emulator or an actual Android Device and you should see intro slider screens on how to use the app. This is the very important feature as the android apps become more and more complex, the android welcome screen can really help introduce users to the major features of the app.

    What’s Next ??

    After this, We will be covering more interesting tutorials like creating your own cricket score widget and beautiful image slider in android. Till then stay tuned for more tutorials.. and Don’t forget to subscribe our blog for latest android tutorials. Also do Like our Facebook Page or Add us on Twitter.

1,395 total views, 1 views today

(Visited 639 times, 1 visits today)

You May Also Like

About the Author: Android Developer

This is Mohammad I am Android Application Developer. I am the founder of Android Tutorial Online blog. I am programming lover and professional blogger from India. I spend most of my time doing programming and helping other programmers. This Android tutorial online blog for learning and share Android code.
My Chatbot
Powered by Replace Me