left and right navigation to viewpager not working

Question

I am using view pager in my app,viewpager is working perfect but i want to add viewpagerindicator,following is my snippet code and xml of ui design can any one tell me what is issue?thanks in advance.............

 public class Test_Pager extends Activity{
private String strtd;
String[] imgStr;
ImageView imageView;
ArrayList<String> userImgArrayList;
String[] myURLs;
/*country list*/
JSONArray country_list=null;
private ServiceHandler sh;
private String jsonStr;
private JSONObject jsonObj;
private String user_img;
private String user_pro;
private static String PROFILE_VIEW_URL = "";
private static final String USER_IMG="product_images";
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.test_pagerss);
    userImgArrayList = getIntent().getStringArrayListExtra("user_images");
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
       ImageAdapter adapter = new ImageAdapter(this);
       viewPager.setAdapter(adapter);
      // TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.titles);
      // titleIndicator.setViewPager(viewPager);
       leftss=(ImageView)findViewById(R.id.lefticonsss);
       rightss=(ImageView)findViewById(R.id.righticonsss); 

     imageView = (ImageView) findViewById(R.id.full_image_view);
     PROFILE_VIEW_URL="";
    StrictMode.ThreadPolicy policy = new   StrictMode.ThreadPolicy.Builder().permitAll().build();
    StrictMode.setThreadPolicy(policy);
    sh = new ServiceHandler();

        // Making a request to url and getting response
        jsonStr = sh.makeServiceCall(PROFILE_VIEW_URL, ServiceHandler.GET);

        Log.d("Response: ", "> " + jsonStr);

     try {
         jsonObj = new JSONObject(jsonStr);


             /*proview_business = jsonObj.getString(PROFILE_VIEW_BUSINESS);
             proview_subcat = jsonObj.getString(PROFILE_VIEW_SUB_CATAGORY);
             proview_mainpro = jsonObj.getString(PROFILE_VIEW_MAINPRODUCTS);
             proview_expr = jsonObj.getString(PROFILE_VIEW_EXPERIENCE);
             proview_cmpname = jsonObj.getString(PROFILE_VIEW_COMPANYNAME);
             proview_website = jsonObj.getString(PROFILE_VIEW_WEBSITE);*/

            // user_img=jsonObj.getString(USER_IMG);



            user_img=jsonObj.getString(USER_IMG);
            user_img = "";
            userImgArrayList = new ArrayList<String>();//declare userImgArrayList globally like ArrayList<String> userImgArrayList;
            JSONArray picarray = jsonObj.getJSONArray(USER_IMG);
            for(int i=0;i< picarray.length();i++)
            {
                user_img = picarray.getString(i);
                userImgArrayList.add(user_img);
                Log.d("mylog", "curent  pro pic  = " + user_img);
            }


     } catch (JSONException e) {
         e.printStackTrace();
     }
leftss.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                viewPager.setCurrentItem(+1,true);
            }
        });
}
public class ImageAdapter extends PagerAdapter {
     Context context;
      ImageAdapter(Context context)
     {
     this.context=context;
     }
      @Override
      public int getCount() {
      return USER_IMG.length();
      }

      @Override
        public void destroyItem(View container, int position, Object object) {
             ((ViewPager) container).removeView((View) object);
        }
     @Override
     public boolean isViewFromObject(View view, Object object) {
     return view == ((ImageView) object);
     }

     @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(context);
            int padding = context.getResources().getDimensionPixelSize(
                    R.dimen.activity_horizontal_margin);
            imageView.setPadding(padding, padding, padding, padding);
            //imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            //Picasso.with(context).load(userImgArrayList.get(position)).into(imageView);
            Picasso.with(context).load(userImgArrayList.get(position)).resize(200, 200) .into(imageView);

            /*for(int i=0; i<myURLs.length;i++)
            { 

                try {
                    url = new URL(myURLs[i]);
                } catch (MalformedURLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }

                try {
                    bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                 imageView.setImageBitmap(bmp);
            }
            */
            // imageView.setImageURI(Uri.parse(imgStr[position]));
            ((ViewPager) container).addView(imageView, 0);
            return imageView;
        }
     }

  }

Myxml

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@android:color/black"
android:gravity="center_horizontal"
>



     <ImageView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"

   android:src="@drawable/arrow"
   android:rotation="180"
    android:id="@+id/lefticonsss"
    />


  <android.support.v4.view.ViewPager
  android:id="@+id/view_pager"
  android:layout_width="150dp"
  android:layout_height="150dp"

   />

    <ImageView android:id="@+id/full_image_view"
    android:layout_width="wrap_content"

    android:layout_height="wrap_content"/>


    <ImageView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/arrow"

    android:id="@+id/righticonsss"
    />



    </LinearLayout>

Martie

Post your xml view of this layout – Conception

I don't see any ViewPagerIndicator class in your xml. Please follow this sample to make it work. – Conception

why to add indicator?cant i change images of view pager,by simply click on left or right imageviews? – Martie

