View Pager in listview?

Question

I am using view pager in listview item. I want to show images in view pager but the lazy loading is not working with it. Please give me any solution. I have tried many lazy loading files but some are working. Some are holding the UI.

The code which I'm using now is working good but not showing the images for the first time. I have to scroll down the listview then scroll up then only it is showing. I don't know what is the problem please give me some solution what I have to do?

I am posting my code of adapter :-

This is my getview code:

public View getView(final int position, View convertView, ViewGroup parent) {

        View v = convertView;
        if (v == null) {
            LayoutInflater mInflater = (LayoutInflater) objProp.activity
                    .getApplicationContext().getSystemService(
                            Context.LAYOUT_INFLATER_SERVICE);
            v = mInflater.inflate(R.layout.adapter_walllayout, null);
        }

        // Get Controls

        final viewHolder vh = new viewHolder();
        vh.txtview_Question = (TextView) v.findViewById(R.id.textView1);
        vh.textview_CommentCount = (TextView) v
                .findViewById(R.id.textVew_WallTotalComments);
        vh.textview_LikeCount = (TextView) v
                .findViewById(R.id.textVew_WallTotalokay);
        vh.ViewPager_Images = (ViewPager) v.findViewById(R.id.pager);
        vh.imageview_Profile = (ImageView) v
                .findViewById(R.id.imageview_userImage);
        vh.textview_PostDate = (TextView) v
                .findViewById(R.id.textView_PostDate);

        vh.textview_UserName = (TextView) v
                .findViewById(R.id.textVew_WallUserName);

        // SetDatato controls

        // Set Data
        vh.txtview_Question
                .setText(objProp.wallDataList.get(position).wallPost_Name);
        vh.txtview_Question.setTypeface(fontsFamily.getFont(
                objProp.activity.getApplicationContext(), true));

        vh.textview_UserName
                .setText(objProp.wallDataList.get(position).wallPost_User_Name);
        vh.textview_UserName.setTypeface(fontsFamily.getFont(
                objProp.activity.getApplicationContext(), true));


        final Vector<View> pages = new Vector<View>();

        objProp.activity.runOnUiThread(new Runnable() {

            @Override
            public void run() {

                vh.ViewPager_Images.setOffscreenPageLimit(4);

                for (int i = 0; i < objProp.wallDataList.get(position).wallPost_Images_Data
                        .size(); i++) {

                    final int imagePosion = i;
                    LayoutInflater mInflaterImage = (LayoutInflater) objProp.activity
                            .getApplicationContext().getSystemService(
                                    Context.LAYOUT_INFLATER_SERVICE);
                    View vImage = mInflaterImage.inflate(
                            R.layout.wallimagepageradaper, null);

                    ImageView imageView = (ImageView) vImage
                            .findViewById(R.id.imageView1);
                    imageView.setTag(objProp.wallDataList.get(position).wallPost_Images_Data
                            .get(i).qst_Wall_Image);
                    CheckBox chk = (CheckBox) vImage
                            .findViewById(R.id.checkBox1);

                    /*
                     * loadLooksImages.fetchDrawableOnThread(objProp.wallDataList
                     * .get(position).wallPost_Images_Data
                     * .get(i).qst_Wall_Image, imageView);
                     */



                    imageLoader_RelativeLayout.DisplayImage(
                            objProp.wallDataList.get(position).wallPost_Images_Data
                                    .get(i).qst_Wall_Image, imageView);
                    /*imageLoader_RelativeLayout.DisplayImage(
                            objProp.wallDataList.get(position).wallPost_Images_Data
                                    .get(i).qst_Wall_Image, imageView);
                     */
                    // Get Controls

                    vh.percentageLayout = (RelativeLayout) vImage
                            .findViewById(R.id.layoutPercent); 
                    vh.percentageLayout.setVisibility(View.GONE);
                    vh.percentageLayout.setId(objProp.wallDataList
                            .get(position).wallPost_Images_Data
                            .get(imagePosion).qst_Wall_ImageID);

                    vh.textView_Percentage = (TextView) vImage
                            .findViewById(R.id.textView_PercentCount);
                    vh.textView_percentVoteCount = (TextView) vImage
                            .findViewById(R.id.textView1_PercentVoteCount);

                    // Set Data
                    Double d = Double.parseDouble(objProp.wallDataList
                            .get(position).wallPost_Images_Data.get(i).qst_Wall_Image_Percentage);
                    int val = d.intValue();
                    vh.textView_Percentage.setText(val + "%");
                    vh.textView_Percentage.setTypeface(fontsFamily.getFont(
                            objProp.activity.getApplicationContext(), true));

                    vh.textView_percentVoteCount.setTypeface(fontsFamily
                            .getFont(objProp.activity.getApplicationContext(),
                                    true));
                    vh.textView_percentVoteCount.setText(objProp.wallDataList
                            .get(position).wallPost_Images_Data.get(i).qst_Wall_Image_LikeCount
                            + " Votes");

                    chk.setOnCheckedChangeListener(new OnCheckedChangeListener() {

                        @Override
                        public void onCheckedChanged(CompoundButton buttonView,
                                boolean isChecked) {
                            new Service_LikeImage(objProp.activity)
                                    .execute(objProp.wallDataList.get(position).wallPost_Images_Data
                                            .get(imagePosion).qst_Wall_ImageID
                                            + "");

                            RelativeLayout lay = (RelativeLayout) objProp.activity
                                    .findViewById(objProp.wallDataList
                                            .get(position).wallPost_Images_Data
                                            .get(imagePosion).qst_Wall_ImageID);
                            lay.setVisibility(View.VISIBLE);

                        }
                    });

                    // //system.out.println("OKKKKKK "+i);
                    pages.add(vImage);

                }

            }
        });

        // system.out.println("aaa  "+pages.size());
        CustomPagerAdapter adap = new CustomPagerAdapter(
                objProp.activity.getApplicationContext(), pages);
        vh.ViewPager_Images.setAdapter(adap);

        vh.textview_CommentCount.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                Intent intent = new Intent(objProp.activity, OkayComments.class);
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                intent.putExtra("wallPostPosition", position);
                intent.putExtra("imageNumber", imagePsotioninPager);
                objProp.activity.startActivity(intent);

            }
        });

        vh.textview_LikeCount.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                Intent intent = new Intent(objProp.activity, Results.class);
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                intent.putExtra("qcode",
                        objProp.wallDataList.get(position).wallPost_ID);
                objProp.activity.startActivity(intent);
            }
        });

        imageLoader.DisplayImage(
                objProp.wallDataList.get(position).wallPost_User_Image,
                vh.imageview_Profile);

        String totComments = objProp.wallDataList.get(position).wallPost_Images_Data
                .get(0).qst_Wall_Image_CommentCount + "";

        vh.textview_CommentCount.setText(totComments + " Comments");
        vh.textview_CommentCount.setTypeface(fontsFamily.getFont(
                objProp.activity.getApplicationContext(), true));

        vh.textview_LikeCount
                .setText(objProp.wallDataList.get(position).wallPost_Images_Data
                        .get(0).qst_Wall_Image_LikeCount + " Okay");

        vh.textview_LikeCount.setTypeface(fontsFamily.getFont(
                objProp.activity.getApplicationContext(), true));

        return v;

    }

    public class viewHolder {
        TextView txtview_Question;
        TextView textview_CommentCount;
        TextView textview_LikeCount;
        TextView textview_UserName;
        TextView textview_PostDate;
        ViewPager ViewPager_Images;
        ImageView imageview_Profile;

        TextView textView_Percentage;
        TextView textView_percentVoteCount;
        RelativeLayout percentageLayout;

        // Image in ViewPager
        ImageView imageView_PostImage;

    }

