ViewPager Item of Recycler view in android

In my last article We learned how to Drag and Drop Item In RecyclerView. If you did not check Please see the above link that explained about the RecyclerView basic info.

Today We have learned about How to use View Pager inside the recyclerView to maintain the scrolling of view pager and recyclerView.  In this article I want to present set of image to scroll with help of ViewPager and scroll item of RecyclerView. This concepts used many apps to show their products. Please check my video that helps to understand the feature.



Lets start to create the android studio project to implements the same feature which is introduced in this video. In this project I used the GreenDao wrapper for local database. I will stored the some of image url into db and fetched at the time of show on recyclerview.

If you not aware about the Green Dao wrapper of sqlite Please check my last article that helps you to understand . Here is the link Green Dao fast ORM in android.

build.gradle app level

apply plugin: 'com.android.application'
apply plugin: 'com.neenbedankt.android-apt'
apply plugin: 'org.greenrobot.greendao'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.sunil.recyclerviewviewpager"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

greendao {
    targetGenDir 'src/main/java'
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.0'
    testCompile 'junit:junit:4.12'

    compile 'com.android.support:recyclerview-v7:25.0.0'
    compile 'com.android.support:cardview-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'

    compile 'com.jakewharton:butterknife:8.4.0'
    apt 'com.jakewharton:butterknife-compiler:8.4.0'

    compile 'com.github.bumptech.glide:glide:3.7.0'

    compile 'org.greenrobot:greendao:3.2.0'
    compile 'net.zetetic:android-database-sqlcipher:3.5.1'

}


MainActivity.java

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;
    @BindView(R.id.activity_main)
    RelativeLayout activityMain;

    String [] name = {"Bangalore", "Chennai", "Kolkata", "Delhi", "Mumbai", "Pune"};
    String [] image = {"http://farm8.staticflickr.com/7452/27782542462_12e206359b_m.jpg",
                       "http://farm8.staticflickr.com/7311/27782539412_1e1cece561_m.jpg",
                        "http://farm8.staticflickr.com/7452/27782542462_12e206359b_m.jpg",
                         "http://farm8.staticflickr.com/7326/27605634010_917553d601_m.jpg",
                         "http://farm8.staticflickr.com/7452/27782542462_12e206359b_m.jpg",
                        "http://farm8.staticflickr.com/7311/27782539412_1e1cece561_m.jpg"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        insertIntoDb();
        getInfo();
    }

    private void getInfo() {
        List listWall= WallTallManager.loadAll(this);
        LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(mLayoutManager);
        WallAdapter adapter = new WallAdapter(this, listWall);
        recyclerView.setAdapter(adapter);
        DividerItemDecoration mDividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(), mLayoutManager.getOrientation());
        recyclerView.addItemDecoration(mDividerItemDecoration);
    }

    private void insertIntoDb(){
        WallTallManager.removeAll(this);
        DataManager.removeAll(this);
        for (int index =0; index < 2; index++){
            WallTall wallTall = new WallTall();
            wallTall.setName_id(index);
            WallTallManager.insertOrReplace(this,wallTall);

            for (int i =0; i<6; i++) {
                DataWall dataWall = new DataWall();
                dataWall.setName_id(index);
                dataWall.setName(name[i]);
                dataWall.setImageurl(image[i]);
                DataManager.insertOrReplace(this,dataWall);
            }

        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sunil.recyclerviewviewpager.MainActivity"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout/>

WallAdapter.java

public class WallAdapter extends RecyclerView.Adapter {

    private List wallTalls;
    private Context context;

    public WallAdapter(Context context, List wallTalls) {
        this.wallTalls = wallTalls;
        this.context = context;
    }

    @Override
    public int getItemCount() {
        return wallTalls.size();
    }


    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout, viewGroup, false);
        return new WallViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        int name_id = wallTalls.get(position).getName_id();
        List dataModelList = DataManager.loadByQuery(context, name_id);
        initializeViews(dataModelList, holder, position);
    }


    private void initializeViews(List dataModel, final RecyclerView.ViewHolder holder, int position) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(dataModel);
        ((WallViewHolder)holder).viewPager.setAdapter(adapter);
        ((WallViewHolder)holder).viewPager.setClipToPadding(false);
        ((WallViewHolder)holder).viewPager.setPadding(40, 0, 40, 0);
        if (position == 0) {
            ((WallViewHolder) holder).title.setText("Weekend Shop");
        }
        else{
            ((WallViewHolder)holder).title.setText("Favorite Shop");
        }
    }

    public static class WallViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.view_pager)
        ViewPager viewPager;

        @BindView(R.id.title)
        TextView title;

        public WallViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
}

ViewPagerAdapter.java

public class ViewPagerAdapter extends PagerAdapter{

    List dataModels;
   public ViewPagerAdapter(List dataModels){
        this.dataModels = dataModels;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = LayoutInflater.from(container.getContext()).inflate(R.layout.view_pager_row, container, false);
        ImageView imageViewCampaign = (ImageView) itemView.findViewById(R.id.imageview_campaign);
        TextView textViewCampaign = (TextView) itemView.findViewById(R.id.textview_campaign);
        DataWall wall = dataModels.get(position);
        String imageUrl = wall.getImageurl();
        if (imageUrl != null && !imageUrl.isEmpty()){
            Glide.with(container.getContext())
                    .load(imageUrl)
                    .centerCrop()
                    //.placeholder(R.drawable.ic)
                    .crossFade()
                    .into(imageViewCampaign);

        }
        textViewCampaign.setText(wall.getName());
        container.addView(itemView);
        return itemView;
    }

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

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

Thanks for reading this post. I hope it will helps to understand.

5 comments:

  1. Please provide the github link ??

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. PodrĂ­as poner el enlace de descarga por favor.

    ReplyDelete
  4. https://github.com/sunil676/RecyclerViewViewpager

    ReplyDelete

Debug Database in Android

In my last tutorial, we have learned how we can use persistence database in android. We also understood which database wrapper we can use...

Contact Me

Name

Email *

Message *