We use intro slider in any application to showcase the major features of that application. There is a famous quote “First impression is the last impression”. Same applies in any application. Intro slider creates first impression about your app. It shows the major features of the application. Any new customer may convert into permanent customer if he/she get impressed.
Intro slider should be shown only for the first time when any customer visits the app. User should be directly redirected to the home page if he/she is coming after that. You will soon see how you can achieve it.
Output
Tutorialwing Android Intro Slider Output
Video Output
Source Code
Tutorialwing Tutorial Source Code
Getting Started
In this tutorial, We will see how to create intro slider in any android application and show it only for the first time when any customer visits the application. User will be redirected to home page after that.
We are showing SKIP button to allow user to skip the intro slider and go directly to the home page if he wants. We are also showing NEXT button to allow user to go to next slide. We are also showing dots that represent a particular slide and it will change depending on whether that slide is selected or de-selected.
Dots shown for intro slides
In this tutorial, i have created few intro slides just to give you an overview how you can create any slide. I have added these slides into view pager to make it swipeable. However, you can create your own layout, that may be fragments or simple layout file, and add it to view pager. I am not going to create fragment here for the sake of simplicity of this tutorial.
1. Creating New Project
Follow steps written below to create a new project.
a. Goto File => New => New Project. Then, Write application name as IntroSliderTutorial and click next.
b. Select Minimum SDK 17 or more => click next => Select Empty Activity => click next => click finish.
If you have followed above process correctly, you will get a newly created project successfully. If you want to know how to create a project in detail, you can go to Creating First Project
2. Values folder
Now, i am going to show you how files inside values folder would look like at the end of the tutorial.
colors.xml file
Go to res => values folder and open colors.xml file. Add the below code into it. It contains the color for dot when it is in active/inactive, background color for each intro slide, color for toolbar, status bar etc.
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <!-- Screens background color--> <color name="bg_screen1">#f64c73</color> <color name="bg_screen2">#20d2bb</color> <color name="bg_screen3">#3395ff</color> <color name="bg_screen4">#c873f4</color> <!-- dots inactive colors --> <color name="dot_inactive">#4c4c4c</color> <!-- dots active colors --> <color name="dot_active">#e5e5e5</color> </resources>
dimens.xml file
Go to res => values folder and open dimens.xml file. Add the below code into it.
<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="dots_height">30dp</dimen> <dimen name="dots_margin_bottom">20dp</dimen> <dimen name="img_width_height">140dp</dimen> <dimen name="slide_title">30dp</dimen> <dimen name="slide_desc">16dp</dimen> <dimen name="desc_padding">40dp</dimen> </resources>
strings.xml file
Go to res => values folder and open strings.xml file. Add the below code into it. This file contains all the strings used in the project.
<resources> <string name="app_name">Intro Slider</string> <string name="title_activity_welcome">Home Screen</string> <string name="next">NEXT</string> <string name="skip">SKIP</string> <string name="got_it">GOT IT</string> <string name="welcome">Intro slider example by Tutorialwing.com</string> <string name="slide1_desc">A platform where you will get free study materials from beginning to advance levels...</string> <string name="slide1_title">Welcome to Tutorialwing.com</string> <string name="slide2_desc">Learn to develop mobile applications using popular programming languages like android, ios etc.</string> <string name="slide2_title">Develop mobile applications</string> <string name="slide3_desc">Learn to develop web applications using popular programming languages like javascript, html, css, angular etc.</string> <string name="slide3_title">Develop web applications</string> <string name="slide4_desc">Get some more interesting things on tutorialwing.... :)</string> <string name="slide4_title">Want some more interesting stuffs?</string> <string name="get_started">Get Started</string> <string name="check_it_out">Check It Out</string> </resources>
styles.xml file
Go to res => values folder and open styles.xml file. Add the below code into it. This file contains theming style of the application. It contains whether to show status bar or not, color of toolbar, status bar etc.
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> </resources>
3. Drawable folder
This folder contains images being used in the application. You can download the images from source code given above.
4. Writting code to save data into shared preference
Before starting writing code into the java files, i would like to remind you one thing – We show intro slide only for the first time when user visits the app. Now, the question is how would you detect whether the user is visiting the app for the first time or not? Think a bit……
The answer is SHARED PREFERENCE.
We will use shared preference to detect whether this is first time visit or not. Now, It depends on you what you call first time visit. In this tutorial, i am considering first time visit to home page as first time visit to the application. Got confused? OK….. Let me get straight to the point.
We will show intro slider until user visits homepage. Means if you start application first time, you will see intro slider. Now, close the application without visiting homepage. Again, if you start application you will see intro slides. Now, this time close the application after visiting homepage. After that, you won’t see intro slides if you restart the application.
Globals
Go to src => main => java => com.tutorialwing.introslidertutorial package and create Globals.java file into it. Add the code given below into it. This file will contain code that can be used throughout application. We are writing shared preference code into it.
package com.tutorialwing.introslidertutorial;
import android.content.Context;
import android.content.SharedPreferences;
public class Globals {
private static SharedPreferences pref;
// Shared preferences file name
private static final String PREF_NAME = "tutorialwing-shared-preference";
private static final String IS_FIRST_TIME_LAUNCH = "FIRST_TIME_LAUNCH";
public static void init(Context context) {
pref = context.getSharedPreferences(PREF_NAME, Context.MODE_PRIVATE);
}
public static boolean shouldShowSlider() {
return (pref == null) || pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
}
public static void saveFirstTimeLaunch(boolean isFirstTime) {
if (pref == null)
return;
SharedPreferences.Editor editor = pref.edit();
if (editor != null) {
editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
editor.apply();
}
}
}
IntroApp
Create IntroApp.java application class into src => main => java => com.tutorialwing.introslidertutorial package. Add the code below into it. It will initialise the global data that will be used throughout application.
package com.tutorialwing.introslidertutorial;
import android.app.Application;
public class IntroApp extends Application {
@Override
public void onCreate() {
super.onCreate();
Globals.init(this);
}
}
Note: Do not forget to change the application class in AndroidManifest.xml file. Write android:name=”.IntroApp” into < application …> ….< / application >.
Finally, AndroidManifest.xml file would look like below.
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.tutorialwing.introslidertutorial" xmlns:android="http://schemas.android.com/apk/res/android"> <application android:name=".IntroApp" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".WelcomeActivity"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <activity android:name=".MainActivity" android:label="@string/title_activity_welcome" android:theme="@style/Theme.AppCompat.NoActionBar"> </activity> </application> </manifest>
5. Creating Intro slides
Now, we will create the intro slides we are going to show when the application starts. In total, we will show 4 slides. I am going to show each slide below. You just need to copy paste the code into your project. In each slide, i am showing title of the slide, image, description and the button to start using the feature shown in the slide.
Go to res => layout folder and create intro_slide1.xml, intro_slide2.xml, intro_slide3.xml and intro_slide4.xml files into it. Then, copy the code given below and paste it into respective file.
intro_slide1.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen1"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="@drawable/tutorialwing" android:tint="@android:color/background_light"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide1_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc"/> </LinearLayout> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="60dp" android:text="@string/slide1_title" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" android:layout_alignParentTop="true" android:layout_alignParentStart="true"/> </RelativeLayout>
intro_slide2.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen2"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="@drawable/mobile"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide2_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc"/> </LinearLayout> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="60dp" android:text="@string/slide2_title" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" android:padding="10dp" android:layout_alignParentTop="true" android:layout_alignParentStart="true"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:text="@string/get_started" android:layout_marginTop="38dp" android:layout_below="@+id/linearLayout" android:layout_alignParentEnd="true"/> </RelativeLayout>
intro_slide3.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen3"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="@drawable/web"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide3_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc"/> </LinearLayout> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="60dp" android:text="@string/slide3_title" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" android:gravity="center"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:text="@string/get_started" android:layout_marginTop="38dp" android:layout_below="@+id/linearLayout" android:layout_alignParentEnd="true"/> </RelativeLayout>
intro_slide4.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen4"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="@drawable/tutorialwing" android:tint="#f0f0f0"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide4_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc"/> </LinearLayout> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginTop="60dp" android:padding="10dp" android:text="@string/slide4_title" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/linearLayout" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:layout_marginTop="38dp" android:text="@string/check_it_out"/> </RelativeLayout>
6. Creating WelcomeActivity to show Intro slides
Now, we will create an activity to show intro slides
Create layout for welcome activity
Go to res => layout folder and create activity_welcome.xml file. Add the below code into it. This file will be used as the layout for Welcome Activity.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:showIn="@layout/activity_welcome"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/layoutDots" android:layout_width="match_parent" android:layout_height="@dimen/dots_height" android:layout_alignParentBottom="true" android:layout_marginBottom="@dimen/dots_margin_bottom" android:gravity="center" android:orientation="horizontal"> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_above="@id/layoutDots" android:alpha=".5" android:background="@android:color/white"/> <Button android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@null" android:text="@string/next" android:textColor="@android:color/white"/> <Button android:id="@+id/btn_got_it" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@null" android:text="@string/got_it" android:textColor="@android:color/white" android:visibility="gone"/> <Button android:id="@+id/btn_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:background="@null" android:text="@string/skip" android:textColor="@android:color/white"/> </RelativeLayout>
Create java file for Welcome Activity
Go to src => main => java => com.tutorialwing.introslidertutorial package and create WelcomeActivity.java file into it. Add the code given below into it.
package com.tutorialwing.introslidertutorial;
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class WelcomeActivity extends AppCompatActivity implements View.OnClickListener {
private ViewPager viewPager;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts = new int[]{R.layout.intro_slide1, R.layout.intro_slide2, R.layout.intro_slide3, R.layout.intro_slide4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Checking for first time launch - before calling setContentView()
if (!Globals.shouldShowSlider()) {
launchHomeScreen();
finish();
}
// Making notification bar transparent
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
if (window != null) {
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
setContentView(R.layout.activity_welcome);
viewPager = (ViewPager) findViewById(R.id.view_pager);
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
setBtnClickListener(R.id.btn_got_it);
setBtnClickListener(R.id.btn_next);
setBtnClickListener(R.id.btn_skip);
// adding bottom dots
addBottomDots();
// By default, select dot in the first position
updateBottomDots(0, 0);
viewPager.setAdapter(new MyViewPagerAdapter());
viewPager.addOnPageChangeListener(pageChangeListener);
}
private void setBtnClickListener(int id) {
Button button = (Button) findViewById(id);
if (button != null) {
button.setOnClickListener(this);
}
}
private void showHideView(int id, int visibility) {
View view = findViewById(id);
if (view != null) {
view.setVisibility(visibility);
}
}
private void launchHomeScreen() {
Globals.saveFirstTimeLaunch(false);
startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
finish();
}
private void addBottomDots() {
if ((dotsLayout == null) || (layouts == null))
return;
int dotSize = layouts.length;
dotsLayout.removeAllViews();
dots = new TextView[dotSize];
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dotsLayout.addView(dots[i]);
}
}
private void updateBottomDots(int prevPosition, int curPosition) {
if (dots == null)
return;
int dotLength = dots.length;
if ((dotLength > prevPosition) && (dotLength > curPosition)) {
dots[prevPosition].setTextColor(getResources().getColor(R.color.dot_inactive));
dots[curPosition].setTextColor(getResources().getColor(R.color.dot_active));
}
}
ViewPager.OnPageChangeListener pageChangeListener = new ViewPager.OnPageChangeListener() {
int prevPos = 0;
@Override
public void onPageSelected(int position) {
updateBottomDots(prevPos, position);
boolean isLastPage = (position == (layouts.length - 1));
showHideView(R.id.btn_next, isLastPage ? View.GONE : View.VISIBLE);
showHideView(R.id.btn_skip, isLastPage ? View.GONE : View.VISIBLE);
showHideView(R.id.btn_got_it, isLastPage ? View.VISIBLE : View.GONE);
prevPos = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_skip:
case R.id.btn_got_it:
launchHomeScreen();
break;
case R.id.btn_next:
showNextSlide();
break;
}
}
private void showNextSlide() {
// Checking for last page
// If last page home screen will be launched
int nextIndex = viewPager.getCurrentItem() + 1;
if ((viewPager != null) && (nextIndex < layouts.length)) {
viewPager.setCurrentItem(nextIndex);
}
}
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
public MyViewPagerAdapter() {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = layoutInflater.inflate(layouts[position], container, false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return (layouts != null) ? layouts.length : 0;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return (view == obj);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
}
This file contains view pager code that is responsible for swipeable view. Also, it creates the dots to be shown for each slide.
7. Creating Home Page of the Application
We will design our homepage. If any user visits this page for the first time, we would mark him that he has successfully visited application for the first time. After that, we won’t show them intro slider.
Also, Go to res => layout => activity_main.xml file and add below code into it.
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.tutorialwing.introslidertutorial.MainActivity"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:gravity="center" android:text="@string/welcome" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>
Finally, Go to MainActivity.java file into it. Add the code given below into it.
package com.tutorialwing.introslidertutorial;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
That’s it…
Output
Now, run the application. You will get the output as shown above. If you get any error, you can download the source code from the link given above.
Conclusion
Show intro slider in any application to share the major features available into that application. Decide carefully about the feature you are going to show into the slider. We should show intro slider when user visits application for the first time.
GREAT TUTORIAL!! Only this tut solve my problem!
THANK YOU
Thank you… 🙂 please do not forget to share a word about this website among your friends… 🙂
This is one of the best introductions to slider i have ever encountered.