Sliding Fragments using viewPager : android app development
This article deals with implementing one of the most widely used navigation patterns in android app development : sliding views, which is extremely beginner friendly . So, let’s get started!
We will use Android’s ViewPager to achieve this.
View Pager : ViewPager is a widget that allows the user to swipe left or right to see an entirely new screen. In a sense, it’s just a nicer way to show the user multiple tabs. It also has the ability to dynamically add and remove pages (or tabs) at anytime.
You may add the view pager to the main view ( Activity or Fragment ) and add more fragments to work with it.
Before Jumping into our java code, let us first set up our xml files and create some layouts.
Below is the code for some_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/background"
>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager_intro"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Then In the SomeActivty.java, We simply link the view pager widget using a simple findViewById method. We also initialize our view pager adapter and set it to the view pager.
public class SomeActivity extends AppCompatActivity {
ViewPager viewPager;
ViewPagerAdpter viewPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_explore);viewPagerAdapter = new ViewPagerAdpter(this,getSupportFragmentManager()); //view pager adapter
viewPager = findViewById(R.id.view_pager_intro);
viewPager.setAdapter(viewPagerAdapter);
}
}
ViewPagerAdapter.java
This adapter is nothing but a class derived from the base class FragmentPagerAdapter ( use ‘extends’ ).
We define a constructor which will take a FragmentManager object as a parameter .
The getItem method (takes currentPosition as the parameter ) will be called to instantiate the fragment for a given page. You may call this method in your views to change the current page explicitly by passing the respective position.
The getCount method will return the total number of pages which the adapter could show.
public class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = new FirstFragment();//create any fragment
break;
case 1:
fragment = new SecondFragment();//create any fragment
break; // you may add more cases for more fragments
}
assert fragment != null;
return fragment;
}
@Override
public int getCount() {
// Show total number of pages.
return TOTAL_PAGES;
}@Nullable
@Override
public CharSequence getPageTitle(int position) {
if (position == 0) {
return "Fragment1";
} else {
return "Fragment2";
}
}
}
and yep that’s it. Easy , isn’t it?
View Pager is also used for switching between tabs.
You may use the above code for the same , all you have to do is add TabLayout in the xml file and set the view pager to that TabLayout.
To do so,
- First add this dependency in the app-level gradle file :
implementation 'com.google.android.material:material:1.2.1'Note : You should add the latest version of this library . You may visit the official material page to get the same.
- Add the TabLayout widget to the layout
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
app:tabRippleColor="@android:color/transparent"
app:tabGravity="fill"
app:tabTextColor="#FFFFFF"
app:tabIndicatorColor="#FFFF"
app:tabSelectedTextColor="#FFFF"
app:tabMode="fixed"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/view_pager_intro"
app:layout_anchorGravity="bottom|center" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager_intro"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
app:layout_constraintBottom_toTopOf="@id/tabs"
app:layout_constraintEnd_toEndOf="parent"
android:paddingBottom="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />Then Set the viewPager to the tabLayout
tabLayout = findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
you may find the entire code at https://github.com/sanket099/slide_them_fragments
Thanks a lot for reading, if you have any queries feel free to comment below and follow this space for more content related to Android development and more.
Links for Reference and Reading
Official Documentation for ViewPager