Answer 1

First of all..I am not very sure how serious this can be because you are trying to use view pager as an list view item. It's not that it cannot be accomplished but it's just that there's too many layers going on here. Hope you will appreciate the work and the efforts put into this piece of code and I hope that this will help solve you issue..So please enjoy the code..:)

1) There are 2 adapter in this case. First for ListView Second for ViewPager

2) Both adapters have different functions and list items.

3) You use one adapter in the other adapter.

4) Then you use the final adapter to inflate your ListView and set the adapter...:D

Here's how the code goes: I will be doing it step by step

Step 1: Making a simple model class:

 public class ModelClass {


        private String titleToDisplay;



        public ModelClass(String question) {
            super();
            this.titleToDisplay = question;
        }

        public String getTitleToDisplay() {
            return titleToDisplay;
        }

        public void setTitleToDisplay(String titleToDisplay) {
            this.titleToDisplay = titleToDisplay;
        }
}

Step 2: Making a view pager Adapter and inflating it will the model class items. This is basic view pager adapter!!

public class ViewPagerAdapter extends PagerAdapter {

    ArrayList<ModelClass> arrayModelClasses = new ArrayList<ModelClass>();

    @SuppressLint("NewApi")
    @Override
    public void finishUpdate(ViewGroup container) {
        // TODO Auto-generated method stub
        super.finishUpdate(container);

    }

    public ViewPagerAdapter() {

        super();

    }

    public ViewPagerAdapter(ArrayList<ModelClass> arrayModelClasses) {

        super();
        this.arrayModelClasses = arrayModelClasses;

    }

