Adding a Horizontal Scroll View to a ListView

Question

I currently have an adapter that takes two images and a text view to add to a listView. I want to change this so that I can add a horizontalScrollView inside each list item that contains the images. Would there be any way to do this? Horizontal scrolling with Image

This my current working adapter as described above with two imageView's and a textView

    public class MyAdapter extends BaseAdapter {
    private Context mContext;
    private List<Bean> mList;
    private PopupWindow popUpWindow;
    private LayoutInflater inflater;

    public MyAdapter(Context context,List<Bean> list){
        mContext=context;
        mList=list;


    }

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

    @Override
    public Object getItem(int position) {
        return mList.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        //use convertView recycle
        if(convertView==null){
            holder=new ViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.content_orders, parent, false);
            holder.textView= (TextView) convertView.findViewById(R.id.textView2);
            holder.imageView= (ImageView) convertView.findViewById(R.id.imageView2);
            holder.imageView2 = (ImageView) convertView.findViewById(R.id.imageView3);
            holder.information= (Button) convertView.findViewById(R.id.button5);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }

        //set text and url
        final View finalConvertView = convertView;
        holder.information.setOnClickListener(new View.OnClickListener() {



            @Override
            public void onClick(View v) {
                inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                ViewGroup container = (ViewGroup) inflater.inflate(R.layout.information_popup, null);
                popUpWindow = new PopupWindow(container, 800,400,true);
                popUpWindow.showAtLocation(finalConvertView.findViewById(R.id.orders), Gravity.CENTER, 0,0);

                container.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View view, MotionEvent motionEvent) {
                        popUpWindow.dismiss();
                        return true;
                    }
                });
            }
        });

        holder.textView.setText(mList.get(position).getText());
        Picasso.with(mContext).load(mList.get(position).getUrl()).resize(450,450).into(holder.imageView);
        Picasso.with(mContext).load(mList.get(position).getUrl2()).resize(450,450).into(holder.imageView2);

        return convertView;
    }

    class ViewHolder{
        TextView textView;
        ImageView imageView;
        ImageView imageView2;
        Button information;
    }
    }

Getter and Setter Class

    public class Bean {
    String text;
    String url;
    String url2;



    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
    public String getUrl2() {
        return url2;
    }

    public void setUrl2(String url2) {
        this.url2 = url2;
    }
    }

Activity Layout XML

    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".OrdersActivity"
    android:background="#ffffff">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />



    </android.support.design.widget.AppBarLayout>

<ListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/orderListView"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:dividerHeight="2dp"/>

</android.support.design.widget.CoordinatorLayout>

Content Layout XML

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".OrdersActivity"
    android:id="@+id/orders">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageView
        android:id="@+id/imageView2"
        android:src="@drawable/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/one"
        android:id="@+id/imageView3"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignBottom="@+id/imageView2"
        android:layout_alignTop="@+id/imageView2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/informaci_n"
        android:id="@+id/button5"
        android:layout_below="@+id/button4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/entregado"
        android:id="@+id/button3"
        android:layout_below="@+id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/no_entregado"
        android:id="@+id/button4"
        android:layout_below="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />


</RelativeLayout>

check for twowaygridview and limit row number to 1 – Jayakrishnan Jul 21 '16 at 04:44 — Jayakrishnan, Jul 21 '16 at 04:44

score 2 · Answer 1 · answered Jul 21 '16 at 17:37

I ended up figuring it out. In case anyone else wants to do this, this is the code I used. I just added a horizontalScrollView and I added a linearLayout with a horizontal direction inside the horizontalScrollView and then I added the images inside that linearLayout. This was my code.

MainActivity

public class MainActivity extends AppCompatActivity {
ListView list;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    String a1 = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Soccer_ball.svg/2000px-Soccer_ball.svg.png";
    String a2 = "https://s-media-cache-ak0.pinimg.com/736x/91/27/24/912724cb45a6a2ba468024a5285b01e7.jpg";

    String[] descriptionArray = {"Description 1", "Description 2"};
    String[] photoArray = {a1,a2,a1,a2,a1,a2,a1};
    String[] photoArray2 = {a2,a1,a2,a1,a2,a1,a2};
    String[] photoArray3 = {a1,a2,a1,a2,a1,a2,a1};
    String [] photoArray4 = {a2,a1,a2,a1,a2,a1,a2};
    String[] photoArray5 = {a1,a2,a1,a2,a1,a2,a1};
    String[] photoArray6 = {a2,a1,a2,a1,a2,a1,a2};
    String[] photoArray7 = {a1,a2,a1,a2,a1,a2,a1};





    list = (ListView) findViewById(R.id.listView);
    List<Bean> myList = new ArrayList<>();

