How to add ViewPager that contain images into listview?

Question

Good day Developers, I already implement listview using base adapter, and now I want to add a view pager into listview row item, currently at row item 2. But I'm facing error. I think, it's about MeasureSpec on the listview.

This is ListView adapter using BaseAdapter:

public class ListViewAdapter extends BaseAdapter {
    ...
    @Override
    public View getView(int pos, View convertView, ViewGroup parent) {
        View v = convertView;
        TextView txt_urutan;
        TextView txt_menu;
        TextView txt_price;
        ImageView img_menu;
        ImageView img_arrow;

        if(v==null){
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.list_makanan, parent, false);
        }
        img_menu = (ImageView)v.findViewById(R.id.picture_menu_on_listview);
        txt_urutan = (TextView)v.findViewById(R.id.urutan_makanan_ayam_listview);
        txt_menu = (TextView)v.findViewById(R.id.nama_makanan_ayam_listview);
        txt_price = (TextView)v.findViewById(R.id.harga_makanan_ayam_listview);
        img_arrow = (ImageView)v.findViewById(R.id.arrow_on_listview);

        txt_urutan.setText(urutan_makanan_sambal[pos]);
        txt_menu.setText(jenis_menu_sambal[pos]);
        txt_price.setText(price_menu_sambal[pos]);
        img_menu.setImageResource(pic_menu.getResourceId(pos, -1));
        img_arrow.setImageResource(R.drawable.nav_icon);

        return v;
    }
}

EDIT:

This is horizontalscrollview.java:

public class HorizontalScrollViewAdapter extends BaseAdapter{
LayoutInflater inflater;
    Context context;

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

    @Override
    public Object getItem(int arg0) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        ImageView img;
        if(v==null){
            inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inflater.inflate(R.layout.horizontal_scroll_view, parent, false);
        }
        img =  (ImageView)v.findViewById(R.id.image_view1);
        return v;
    }
}

this is siteContentView class:

public class SiteContentPreview{
    public View getView(Context context, View v, SiteContentData siteContent){
        View result = v;
        if(result!=null){
            LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            result = inflater.inflate(R.layout.custom_image, null);
        }
        TextView siteNumber = (TextView)result.findViewById(R.id.custom_image_view_text);
        ImageView siteImage = (ImageView)result.findViewById(R.id.custom_image_view);
        if(siteContent != null){
            siteNumber.setText(siteContent.getSiteNumber());
            siteImage.setImageResource(Integer.parseInt(siteContent.getSiteContentFrame()));
        }
        return result;
    }
}

this is siteContentData class:

public class SiteContentData{
    String holdString;
    String holdImagePath;

    public getSiteNumber(){
        return holdString;
    }

    public getSiteContentFrame(){
        return holdImagePath;
    }
}

This is horizontal_scroll_view.xml:

<?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" >

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="50dp" >

    <LinearLayout
        android:id="@+id/hori_place_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
    </LinearLayout>
</HorizontalScrollView>

</LinearLayout>

and this is scroll_view.xml (to hold images that to be placed inside horizontal scroll view):

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

<ImageView android:id="@+id/image_view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/sambal_bajak_laut"/>

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

any help or idea would be very appreciated. Environment: Eclipse, ADT, Genymotion.

Answer 1

You can do a workaround.

Instead of adding a ViewPager you simply add a View extended by BaseAdapter.

In there you add a View with HorizontallScroll. The Click Event you can trigger with the ID of the corresponding View.

With this example you see how Horizontall implement: http://examples.javacodegeeks.com/android/core/ui/horizontalscrollview/android-horizontalscrollview-example/

Please take notice that you must set your child width (in your Case the picture) to match_parent. Use a Layout (that have match_parent) and in this Layout you place your picture with wrap_content, for none stretching the picture.

EDIT 1:

First you create your HorizontalScrollView Layout like the following:

    <?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" >

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp" >

        <LinearLayout
            android:id="@+id/hori_place_holder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

Now you create a AdapterView for your Layout that you want to place in the LinearLayout

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourimage" />

</LinearLayout>

Now in your Code you dynamically create and add the AdapterView (like you have) to the Linearlayout from your HorizontalScrollView.

EDIT 2

public class HorizontalScrollViewAdapter extends BaseAdapter {
        ...
        @Override
        public View getView(int pos, View convertView, ViewGroup parent) {
            View v = convertView;
            ImageView img_menu;
            if(v==null){
            inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inflater.inflate(R.layout.horiscvi, parent, false);
            }
            // at this you must add your CustomeViewLayout
            return v;
        }
    }

And the adapter for CustomeView

public class CustomeViewAdapter extends BaseAdapter {
    ...
    @Override
    public View getView(int pos, View convertView, ViewGroup parent) {
        View v = convertView;
        ImageView img_menu;
        if(v==null){
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.list_makanan, parent, false);
        }
        img_menu = (ImageView)v.findViewById(R.id.picture_menu_on_listview);
        v.addView(img_menu);
        return v;
    }
}

EDIT 3

OK, now in your AdapterView you have a section thats looking like the following:

ArrayList<SiteContentData> siteContentData = new ArrayList<SiteContentData>();
        siteContentData.add(new SiteContentData("one", "yourpicone"));
        siteContentData.add(new SiteContentData("two", "yourpictwo"));
        siteContentData.add(new SiteContentData("three", "yourpicthree"));
        siteContentData.add(new SiteContentData("four", "yourpicfour"));

        horizontalScrollView = ((HorizontalScrollView) findViewById(R.id.horizontalScrollView1));
        sitePreview = ((LinearLayout) findViewById(R.id.hori_linear));

        for (SiteContentData siteContData : siteContentData)
        {
            View convertView;
            LayoutInflater inflaterCustomeShow =
                    (LayoutInflater) getApplicationContext().getSystemService(
                            Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflaterCustomeShow.inflate(R.layout.customeimage, null);
            View sitePreviewView =
                    SiteContentPreview.getView(getApplicationContext(), convertView, siteContData);

            sitePreview.addView(sitePreviewView);
        }

In this you initialize your scrollview with the linearlayout inside of this. Specially you adding the CustomeView inside of the linearlayout. The SiteContentData is just a pojo thats hold two strings, the first is some sample text and the second is the path to the image in your project.

And the SiteContentPreview looks like this:

public class SiteContentPreview
{
    public static View getView(Context context, View convertView, SiteContentData siteContent)
    {
        View result = convertView;
        if (result == null)
        {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            result = inflater.inflate(R.layout.customeimage, null);
        }

        TextView siteNumber = ((TextView) result.findViewById(R.id.custome_imageview_text));
        ImageButton siteImage = ((ImageButton) result.findViewById(R.id.custome_image_view));
        if (siteContent != null)
        {
            siteNumber.setText(siteContent.getSiteNumber());
            siteImage.setImageResource(Integer.parseInt(siteContent.getSiteContentFrame()));
        }

        return result;
    }
}

just simple assigning.

That's all.

The HorizontalScrollView Layout you are right and here is the Layout for the CustomeViewImage:

<?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" >

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

    <TextView
        android:id="@+id/custome_imageview_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

That's all. enjoy. Hope you achieve what you want.

public class SiteContentData
{
private String siteNumber;
private String siteContentFrame;

public SiteContentData(String siteNumber, String siteContentFrame)
{
this.siteNumber = siteNumber;
this.siteContentFrame = siteContentFrame;
}

public String getSiteNumber()
{
return siteNumber;
}

public String getSiteContentFrame()
{
return siteContentFrame;
}

}