Skip to main content

How to Create App Introduction Slider for Android Without Any Library

 In this Tutorial we will learn about how to create App Introduction Slider when the app launch very first time .App Introduction slider is basically use for show a brief information about your app or what's the properties of Application .For making this we do not use any third party library we use only ViewPager here .

So let's start with step by step process and make it possible into action.👇

Step 1: Create activity_welcome.xml in layout folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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 2: Create welcome_slide1.xml in layout folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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/yourlogo" />   
     <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>

Step 3: Create welcome_slide2.xml in layout folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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/image" />   
     <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>

Step 4: your color.xml file look like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>   
 <resources>   
   <color name="colorPrimary">#3F51B5</color>   
   <color name="colorPrimaryDark">#303F9F</color>   
   <color name="colorAccent">#FF4081</color>   
   <color name="bg_mainactivity">#d4e6e3</color>   
   <!-- Screens background color-->   
   <color name="bg_screen1">#16c266</color>   
   <color name="bg_screen2">#90c2bb</color>   
   <!-- dots inactive colors -->   
   <color name="dot_dark_screen1">#39d1ba</color>   
   <color name="dot_dark_screen2">#14a895</color>   
   <!-- dots active colors -->   
   <color name="dot_light_screen1">#8de7f9</color>   
   <color name="dot_light_screen2">#8cf9eb</color>   
   <array name="array_dot_active">   
     <item>@color/dot_light_screen1</item>   
     <item>@color/dot_light_screen2</item>   
   </array>   
   <array name="array_dot_inactive">   
     <item>@color/dot_dark_screen1</item>   
     <item>@color/dot_dark_screen2</item>   
   </array>   
 </resources>

Step 5: Your strings.xml file look like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<resources>   
   <string name="app_name">AppIntroSlider</string>   
   <string name="next">NEXT</string>   
   <string name="skip">SKIP</string>   
   <string name="start">GOT IT</string>   
   <string name="slide_1_title">Welcome to Droid Medium</string>   
   <string name="slide_1_desc">An Android Development Blog</string>   
   <string name="slide_2_title">Android</string>   
   <string name="slide_2_desc">Android is a Mobile Operating System developed by Google.</string>   
 </resources>

Step 6: Your dimens.xml look like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>   
 <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">120dp</dimen>   
   <dimen name="slide_title">30dp</dimen>   
   <dimen name="slide_desc">16dp</dimen>   
   <dimen name="desc_padding">40dp</dimen>   
 </resources>

Step7: Create PrefManager.java file  

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 package com.appintroslider;   
 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 = "welcome";   
   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);   
   }   
 }

Step 8: Create WelcomeActivity.java and put beow code inside it

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
package com.appintroslider;   
 import android.support.v4.view.ViewPager;   
 import android.support.v7.app.AppCompatActivity;   
 import android.os.Bundle;   
 import android.content.Context;   
 import android.content.Intent;   
 import android.graphics.Color;   
 import android.os.Build;   
 import android.support.v4.view.PagerAdapter;   
 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);   
     // Checking for first time launch - before calling setContentView()   
     prefManager = new PrefManager(this);   
     if (!prefManager.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_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 of welcome sliders   
     layouts = new int[]{   
         R.layout.welcome_slide1,   
         R.layout.welcome_slide2   
     };   
     // 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 true launch MainActivity   
         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) {   
     }   
   };   
   // 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);   
     }   
   }   
 }

Step 9: In MainActivity.java file add this code 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
package com.appintroslider;   
 import android.content.Intent;   
 import android.support.v7.app.AppCompatActivity;   
 import android.os.Bundle;   
 import android.view.View;   
 import android.widget.Toast;   
 public class MainActivity extends AppCompatActivity {   
   @Override   
   protected void onCreate(Bundle savedInstanceState) {   
     super.onCreate(savedInstanceState);   
     setContentView(R.layout.activity_main);   
     PrefManager prefManager = new PrefManager(getApplicationContext());   
     if(prefManager.isFirstTimeLaunch()){   
       prefManager.setFirstTimeLaunch(false);   
       startActivity(new Intent(MainActivity.this, WelcomeActivity.class));   
       finish();   
     }   
   }   
 }

Step 10: Don't forget to add WelcomeActivity and MainActivity in you Manifest File.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>   
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"   
   package="com.appintroslider">   
   <application   
     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"/>   
   </application>   
 </manifest>

Now you final app is ready you can test .

Thank you for you time .Please comment if you have any query regarding this tutorial.

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Download Apk file from Url and Install Programmatically

In this post we learn about download apk file from server or website and then install it Programmatically in Phone. Sometimes we have to download external apk file from server and then install if downloading successfully finished.For this we use AsyncTask class  for background process. So here is Code Snippet for this task.Lets Start :- Before this we have to add these Permissions in Manifest.xml file : <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> DownloadNewVersion.java class DownloadNewVersion extends AsyncTask<String,Integer,Boolean> { @Override protected void onPreExecute() { super.onPreExecute(); bar = new ProgressDialog(getActivity()); bar.setCancelable(false); bar.setMessage("Downl
4 comments
Read more

How to open pdf file url using webview in Android

 Sometimes we have requirement of showing pdf file in our Android Application. Although there are many third party gradle dependencies available online by which you can show your pdf file easily but one of the major drawback of using these libraries are they will increase you apk size .In some cases they will increase apk size upto ~14 MB. Alternatively you can access and show pdf file using assets and from storage options. This can take less size than any third party library. Here we use pdf using url and if you directly open your pdf file url in webview you will get no result because it will start downoad if you open this link in any web browser.  So in this article we will learn how we can open our pdf url using webview and without using any third party library. So lets Start step by Step:- Lets Suppose you have a pdf file url something like   http://yourwebsite.com/files/mydocumentfile.pdf Step 1: So we you this pdf file url to embed in our webview .First of all you have to host yo
Post a Comment
Read more

How to use UPI Deep Linking in Android

 In this Article we will discuss about the UPI Deep linking. By this Deep linking we can perform UPI Payments through intent .Basically it open the All UPI supported Application in our mobile then user choose their preference and initiate the Payment and through this we get the payment credentials like payment id ,transaction id ,etc. without any payment gateway. So lets start with what is UPI? Unified Payments Interface(UPI) is an instant real-time payment system developed by National Payments Corporation of India facilitating inter-bank transactions. The interface is regulated by the Reserve Bank of India and works by instantly transferring funds between two bank accounts on a mobile platform. (from Wikipedia) Coding part: package com.example.droidmedium; import android.content.Intent; import android.net.Uri; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Butt
1 comment
Read more