    @Override
    public int getCount() {

        return arrayModelClasses.size();

    }

    @Override
    public boolean isViewFromObject(View collection, Object object) {

        return collection == ((View) object);
    }

    @Override
    public Object instantiateItem(View collection, int position) {

        // Inflating layout
        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = inflater.inflate(R.layout.drawer_list_item, null);

        TextView itemText = (TextView) view.findViewById(R.id.title);

        try {

            itemText.setText(arrayModelClasses.get(position)
                    .getTitleToDisplay());

        } catch (Exception e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        ((ViewPager) collection).addView(view, 0);
        return view;

    }

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

}

Step 3: Making the adapter for the ListView

NOTE: This is where I am using the previous adapter and in this adapter I am using the view pager as the list item.

public class ListViewPagerAdapter extends ArrayAdapter<ModelClass> {

    ViewPagerAdapter mViewPagerAdapter;
    private Context context;
    private ArrayList<ModelClass> navigationItems;
    private int selectedIndex;

    public ListViewPagerAdapter(Context context,
            ArrayList<ModelClass> navigationItems) {
        super(context, R.layout.view_pager_list_view, navigationItems);
        this.context = context;
        this.navigationItems = navigationItems;
    }

    @Override
    public int getCount() {

        return navigationItems.size();
    }

    public void setSelectedIndex(int position) {
        selectedIndex = position;
        notifyDataSetChanged();
    }

    @Override
    public ModelClass getItem(int position) {

        return navigationItems.get(position);
    }

    @Override
    public long getItemId(int position) {

        return position;
    }

    @SuppressLint("NewApi")
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {

            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.view_pager_list_view, null);
        }

        ViewPager vp = (ViewPager) convertView.findViewById(R.id.list_pager);
        if (selectedIndex != -1 && position == selectedIndex) {
            vp.setBackground(getContext().getResources().getDrawable(
                    R.drawable.gradient_selected));
        } else {
            vp.setBackground(getContext().getResources().getDrawable(
                    R.drawable.gradient));
        }

        mViewPagerAdapter = new ViewPagerAdapter(navigationItems);
        vp.setAdapter(mViewPagerAdapter);

        return convertView;
    }

}

Step 4: I am setting this last adapter("ListViewPagerAdapter ") to my listview.

NOTE: Here I am using this adapter in one of my fragments. You can use this simply on your normal Activity Class and it will work too.

public class CampaignView extends Fragment {

    ListViewPagerAdapter listViewPagerAdapter;

    public CampaignView() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View campainview = inflater.inflate(R.layout.campaignview, container,
                false);

        return campainview;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);

        String[] s = { "a", "b", "c", "d", "b", "c", "d", "b", "c", "d", "b",
                "c", "d", "b", "c", "d", "b", "c", "d" };

        ArrayList<ModelClass> aList = new ArrayList<ModelClass>();

        for (String s1 : s) {

            aList.add(new ModelClass(s1));

        }

        ListView lv1 = (ListView) getActivity().findViewById(
                R.id.campaignListView);
        // lv1.setAdapter(new ArrayAdapter<String>(getActivity(),
        // android.R.layout.simple_list_item_1,aList));
        listViewPagerAdapter = new ListViewPagerAdapter(getActivity(), aList);
        lv1.setAdapter(listViewPagerAdapter);

    }

}

Lastly, there are few layouts snippets for this code.

First: The listview itself:

    <ListView
        android:id="@+id/campaignListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

Second: The ViagerLayoutItem(row items):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <android.support.v4.view.ViewPager
            android:id="@+id/list_pager"
            android:layout_width="match_parent"
            android:layout_height="400dp" 
            android:paddingTop="10dp"/>

</LinearLayout>

Lastly: The drawer list items for the listview items:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#303030"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#303030"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="25dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:contentDescription="Icon"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@android:color/darker_gray"
            android:minHeight="18dp"
            android:padding="20dp"
            android:paddingRight="40dp"
            android:text="home"
            android:textColor="#33b5e5"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

Image for the work :

Images http://imageshack.com/a/img855/109/5w7e.png Images http://imageshack.com/a/img849/860/8j5t.png

Do let me know if there's any kind of doubts with this code. I will be happy to answer.

Hope you enjoyed it and I wish u all the best to implement this.. I spent few mins on this piece of code.. Hope this helps everyone.. Good Luck .. :)

Answer 2

There is an example github repository, which i found very useful when i was trying something similar to this. It can be very useful. You can built up on this link

In the example,

You will see viewpager is added as a list element. And a scroll listener implementation makes listview scrollable otherwise it doesn't scroll down