    for(int i = 0; i < descriptionArray.length; i++) {
        Bean bean = new Bean();
        bean.setText(descriptionArray[i]);
        bean.setUrl(photoArray[i]);
        bean.setUrl2(photoArray2[i]);
        bean.setUrl3(photoArray3[i]);
        bean.setUrl4(photoArray4[i]);
        bean.setUrl5(photoArray5[i]);
        bean.setUrl6(photoArray6[i]);
        bean.setUrl7(photoArray7[i]);
        myList.add(bean);
    }

    MyAdapter adapter = new MyAdapter(MainActivity.this, myList);
    list.setAdapter(adapter);

}
}

My Adapter

 public class MyAdapter extends BaseAdapter {
    private Context mContext;
    private List<Bean> mList;


    public MyAdapter(Context context,List<Bean> list){
        mContext=context;
        mList=list;


    }

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

    @Override
    public Object getItem(int position) {
        return mList.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        //use convertView recycle
        if(convertView==null){
            holder=new ViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.content_main, parent, false);
            holder.textView= (TextView) convertView.findViewById(R.id.textView);
            holder.imageView= (ImageView) convertView.findViewById(R.id.imageView);
            holder.imageView2 = (ImageView) convertView.findViewById(R.id.imageView2);
            holder.imageView3 = (ImageView) convertView.findViewById(R.id.imageView3);
            holder.imageView4 = (ImageView) convertView.findViewById(R.id.imageView4);
            holder.imageView5 = (ImageView) convertView.findViewById(R.id.imageView5);
            holder.imageView6 = (ImageView) convertView.findViewById(R.id.imageView6);
            holder.imageView7 = (ImageView) convertView.findViewById(R.id.imageView7);
            holder.horizontalScrollView= (HorizontalScrollView) convertView.findViewById(R.id.horizontalScrollView);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }




        holder.textView.setText(mList.get(position).getText());
        Picasso.with(mContext).load(mList.get(position).getUrl()).resize(200,200).into(holder.imageView);
        Picasso.with(mContext).load(mList.get(position).getUrl2()).resize(200,200).into(holder.imageView2);
        Picasso.with(mContext).load(mList.get(position).getUrl3()).resize(200,200).into(holder.imageView3);
        Picasso.with(mContext).load(mList.get(position).getUrl4()).resize(200,200).into(holder.imageView4);
        Picasso.with(mContext).load(mList.get(position).getUrl5()).resize(200,200).into(holder.imageView5);
        Picasso.with(mContext).load(mList.get(position).getUrl6()).resize(200,200).into(holder.imageView6);
        Picasso.with(mContext).load(mList.get(position).getUrl7()).resize(200,200).into(holder.imageView7);



        return convertView;
    }

    class ViewHolder{
        TextView textView;
        ImageView imageView;
        ImageView imageView2;
        ImageView imageView3;
        ImageView imageView4;
        ImageView imageView5;
        ImageView imageView6;
        ImageView imageView7;
        HorizontalScrollView horizontalScrollView;
    }
}

Bean Class(Getter and Setter Class)

public class Bean {
String text;
String url;
String url2;
String url3;
String url4;
String url5;
String url6;
String url7;
public String getText() {
    return text;
}

public void setText(String text) {
    this.text = text;
}

public String getUrl() {
    return url;
}

public void setUrl(String url) {
    this.url = url;
}

public String getUrl2() {
    return url2;
}

public void setUrl2(String url2) {
    this.url2 = url2;
}

public String getUrl3() {
    return url3;
}

public void setUrl3(String url3) {
    this.url3 = url3;
}

public String getUrl4() {
    return url4;
}

public void setUrl4(String url4) {
    this.url4 = url4;
}

public String getUrl5() {
    return url5;
}

public void setUrl5(String url5) {
    this.url5 = url5;
}

public String getUrl6() {
    return url6;
}

public void setUrl6(String url6) {
    this.url6 = url6;
}

public String getUrl7() {
    return url7;
}

public void setUrl7(String url7) {
    this.url7 = url7;
}
}

activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    android:background="#ffffff">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/list_container" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />


    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/horizontalScrollView"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" >
    <LinearLayout
        android:id="@+id/xml_full_img_linear_below_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView3" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView4" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView5" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView6" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView7" />
    </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>

list_container.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="53dp"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:dividerHeight="2dp"/>


</RelativeLayout>

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

Not exactly what you asked, but i think this question can help you.

HorizontalScrollView inside ListView: minor vertical scroll stops horizontal scroll

edited May 23 '17 at 11:44

Community

1
1

answered Jul 20 '16 at 22:04

Agustin Pazos

131
7

Adding a Horizontal Scroll View to a ListView

2 Answers2

Linked