View pager with fragments and indicator

Question

I am developing an application in which I implemented ViewPager, I want the user to navigate and get the next screen. I implement fragments. all is well, but I want one more thing. I want to indicate which screen is currently active. like tabs. I searched through the Internet but did not find anything useful. If there is an idea to be considered. Thank you Here is my pager adapter and fragment activity and xml layout

import java.util.ArrayList; import java.util.List; import com.viewpagerindicator.TitlePageIndicator; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.widget.Toast; public class MainActivity extends FragmentActivity implements OnPageChangeListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); List<Fragment> list = new ArrayList<Fragment>(); list.add(MyFragment.newInstance("fragment 1")); list.add(MyFragment.newInstance("fragment 2")); list.add(MyFragment.newInstance("fragment 3")); MyPagerAdapter a = new MyPagerAdapter(getSupportFragmentManager(), list); ViewPager pager = (ViewPager) findViewById(R.id.viewpager); pager.setAdapter(a); } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub } } 

adapter.java

 package com.example.fragments; import java.util.List; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.PagerAdapter; import android.view.View; public class MyPagerAdapter extends FragmentPagerAdapter { List<Fragment> fragments; public MyPagerAdapter(FragmentManager fm,List<Fragment> f) { super(fm); this.fragments = f; } @Override public Fragment getItem(int arg0) { return fragments.get(arg0); } @Override public int getCount() { // TODO Auto-generated method stub return fragments.size(); } } 

main.xml

 <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.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_below="@+id/titles" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </RelativeLayout> 

Answer 1

for this, I created a class to create a page indicator

 public class DotsScrollBar { LinearLayout main_image_holder; public static void createDotScrollBar(Context context, LinearLayout main_holder,int selectedPage,int count) { for(int i=0;i<count;i++) { ImageView dot = null; dot= new ImageView(context); LinearLayout.LayoutParams vp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); dot.setLayoutParams(vp); if(i==selectedPage) { try { dot.setImageResource(R.drawable.paging_h); } catch (Exception e) { Log.d("inside DotsScrollBar.java","could not locate identifier"); } }else { dot.setImageResource(R.drawable.paging_n); } main_holder.addView(dot); } main_holder.invalidate(); } } 

Now in your activity class, call the createDotScrollBar function, as shown below:

 public void updateIndicator(int currentPage) { dots_scrollbar_holder.removeAllViews(); DotsScrollBar.createDotScrollBar(this, mDotsScrollbarHolder, mCurrentPage, totalNumberOfPages); } 

and call the updateIndicator function inside onPageScrollStateChanged

like this:

  @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub switch (state) { case 0: updateIndicator(mCurrentPage); break; } 

hope this will be a trick.

Answer 2

Basically you have three options:

1. Use native android PagerTitleStrip

It is very simple to implement, just add it as a child to your ViewPager in xml and define gravity as TOP or BOTTOM, like this:

 <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.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent"> <android.support.v4.view.PagerTitleStrip android:id="@+id/pager_title_strip" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /> </android.support.v4.view.ViewPager> </RelativeLayout> 

But to be honest, this doesn’t look very good, and I can’t say anything about backward or forward compatibility. The above has been verified in API 17

2. Use a third-party library

How insanely good ViewPagerIndictor from Jake Wharton

3. Enter your code

As suggested in response from shruti . Even so, although I would recommend that you compile the code along with the example of Jake Wharton, it really is so amazing!

Answer 3

I created a library to satisfy the need for a page indicator in ViewPager. My library contains a View called DotIndicator. To use my library, add compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0' to the gradle assembly file.

You can add a view to the layout by adding the following:

  <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator android:layout_width="wrap_content" android:layout_height="wrap_content" app:numberOfDots=YOUR_INT_HERE app:selectedDotIndex=YOUR_INT_HERE/> 

The above code perfectly reproduces the functionality of the points on the Google Launcher home screen, however, if you want to further customize it, you can add the following attributes:

• app:unselectedDotDiameter and app:selectedDotDiameter to set point diameters
• app:unselectedDotColor and app:selectedDotColor to set dot colors
• app:spacingBetweenDots to change the distance between points
• app:dotTransitionDuration to set the time to animate changes from small to large (and vice versa)

In addition, a view can be created programmatically using:

 DotIndicator indicator = new DotIndicator(context); 

There are methods for changing properties similar to attributes. To refresh the indicator to display another page as selected, simply call the indicator.setSelectedItem(int, true) ViewPager.OnPageChangeListener.onPageSelected(int) from within ViewPager.OnPageChangeListener.onPageSelected(int) .

Here is a usage example:

If you're interested, the library was actually designed to create built-in screens like the one shown in the above file.

The Github source is available here: https://github.com/MatthewTamlin/SlidingIntroScreen