Create an Intro Slider Screen in Your Android App That Attract New Audience

0
Shares
Create an Intro Slider Screen in Your Android App That Attract New Audience
4.5 (90%) 4 votes

Create Intro Slider Screen in Your Android App

Creating a welcome slider screen in your native Android app is one of the great ways to present the most important and major features of your app.

And this is where, you can convince your new comers to become permanent users. Therefore, in this Android tutorial, we’re going to share how to create an intro slider screen where your new users can swipe through them before they get into your app.

Also, to demonstrate, we’ll create a sample app with couple of intro slides with a next and skip buttons.

Let’s Get Started

Create a new project in Android Studio.

Next set the Welcome screen color.

preference_color_1preference_color_2preference_color_3

<!-- Screens background color-->
<color name="bg_screen1">#f64c74</color>
<color name="bg_screen2">#20d2cc</color>
<color name="bg_screen3">#4495ff</color>
<!-- dots inactive colors -->
<color name="pager_dark_screen1">#d1395c</color>
<color name="pager_dark_screen2">#14a895</color>
<color name="pager_dark_screen3">#3378d4</color>
<!-- dots active colors -->
<color name="pager_light_screen1">#f98da5</color>
<color name="pager_light_screen2">#8cf9eb</color>
<color name="pager_light_screen3">#93c6fd</color>
<array name="array_pager_active">
<item>@color/pager_light_screen1</item>
<item>@color/pager_light_screen2</item>
<item>@color/pager_light_screen3</item>
</array>
<array name="array_pager_inactive">
<item>@color/pager_dark_screen1</item>
<item>@color/pager_dark_screen2</item>
<item>@color/pager_dark_screen3</item>
</array>

//Static Dimention in Application
open dimens.xml and add following.

<!-- Dimens of View -->
<dimen name="dots_height">30dp</dimen>
<dimen name="dots_margin_bottom">20dp</dimen>
<dimen name="img_width_height">120dp</dimen>
<dimen name="desc_padding">40dp</dimen>
<!--Textsize -->
<dimen name="slide_title">30sp</dimen>
<dimen name="slide_desc">16sp</dimen>

//Static Strings

Next, open string.xml and add following

<string name="title_activity_welcome">Home Screen</string>
<string name="next">NEXT</string>
<string name="skip">SKIP</string>
<string name="start">Start Now</string>
<string name="slide_1_title">Just Here!</string>
<string name="slide_1_desc">The easiest way to keep in touch with your Friends!</string>
<string name="slide_2_title">Lots of Sticker</string>
<string name="slide_2_desc">Sticker is best way then long text!</string>
<string name="slide_3_title">Group Discussion</string>
<string name="slide_3_desc">Make group of best buddies and have fun!</string>
<string name="home_title">Welcome to Application</string>
<string name="home_desc">make friends and have fun.</string>

Open style.xml and set style to application

<style name="AppTheme.NoActionBar">
<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" />
<!-- 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>

Start Code Integration

  • prefs.java
//To set flags in preference

public class Prefs {
SharedPreferences pref;
SharedPreferences.Editor editor;
Context _context;

//mode
int PRIVATE_MODE = 0;

// file name
private static final String PREF_NAME = "spaceo-demo";
private static final String IS_FIRST_TIME = "IsFirstTime";

public Prefs(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, isFirstTime);
editor.commit();
}

public boolean isFirstTimeLaunch() {
return pref.getBoolean(IS_FIRST_TIME, true);
}

}
  • Application.java//To get data at application level1) Add class
    public class Application extends android.app.Application {
    private Prefs prefs;
    private static Application app;
    @Override
    public void onCreate() {
    super.onCreate();
    app = this;
    prefs = new Prefs(this);
    }
    public static Application getApp() {
    return app;
    }
    public Prefs getPrefs() {
    return prefs;
    }
    public void setPrefs(Prefs prefs) {
    this.prefs = prefs;
    }
    }
    

    2) set in manifest file

    <application
    android:name=".Application">
    

    Creating Welcome Screens

    • welcome_screen1.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">
    <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_screen2.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">
    <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_screen3.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">
    <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>
    

    activity_main.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">
    <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>
    

    MainActivity.java

    /*Deal with
    *check preference value
    * handle pager event by OnPageChangeListener
    */
    public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;
    private Prefs prefs;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Checking for first time launch - before calling setContentView()
    prefs = Application.getApp().getPrefs();
    if (!prefs.isFirstTimeLaunch()) {
    launchHomeScreen();
    finish();
    }
    // Making notification bar transparent
    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_main);
    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 of all welcome sliders
    // add few more layouts if you want
    layouts = new int[]{
    R.layout.welcome_screen1,
    R.layout.welcome_screen2,
    R.layout.welcome_screen3};
    // adding bottom dots
    addBottomDots(0);
    // making notification bar transparent
    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) {
    // checking for last page
    // if last page home screen will be launched
    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_pager_active);
    int[] colorsInactive = getResources().getIntArray(R.array.array_pager_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() {
    prefs.setFirstTimeLaunch(false);
    startActivity(new Intent(MainActivity.this, HomeActivity.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) {
    }
    };
    /**
    * Making notification bar transparent
    */
    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);
    }
    }
    /**
    * View pager adapter
    */
    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);
    }
    }
    }
    

    HomeActivity.java

    public class HomeActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
    }
    }
    

    Activity_home.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/pager_dark_screen1">
    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/home_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/home_desc"
    android:textAlignment="center"
    android:textColor="@android:color/white"
    android:textSize="@dimen/slide_desc" />
    </LinearLayout>
    </RelativeLayout>
    

    AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.welcomescreen">
    <application
    android:name=".Application"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:theme="@style/AppTheme.NoActionBar">
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    </activity>
    <activity android:name=".HomeActivity"></activity>
    </application>
    </manifest>
    

    Done! Run the app and browse through your awesome intro sliders.

    device-2016-10-25-121826

    device-2016-10-25-122136

    device-2016-10-25-122148

     

    If you face any problem, contact our Android developers for help.

    And in case you want to implement this feature in your startup app project, you can hire Android app developer from us.

    We’ve already implemented this feature dozens of times in our clients’ projects. You should check out our Android portfolio. Another perk of hiring us is, not only you’ll have this new feature implemented in your app, but we’ll also plan and recommend strategies for intro slider screens in your native Android app.

    Grab a free copy of intro slider screen demo from Github.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!