i want something like this,if user click on left imageview then image of view pager will change – Martie

That is a bad user experience imo. Why would you want a clicking event to change the image when you can just swipe the viewpager left or right? Nonetheless, you can achieve what you want by rearranging your xml layout and set onclick listener to the left/right imageviews. – Conception

i already set that..but image is not changing – Martie

Post your error log. I see viewPager.setCurrentItem(+1,true); is not a correct syntax. You should use incremental variable instead of +1. – Conception

there isno error in logcat,but image of view pager should change...see this link i am trying same layout #25157567 – Martie

Let us continue this discussion in chat. – Martie

Answer 1

I use this library https://github.com/astuetz/PagerSlidingTabStrip

Summary :

1.do this in your onCreate

// Initialize the ViewPager and set an adapter
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(pager);

2. (Optional) If you use an OnPageChangeListener with your ViewPager you should set it in the Widget rather than on the ViewPager directly.

   tabs.setOnPageChangeListener(mPageChangeListener);

Spilt

yes but I am simply swiping images..not activities..so will it works? – Martie

i edit my question and took imageview for left and right..can you check?..i vote up – Martie

Answer 2

Hello I see your update code you are trying to use the TitlePageIndicator. I assume that you did implement the com.jakewharton.android.viewpagerindicator.TitlePageIndicator

I have updated your code please see below the modified code.

In you PagerAdapter make sure your did override the getTitle(int position) method, you have to provide the correct data source to your page adapter. getTitle(int position) find the title text from given data source.

public class ImageAdapter extends PagerAdapter implements TitleProvider
{ 
    private final Context context;

    public ImageAdapter( Context context )
    { 
        this.context = context;
    } 


    @Override 
    public String getTitle( int position )
    { 
        return userImgArrayList.get(position);
    } 


    @Override 
    public int getCount() 
    { 
        return userImgArrayList.size();
    } 


    @Override 
    public Object instantiateItem( View pager, final int position )
    { 
          ImageView imageView = new ImageView(context);
          int padding = context.getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin);
          imageView.setPadding(padding, padding, padding, padding);
          Picasso.with(context).load(userImgArrayList.get(position)).resize(200, 200) .into(imageView);
          ((ViewPager) container).addView(imageView, 0);
          return imageView;
    } 


    @Override 
    public void destroyItem( View pager, int position, Object view )
    { 
        ( (ViewPager) pager ).removeView( (ListView) view );
    } 


    @Override 
    public boolean isViewFromObject( View view, Object object )
    { 
        return view == ((ImageView) object);
    } 

} 

Let me know if you any further query. thank you

Duodenum

Let me know what you want to display in your title page adapter. currently i see in your code your array list contain the image path. if you use that array list your page title will display with the image URL path. – Duodenum

still it says TitleProvider cannot be resolved to a type – Martie

Are you used jake-whartons-viewpageindicator then @Overide errors can be solved simply by doing the following: Right click Project > Properties Java Compilers > click 'Enable project specific settings' and set Compiler level to 1.6 Click 'Apply' – Duodenum

do i need to add any external jar?cuz i did not add any external jar yet – Martie

My concern is for TitlePageIndicator which library are you using can you just tell me? – Duodenum

i did not add any external library..i have just same android_support_v4 – Martie

can you tell i added two imageview – Martie

can you tell me why did you hide the title page adapter & put the two image view? what did you wish to achieve?. – Duodenum

i did not hide pager..i simply put two images,one is left of pager,and one is right of pager..so user will click on left image and right image to change the view of the pager images..getting my point? – Martie

then use the viewPager.setCurrentItem(int index), where index is the your position on click of left and right button. – Duodenum

index is your image view of array list index. you have to make sure that index should not grater than the size of your array list. – Duodenum

but how can i predict how many images will come? because i am getting images from server – Martie

i tried this way viewPager.setCurrentItem(userImgArrayList.indexOf(imageView));....but its not working – Martie

Answer 3

ViewPagerIndicator of Jake Wharton is a cusomized View which is no difference from other views. So you can use it just like any other Views. Of course, ViewPagerIndicator has some customized attributes of its own, like attrs. Take your snippet for example, I think you did well.
PS:Try this:

<LinearLayout 
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/lnr11"
android:orientation="vertical"
>
<com.viewpagerindicator.TitlePageIndicator
 android:id="@+id/titles"
  android:layout_height="30dp"
  android:layout_width="match_parent" />

  <android.support.v4.view.ViewPager
  android:id="@+id/view_pager"
  android:layout_width="150dp"
  android:layout_height="150dp"
   />

    <ImageView android:id="@+id/full_image_view"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_launcher"
    android:layout_height="wrap_content"/></LinearLayout>

Opal

Take a look again at what I re-edit, and show me some feedback. – Opal

Then I recommend you to re-check your ImageAdapter. – Opal

i edit my question and took imageview for left and right..can you check?..i vote up – Martie