Use a Slide box (as in ionic framework) in Android Native App with ViewPager

Question

I need to integrate a slide box type functionality (used/seen in ionic framework app) in native android app for which I think I need to use a ViewPager with a page indicator. I have tried dimajia slider, but I don't think I have control on its auto slide functionality. I need user to slide randomly and get intimated that slide is moving ahead with the pageindicator at below. I need to integrate it in my splash screen for once, before logging in. Thanks in advance.

Answer 1

Try this code:

activity_introduction.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:context="com.yourpackage.IntroductionActivity">      <com.yourpackage.CustomViewPager         android:id="@+id/photos_viewpager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/bottom_relative" />      <RelativeLayout         android:id="@+id/bottom_relative"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:padding="@dimen/std_padding">          <android.support.design.widget.TabLayout             android:id="@+id/tab_layout"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerInParent="true"             app:tabBackground="@drawable/tab_selector"             app:tabGravity="center"             app:tabIndicatorHeight="0dp" />          <Button             android:id="@+id/next_button"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentEnd="true"             android:text="@string/next" />      </RelativeLayout>  </RelativeLayout> 

IntroductionActivity.java

public class IntroductionActivity extends AppCompatActivity {     private CustomViewPager viewPager;     private Button nextButton;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_introduction);         //Initializing the tablayout         TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);         //Adding the tabs using addTab() method         tabLayout.addTab(tabLayout.newTab());         tabLayout.addTab(tabLayout.newTab());         tabLayout.addTab(tabLayout.newTab());         //Initializing viewPager         viewPager = (CustomViewPager) findViewById(R.id.photos_viewpager);         viewPager.setPagingEnabled(false);         //Creating our pager adapter         IntroductionPagerAdapter introductionPagerAdapter = new IntroductionPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());         viewPager.setAdapter(introductionPagerAdapter);         tabLayout.setupWithViewPager(viewPager, true);         LinearLayout tabStrip = ((LinearLayout) tabLayout.getChildAt(0));         for (int i = 0; i < tabStrip.getChildCount(); i++) {             tabStrip.getChildAt(i).setOnTouchListener(new View.OnTouchListener() {                 @Override                 public boolean onTouch(View v, MotionEvent event) {                     return true;                 }             });         }         nextButton = (Button) findViewById(R.id.next_button);         final SharedPreferences sharedPreferences = getSharedPreferences("SHARED_PREFERENCES_PATH", Context.MODE_PRIVATE);         nextButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 if (viewPager.getCurrentItem() == 0) {                     viewPager.setCurrentItem(1);                     nextButton.setText(getResources().getString(R.string.i_agree));                 } else if (viewPager.getCurrentItem() == 1) {                     viewPager.setCurrentItem(2);                     nextButton.setText(getResources().getString(R.string.skip));                 } else if (viewPager.getCurrentItem() == 2) {                     SharedPreferences.Editor editor = sharedPreferences.edit();                     editor.putInt("KEY_INTRODUCTION_SKIPPED", 1);                     editor.apply();                     Intent intent = new Intent(IntroductionActivity.this, MainActivity.class);                     startActivity(intent);                     finish();                 }             }         });     }      @Override     public void onBackPressed() {         if (viewPager.getCurrentItem() == 0) {             finishAffinity();         } else if (viewPager.getCurrentItem() == 1) {             viewPager.setCurrentItem(0);             nextButton.setText(getResources().getString(R.string.next));         } else if (viewPager.getCurrentItem() == 2) {             viewPager.setCurrentItem(1);             nextButton.setText(getResources().getString(R.string.i_agree));         }     } } 

fragment_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"     android:layout_width="match_parent"     android:layout_height="match_parent">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_centerInParent="true"         android:gravity="center"         android:orientation="vertical">          <ImageView             android:id="@+id/imageView4"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             app:srcCompat="@mipmap/ic_logo_round" />          <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:padding="@dimen/fab_margin"             android:text="@string/welcome"             android:textAlignment="center"             android:textAppearance="?android:attr/textAppearanceLarge"             android:textColor="@color/colorWhite"             android:textSize="30sp"             android:textStyle="bold" />      </LinearLayout>  </RelativeLayout> 

WelcomeFragment.java

public class WelcomeFragment extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {         return inflater.inflate(R.layout.fragment_welcome, container, false);     } } 

Similarly create two more fragments.

IntroductionPagerAdaper.java

public class IntroductionPagerAdapter extends FragmentStatePagerAdapter {     //private variable     private int tabCount;      //Constructor to the class     public IntroductionPagerAdapter(FragmentManager fm, int tabCount) {         super(fm);         //Initializing tab count         this.tabCount = tabCount;     }      @Override     public Fragment getItem(int position) {         //Returning the current tabs         switch (position) {             case 0:                 return new WelcomeFragment();             case 1:                 return new DisclaimerFragment();             case 2:                 return new RegistrationFragment();             default:                 return null;         }     }      @Override     public int getCount() {         return tabCount;     } } 

CustomViewPager.java

public class CustomViewPager extends ViewPager {      private boolean isPagingEnabled = true;      public CustomViewPager(Context context) {         super(context);     }      public CustomViewPager(Context context, AttributeSet attrs) {         super(context, attrs);     }      @Override     public boolean onTouchEvent(MotionEvent event) {         return this.isPagingEnabled && super.onTouchEvent(event);     }      @Override     public boolean onInterceptTouchEvent(MotionEvent event) {         return this.isPagingEnabled && super.onInterceptTouchEvent(event);     }      public void setPagingEnabled(boolean b) {         this.isPagingEnabled = b;     } } 

Note: You can use default ViewPager unless you want to block its swipe.