Android AppIntro Slider Example

March 12, 2018 , 1 Comments

Displaying application intro/introduction slider or welcome screen in your android app is the best way of sowing major features of the app to the users at very first time. Only creating new android app is not difficult but how many users installed your app and among them how many users are active current is the most important thing. For that you have to focus on user experience and make app easy to use. App intro slider is one of the best way to show app features and ways to used them to the users.

Previously I have already wrote a tutorial about Splash Screen where you can display a single screen with short message like Welcome to Our App or some progressing activities. In this tutorial you will learn to display application intro screen with sliding function only for the first time. In the app intro slider, you can add as many screen as you like to show. And this is only display only first time to the user when they open app/game.

Creating New Android Project


Let’s start making AppIntro Slider by creating a new project. Create a new project called Android App Introduction Slider using android studio or eclipse with empty activity.
Android AppIntro Slider Example



Adding Dependencies to your Bundle.gradle File


Open your app build.gradle file and add compile 'com.github.paolorotolo:appintro:4.1.0' dependency. Build.gradle will looks like this.
App build.gradle




 And in your project build.gradle file you need to add mavenCentral() inside repositories.
Project build.gradle file:














package com.androidappintroslider;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class AppIntroSampleSlider extends Fragment {
//Layout id
private static final String ARG_LAYOUT_RES_ID = "layoutResId";

public static AppIntroSampleSlider newInstance(int layoutResId) {
AppIntroSampleSlider sampleSlide = new AppIntroSampleSlider();

Bundle bundleArgs = new Bundle();
bundleArgs.putInt(ARG_LAYOUT_RES_ID, layoutResId);
sampleSlide.setArguments(bundleArgs);

return sampleSlide;
}

private int layoutResId;

public AppIntroSampleSlider() {}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

if(getArguments() != null && getArguments().containsKey(ARG_LAYOUT_RES_ID))
layoutResId = getArguments().getInt(ARG_LAYOUT_RES_ID);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(layoutResId, container, false);
}

}



Create AppIntro Sample Slider Class


Create a new class called AppIntroSampleSlider.java and extends Fragment. Following is the java code of AppIntroSampleSlider.java file you can directly copy and paste in your project.

src/AppIntroSampleSlider.java






//Android App Intro Slider
  package com.androidappintroslider;
   
  import android.os.Bundle;
  import android.support.annotation.Nullable;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
   
  /**
  * Created by DroidQuery on 10/23/2016.
  */
  public class AppIntroSampleSlider extends Fragment {
  //Layout id
  private static final String ARG_LAYOUT_RES_ID = "layoutResId";
   
  public static AppIntroSampleSlider newInstance(int layoutResId) {
  AppIntroSampleSlider sampleSlide = new AppIntroSampleSlider();
   
  Bundle bundleArgs = new Bundle();
  bundleArgs.putInt(ARG_LAYOUT_RES_ID, layoutResId);
  sampleSlide.setArguments(bundleArgs);
   
  return sampleSlide;
  }
   
  private int layoutResId;
   
  public AppIntroSampleSlider() {}
   
  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
   
  if(getArguments() != null && getArguments().containsKey(ARG_LAYOUT_RES_ID))
  layoutResId = getArguments().getInt(ARG_LAYOUT_RES_ID);
  }
   
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  return inflater.inflate(layoutResId, container, false);
  }
   
  }







Create XML Layout for App Intro Slider


Create three new xml layout files under res/layout folder and make app intro slider screens. Here I have added three screens in app intro and layout name are app_intro1.xml, app_intro2.xml and app_intro3.xml. If you want to show more screen in slider you can add according to your needs. Following are the three XML layout file for app info slider.
res/layout/app_intro1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="10"
android:background="#0385a3"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="29dp"
android:text="Welcome to AppIntro"
android:textColor="#ffffff"
android:textSize="27sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:gravity="center"
android:orientation="vertical">

//image link from drawable folder

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:src="@drawable/intro1" />
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:text="Amazing android app with cool features."
android:textColor="#ffffff"
android:textSize="16sp" />

<TextView
android:layout_width="fill_parent"
android:layout_height="62dp" />
</LinearLayout>


res/layout/app_intro2.xm


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="10"
android:background="#03a373"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="29dp"
android:text="Amazing Features"
android:textColor="#ffffff"
android:textSize="27sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:src="@drawable/intro2" />
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:text="50+ amazing features and it's 100% free to use."
android:textColor="#ffffff"
android:textSize="16sp" />

<TextView
android:layout_width="fill_parent"
android:layout_height="62dp" />
</LinearLayout>

res/layout/app_intro3.xml






