Thursday, April 24, 2014

Example of ViewPager with custom PagerAdapter

This example show how to implement ViewPager with custom PagerAdapter. (Another example(s) implement ViewPager with FragmentPagerAdapter, read HERE)


Modify activity_main.xml to include android.support.v4.view.ViewPager in layout.
<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.androidviewpagerapp.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    
    <android.support.v4.view.ViewPager
        android:id="@+id/myviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
</LinearLayout>

MainActivity.java
package com.example.androidviewpagerapp;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;

public class MainActivity extends Activity {

 ViewPager viewPager;
 MyPagerAdapter myPagerAdapter;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  viewPager = (ViewPager)findViewById(R.id.myviewpager);
  myPagerAdapter = new MyPagerAdapter();
  viewPager.setAdapter(myPagerAdapter);

 }
 
 private class MyPagerAdapter extends PagerAdapter{
  
  int NumberOfPages = 5;
  
  int[] res = { 
   android.R.drawable.ic_dialog_alert,
   android.R.drawable.ic_menu_camera,
   android.R.drawable.ic_menu_compass,
   android.R.drawable.ic_menu_directions,
   android.R.drawable.ic_menu_gallery};
  int[] backgroundcolor = { 
   0xFF101010,
   0xFF202020,
   0xFF303030,
   0xFF404040,
   0xFF505050};

  @Override
  public int getCount() {
   return NumberOfPages;
  }

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

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   
      
      TextView textView = new TextView(MainActivity.this);
      textView.setTextColor(Color.WHITE);
      textView.setTextSize(30);
      textView.setTypeface(Typeface.DEFAULT_BOLD);
      textView.setText(String.valueOf(position));
      
      ImageView imageView = new ImageView(MainActivity.this);
      imageView.setImageResource(res[position]);
      LayoutParams imageParams = new LayoutParams(
        LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
      imageView.setLayoutParams(imageParams);
      
      LinearLayout layout = new LinearLayout(MainActivity.this);
      layout.setOrientation(LinearLayout.VERTICAL);
      LayoutParams layoutParams = new LayoutParams(
        LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
      layout.setBackgroundColor(backgroundcolor[position]);
      layout.setLayoutParams(layoutParams);
      layout.addView(textView);
      layout.addView(imageView);
      
      final int page = position;
      layout.setOnClickListener(new OnClickListener(){

    @Override
    public void onClick(View v) {
     Toast.makeText(MainActivity.this, 
      "Page " + page + " clicked", 
      Toast.LENGTH_LONG).show();
    }});
      
      container.addView(layout);
      return layout;
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((LinearLayout)object);
  }

 }

}


download filesDownload the files.

Next:
Implement PagerTitleStrip on ViewPager
Implement OnPageChangeListener for ViewPager to monitor the current visible page

15 comments:

avanceittrends said...

Thanks for sharing this article.

Anonymous said...

how can I do it using tabs?

Anonymous said...

Thanks

яαנ ιzz αℓωαzzz яιgнт said...

Thanks for your post.Its really helpful:). Will u please tell me how to swipe between two activities.1224

Erik said...

hello яαנ ιzz αℓωαzzz яιgнт,

please check HERE.

Unknown said...

Nice article!! Is it possible to set layout in your adapter class via XML?

sagar said...

Hello, this one is nyc article about how to use ViewPager. But I want to play multiple audio files depends on which position right now displayed on screen. Like: First time play song from int sounds[] from 1st position, then slide change audio from 2nd position, and so on.. I implemented my code as per I searched on other resources but when I open app, first time play sound from 1st and 2nd position both together. Then work completely from 3rd, 4th, 5th one by one. And also when I slide back, sound's position decrease by 2 from current position, That's why 1st position's sound will be null. Can you help for this stuff? I stuck on that.
Thank you in advance.

Erik said...

Hello Sagar Tahelyani,

One approach is to implement OnPageChangeListener for the ViewPager. Please read Implement OnPageChangeListener for ViewPager to monitor the current visible page.

sagar said...

Yes that's the only way to do that. Thanks. I implemented this stuff and it works. Thanks a lot.

Akash said...

Nice But Can u Tell me how to pass image from viewpager to another activity

i try but i can't do so please help

Anonymous said...

Very Helpful. I really need this.

Unknown said...

How will we detect whether it is swiped left or right ?

Erik said...

hello SANJEEV REDDY,

I think you can Implement OnPageChangeListener for ViewPager to monitor the current visible page to detect it.

sartaz ali said...

dear i am using spinner and how to access the name and value to the sqlite in spinner,and how to show selected item in bottom side add plz provide the code ,if u can?

Unknown said...

Thank you very much.... Simple