Android How to Build Intro Slider for your App
Intro screens in your app is a great way of showcasing the major features of the app. Previously I explained about adding a static splash screen to your app.in this article I am sharing how to create an intro slider to your app where a user can swipe through few slides before getting into an app.
Step 1: First one to Start Android Studio
Step 2 : Seconds step to Create a New Project Project ClickOn ==> File ==> NEW ==> New Project
Step 3: Open XML located under res ⇒ values and add the below 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.
<?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">#20d2bb</color> <color name="bg_screen2">#3395ff</color> <color name="bg_screen3">#c873f4</color> <!-- dots inactive colors --> <color name="dot_dark_screen1">#14a895</color> <color name="dot_dark_screen2">#2278d4</color> <color name="dot_dark_screen3">#a854d4</color> <!-- dots active colors --> <color name="dot_light_screen1">#8cf9eb</color> <color name="dot_light_screen2">#93c6fd</color> <color name="dot_light_screen3">#e4b5fc</color> <array name="array_dot_active"> <item>@color/dot_light_screen1</item> <item>@color/dot_light_screen2</item> <item>@color/dot_light_screen3</item> </array> <array name="array_dot_inactive"> <item>@color/dot_dark_screen1</item> <item>@color/dot_dark_screen2</item> <item>@color/dot_dark_screen3</item> </array> </resources>
Step 4: Open XML located under res ⇒ values and add the below string values. Here I am mentioning a title and description for each slide.
<resources>
<string name="app_name">Capri4physios</string>
<string name="title_activity_welcome">Home Screen</string>
<string name="next">NEXT</string>
<string name="skip">SKIP</string>
<string name="start">GOT IT</string>
<string name="slide_1_title">Codeplayon.com solution </string>
<string name="slide_1_desc">We are share learn and explore new technolye </string>
<string name="slide_2_title">connect with us for new </string>
<string name="slide_2_desc">easy to learn and explore your expirence </string>
<string name="slide_3_title">Great Discounts</string>
<string name="slide_3_desc">Best discounts on every single service we offer!</string
<string name="play_again_desc">To see the welcome slider again, goto Settings -> apps -> welcome slider -> clear data</string>
<string name="play_again">Play Again</string>
<!-- TODO: Remove or change this placeholder text -->
<string name="hello_blank_fragment">Hello blank fragment</string>
</resources>
Step: 5. Open XML located under res ⇒ values and add the below values.
<resources> <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">120dp</dimen> <dimen name="slide_title">30dp</dimen> <dimen name="slide_desc">16dp</dimen> <dimen name="desc_padding">40dp</dimen> </resources>
intro slider should be shown only once when the app is launched for the very first time. If the user launches the app for the second time, he should directly go to the main screen. To achieve this, we use SharedPreferences to store a boolean value indicating the first time launch.
Step: 7. Create a class named java and do the below changes. isFirstTimeLaunch() returns true if the app is launched for the first time.
PrefManager.java
package com.codeplayon.introslider;
import android.content.Context;
import android.content.SharedPreferences;
public class PrefManager {
SharedPreferences pref;
SharedPreferences.Editor editor;
Context _context;
// shared pref mode
int PRIVATE_MODE = 0;
// Shared preferences file name
private static final String PREF_NAME = "codeplayon.com";
private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch";
public PrefManager(Context context) {
this._context = context;
pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
editor = pref.edit();
}
public void setFirstTimeLaunch(boolean isFirstTime) {
editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
editor.commit();
}
public boolean isFirstTimeLaunch() {
return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
}
}
Creating the Welcome Slides
Step: 8. So quickly create four XML layouts named XML, welcome_side2.xml,
welcome_side3.xml, and welcome_side4.xml under res ⇒ layouts.
welcome_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: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/ic_food" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_1_title" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" /> <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/slide_1_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc" /> </LinearLayout> </RelativeLayout>
welcome_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: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/ic_movie" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_2_title" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" /> <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/slide_2_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc" /> </LinearLayout> </RelativeLayout>
welcome_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: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/ic_discount" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_3_title" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" /> <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/slide_3_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc" /> </LinearLayout> </RelativeLayout>
Step: 9. Now create a new activity name java for the welcome slider. Right Click on package New ⇒ Activity ⇒ Empty Activity.
Step: 10. Open XML and modify the code as below. Here I am adding ViewPager for a slider, LinearLayout for bottom dots and two buttons for Skip and Next navigation.
activity_welcome.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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: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:alpha=".5" android:layout_above="@id/layoutDots" 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_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>
Step: 11. Open java and modify the code as below.
* Check for the first 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.
*An added click event listener to Skip and Next buttons. If the next button is clicked, the next slide will be shown. If the Skip button is clicked, the main activity will be launched directly.
WelcomeActivity.java
package com.codeplayon.introslider;
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 {
private ViewPager viewPager;
private MyViewPagerAdapter myViewPagerAdapter;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts;
private Button btnSkip, btnNext;
private PrefManager prefManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
prefManager = new PrefManager(this);
if (!prefManager.isFirstTimeLaunch()) {
launchHomeScreen();
finish();
}
if (Build.VERSION.SDK_INT >= 21) {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
setContentView(R.layout.activity_welcome);
viewPager = (ViewPager) findViewById(R.id.view_pager);
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
btnSkip = (Button) findViewById(R.id.btn_skip);
btnNext = (Button) findViewById(R.id.btn_next);
layouts = new int[]{
R.layout.welcome_slide1,
R.layout.welcome_slide2,
R.layout.welcome_slide3,};
addBottomDots(0);
changeStatusBarColor();
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
btnSkip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
launchHomeScreen();
}
});
btnNext.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int current = getItem(+1);
if (current < layouts.length) {
// move to next screen
viewPager.setCurrentItem(current);
} else {
launchHomeScreen();
}
}
});
}
private void addBottomDots(int currentPage) {
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
private int getItem(int i) {
return viewPager.getCurrentItem() + i;
}
private void launchHomeScreen() {
prefManager.setFirstTimeLaunch(false);
startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
finish();
}
// viewpager change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
// changing the next button text 'NEXT' / 'GOT IT'
if (position == layouts.length - 1) {
// last page. make button text to GOT IT
btnNext.setText(getString(R.string.start));
btnSkip.setVisibility(View.GONE);
} else {
// still pages are left
btnNext.setText(getString(R.string.next));
btnSkip.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
private void changeStatusBarColor() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
public MyViewPagerAdapter() {
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position], container, false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return layouts.length;
}
@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);
}
}
}