<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="10"
android:background="#b704c4"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="29dp"
android:text="All in One App"
android:textColor="#ffffff"
android:textSize="27sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="16dp"
android:tint="#c1e6f5"
android:paddingRight="16dp"
android:src="@drawable/intro3" />
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:text="More than 50 features in one application."
android:textColor="#ffffff"
android:textSize="16sp" />

<TextView
android:layout_width="fill_parent"
android:layout_height="62dp" />
</LinearLayout>







In above XML layout file I have added different layouts and views and three different images one in each file. Remember to change these images with your own.

Create New Custom Activity Class


Create a new java file called MyIntro.java and extends AppIntro. In this file you can control lots more things like animation type, show and hide Skip and status bar, vibration and lots more. Following is the complete content of MyIntro.java file.

src/MyIntro.java






package com.androidappintroslider;

import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;

import com.github.paolorotolo.appintro.AppIntro;

/**
* Created by Droidquery on 10/23/2016.
*/
public class MyIntro extends AppIntro {
// Please DO NOT override onCreate. Use init
@Override
public void init(Bundle savedInstanceState) {

//adding the three slides for introduction app you can ad as many you needed
addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro1));
addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro2));
addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro3));

// Show and Hide Skip and Done buttons
showStatusBar(false);
showSkipButton(false);

// Turn vibration on and set intensity
// You will need to add VIBRATE permission in Manifest file
setVibrate(true);
setVibrateIntensity(30);

//Add animation to the intro slider
setDepthAnimation();
}

@Override
public void onSkipPressed() {
// Do something here when users click or tap on Skip button.
Toast.makeText(getApplicationContext(),
getString(R.string.app_intro_skip), Toast.LENGTH_SHORT).show();
Intent i = new Intent(getApplicationContext(), MainActivity.class);
startActivity(i);
}

@Override
public void onNextPressed() {
// Do something here when users click or tap on Next button.
}

@Override
public void onDonePressed() {
// Do something here when users click or tap tap on Done button.
finish();
}

@Override
public void onSlideChanged() {
// Do something here when slide is changed
}
}








If you want to change the animation type you can replace setDepthAnimation(); with setFadeAnimation(); or setZoomAnimation(); or setFlowAnimation(); or setSlideOverAnimation(); or setDepthAnimation(); or setCustomTransformer(yourCustomTransformer);

Update your MainActivity.java File


In this file you need to check first run time. Following is the complete content of MainActivity.java file.

src/ MainActivity.java






package com.androidappintroslider;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

public boolean isFirstStart;
Context mcontext;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Thread t = new Thread(new Runnable() {
@Override
public void run() {
// Intro App Initialize SharedPreferences
SharedPreferences getSharedPreferences = PreferenceManager
.getDefaultSharedPreferences(getBaseContext());

// Create a new boolean and preference and set it to true
isFirstStart = getSharedPreferences.getBoolean("firstStart", true);

// Check either activity or app is open very first time or not and do action
if (isFirstStart) {

// Launch application introduction screen
Intent i = new Intent(MainActivity.this, MyIntro.class);
startActivity(i);
SharedPreferences.Editor e = getSharedPreferences.edit();
e.putBoolean("firstStart", false);
e.apply();
}
}
});
t.start();

}
}








And default content of activity_main.xml file looks like this.
res/layout/activity_main.xml






<?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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.androidappintroslider.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!nAdd Introduction about app at first when user open very first time. Describing app features and how to use app and so on." />

</RelativeLayout>







Update Styles.xml File


Open your app res/values/styles.xml file and add full screen theme like below.
res/values/styles.xml






<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>


</style>

<!-- Fullscreen application theme. -->
<style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>

</resources>








And don’t forget to change this in AndroidManifest.xml file. Android manifest file will looks like this.
AndroidManifest.xml






<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.androidappintroslider">

<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">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MyIntro"
android:theme="@style/FullscreenTheme" />
</application>

</manifest>





Colors.xml and Strings.xml File



Change the color value of colorPrimary, colorPrimaryDark, and colorAccent in res/values/colors.xml. Also add strings in res/values/strings.xml file. Colors.xml and strings.xml files will looks like below.

res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#0698bc</color>
<color name="colorPrimaryDark">#067d9b</color>
<color name="colorAccent">#FF4081</color>
</resources>



res/values/strings.xml








<resources>
<string name="app_name">AppIntro Slider</string>
<string name="app_intro_skip">Skip</string>
</resources>







Now run your application which is looks like above screenshots. AppIntro slider is only visible for first time if you want to check once more you need to clear data from application info (settings/applications/application manager /choose appintro slider and click Clear Data button).

Contributer

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

1 comments:

Popular Posts