
what is Intro Slider in Android ?
Intro Slider is implement a welcome slider screen which is introduces the major features of the app. In this slider is introduction on the app. it can be given where the user can swipe through the sliders before launching the application.
Intro Slider is the first screen in an APP that is used to display the highlights of application during the first launch of the app.
Intro Slider is used to ViewPager Widget in android. it is multiple layout file to display introduction in you app. when you can use Splash screen it can when your app is launched to display some time in background process.
but Intro Slider is a does not background process and timing. it is user can swipe left to right or user can click to bottom button in next previous then it is changes of different different layout design and introduction in you app.
now in this layout file when you can last one is layout file show then click on finish layout to display your main activity screen.
intro slider mostly one time display show when you can first time install app to display intro slider or you can uninstall and then install to display intro slider but it can second time open app to does not display intro slider. many apps is follow this methods.
you can every time display intro slider when your app is launched.
Intro slider use view pager and then create pager adapter to display layout files. now you can one time intro show on your app so you can use shared preference stored value and then check value to one time is displayed or not.
Example of Intro Slider with ViewPager in Android And How to build Intro Slider in Android
Implement dependency in your app level build.gradle file.
1 |
implementation 'com.android.support:design:28.0.0' |
Create activity_main.xml File Follow this code.
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 |
<?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:context=".MainActivity"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/view_pager"/> <LinearLayout android:layout_width="match_parent" android:layout_height="30dp" android:id="@+id/dotLayout" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal" android:layout_marginBottom="20dp"/> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha=".5" android:layout_above="@id/dotLayout" android:background="@android:color/white" /> <TextView android:id="@+id/btn_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Start" android:textColor="#FFFFFF" android:textSize="20dp" android:background="@null" android:layout_marginLeft="10dp" android:layout_marginBottom="8dp" /> <TextView android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Next" android:textColor="#FFFFFF" android:textSize="20dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@null" android:layout_marginRight="10dp" android:layout_marginBottom="8dp" /> </RelativeLayout> |
Create res/drawable resource is active_dots.xml File.
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:height="8dp" android:width="8dp" /> <solid android:color="#fff" /> </shape> |
Create res/drawable resource is default_dots.xml File.
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:width="8dp" android:height="8dp" /> <solid android:color="#595959" /> </shape> |
Create first_slide.xml layout file follow this code.
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"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#746216"> <TextView android:id="@+id/tv_first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginTop="10dp" android:text="First Slider" android:textColor="#fff" android:textSize="18dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:textStyle="normal" /> </RelativeLayout> |
Create second_slide.xml layout file follow this code.
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"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#415b5e"> <TextView android:id="@+id/tv_first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:text="Second Slider" android:textColor="#fff" android:textSize="18dp" android:textStyle="normal" /> </RelativeLayout> |
Create third_slide.xml layout file follow this code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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="#8a5791"> <TextView android:id="@+id/tv_first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginTop="10dp" android:text="Third Slider" android:textColor="#fff" android:textSize="18dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:textStyle="normal" /> </RelativeLayout> |
Create MainActivity.java File Follow this Code.
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 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 |
package com.bhaumik; import android.content.Intent; import android.content.SharedPreferences; import android.os.Build; import android.support.v4.content.ContextCompat; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { ViewPager viewPager; int[] layouts = {R.layout.first_slide,R.layout.second_slide,R.layout.third_slide}; MyAdapter myAdapter; ImageView[] imageViews; TextView btn_skip,btn_next; SharedPreferences sharedPreferences; SharedPreferences.Editor editor; String check; LinearLayout linearLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getSupportActionBar().hide(); viewPager = findViewById(R.id.view_pager); btn_skip = findViewById(R.id.btn_skip); btn_next = findViewById(R.id.btn_next); linearLayout = findViewById(R.id.dotLayout); sharedPreferences = getSharedPreferences("Demo",MODE_PRIVATE); boolean status = false; check = sharedPreferences.getString("CHECK",""); /*if (checkStatus()){ SkipActivity(); }*/ if (Build.VERSION.SDK_INT >= 19){ getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); }else{ getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } myAdapter = new MyAdapter(layouts,MainActivity.this); viewPager.setAdapter(myAdapter); CreateDots(0); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { CreateDots(position); if (position == layouts.length-1){ btn_next.setText("Start"); btn_skip.setVisibility(View.INVISIBLE); }else{ btn_next.setText("Next"); btn_skip.setVisibility(View.VISIBLE); } } @Override public void onPageScrollStateChanged(int state) { } }); btn_skip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { editor = sharedPreferences.edit(); editor.putString("CHECK","true"); editor.commit(); SkipActivity(); } }); btn_next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int next = viewPager.getCurrentItem() + 1; if (next<layouts.length){ viewPager.setCurrentItem(next); }else{ SkipActivity(); editor = sharedPreferences.edit(); editor.putString("CHECK","true"); editor.commit(); } } }); } private void SkipActivity() { startActivity(new Intent(MainActivity.this,WelcomeActivity.class)); finish(); } public void CreateDots(int position){ if (linearLayout != null){ linearLayout.removeAllViews(); } imageViews = new ImageView[layouts.length]; for (int i=0; i<layouts.length; i++){ imageViews[i] = new ImageView(this); if (i == position){ imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.active_dots)); }else{ imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.default_dots)); } LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(5,0,5,0); linearLayout.addView(imageViews[i],params); } } public boolean checkStatus(){ boolean status = false; if (sharedPreferences.getString("CHECK","null").equals("null")){ status = false; }else{ status = true; } return status; } } |
Create MyAdapter.java File Follow this Code.
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 |
package statusdownloader.bhaumik.com.viewpagerintro; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MyAdapter extends PagerAdapter{ int[] layouts; LayoutInflater inflater; Context context; public MyAdapter(int[] layouts, Context context) { this.layouts = layouts; this.context = context; inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public int getCount() { return layouts.length; } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = inflater.inflate(layouts[position],container,false); container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { View view = (View) object; container.removeView(view); } } |
In this Example of create intro slider using view pager. view pager is used to pager adapter in adapter class. and create three layout xml file and design the file and in this layout file to store int array of MainActivity class.and create drawable resource in active_dots and default_dots file. In this file use to user can swipe left to right then change position wise dot.
Now in this example used to view pager listener and then send data to adapter and display adapter. you can swipe left to right then change screen layout file and then final layout file to click start button then display welcome activity screen open.