Add ImageButton to ListView

Question

Im trying to add an ImageButton to each row in my ListView (which I implemented via CustomAdapter). Each button should open a different WebView. I can't seem to find any tutorials to do this so any advice/tips/links would be highly apreciated.

EDIT 1:

My Listview 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"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_x="15dp">

<ImageView
    android:layout_width="30dp"
    app:srcCompat="@drawable/a"
    android:layout_marginLeft="12dp"
    android:layout_marginStart="12dp"
    android:id="@+id/local"
    android:layout_height="30dp"
    android:layout_alignBottom="@+id/versus"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:text="TextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/resultsiz"
    android:textColor="@android:color/white"

    android:textStyle="normal|bold"

    android:gravity="center_vertical"
    android:elevation="15dp"
    android:layout_alignBaseline="@+id/resultsde"
    android:layout_alignBottom="@+id/resultsde"
    android:layout_alignRight="@+id/resultsde"
    android:layout_alignEnd="@+id/resultsde"
    android:layout_marginRight="61dp"
    android:layout_marginEnd="61dp" />

<ImageView
    android:layout_width="15dp"
    app:srcCompat="@drawable/a"
    android:id="@+id/versus"
    android:layout_height="15dp"
    android:layout_marginLeft="31dp"
    android:layout_marginStart="31dp"
    android:layout_alignBottom="@+id/visit"
    android:layout_toRightOf="@+id/local"
    android:layout_toEndOf="@+id/local" />

<ImageView
    android:layout_width="30dp"
    app:srcCompat="@drawable/a"
    android:id="@+id/visit"
    android:layout_height="30dp"
    android:layout_marginLeft="19dp"
    android:layout_marginStart="19dp"
    android:layout_alignBottom="@+id/resultsiz"
    android:layout_toRightOf="@+id/versus"
    android:layout_toEndOf="@+id/versus" />

<TextView
    android:text="TextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignLeft="@+id/local"
    android:layout_alignStart="@+id/local"
    android:id="@+id/dia"
    android:textColor="@color/white"
    android:textStyle="normal|bold"
    android:textAllCaps="true" />

<TextView
    android:text="TextView"
    android:layout_height="wrap_content"
    android:id="@+id/resultsde"
    android:layout_marginRight="24dp"
    android:layout_marginEnd="24dp"
    android:textColor="@android:color/white"
    android:layout_marginTop="19dp"
    android:textStyle="normal|bold"
    android:textAlignment="viewEnd"
    android:gravity="end"
    android:layout_width="70dp"
    android:layout_below="@+id/dia"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<Button
    android:text="Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/local"
    android:layout_toRightOf="@+id/local"
    android:layout_toEndOf="@+id/local"
    android:layout_marginTop="155dp"
    android:id="@+id/stats" />
</RelativeLayout>

And my CustomAdapter:

protected void onPostExecute(Void aVoid) {
    CustomAdapter customAdapter = new CustomAdapter();
    lista.setAdapter(customAdapter);
}
class CustomAdapter extends BaseAdapter{


        @Override
        public int getCount() {
            return resultsizq.length;
        }

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

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

        @Override
        public View getView(int position, View view, ViewGroup parent) {
            view = getLayoutInflater().inflate(R.layout.customlayout,null);





            ImageView versus = (ImageView)view.findViewById(R.id.versus);
            ImageView local = (ImageView)view.findViewById(R.id.local);
            ImageView visit = (ImageView)view.findViewById(R.id.visit);

            TextView dia= (TextView)view.findViewById(R.id.dia);
            TextView resultsiz= (TextView)view.findViewById(R.id.resultsiz);
            TextView resultsde= (TextView)view.findViewById(R.id.resultsde);



            dia.setText(di[position]);
            resultsiz.setText(resultsizq[position]);
            resultsde.setText(resultsder[position]);
            versus.setImageResource(versu[position]);
            local.setImageResource(loc[position]);
            visit.setImageResource(vis[position]);




            if ((position+1)%4==0){
                view.setPadding(0,0,0,150);

            }

            if ((position)%4==0){
                view.setPadding(0,150,0,0);

            }


            return view;
        }}

Answer 1

In the getView method, you should assign the onClick function to the Button according to the given position. Probably, you should get the item located at position, generate some url based on the properties of this item, and let this url be opened in the onClick function.

More than that, I have 3 suggestions to improve your code:

1. Try to use RecyclerView instead of ListView.
2. Even if you use ListView, have a look at View Holder pattern. This is a good place to start.
3. Consider using Butterknife, which increases the readability of your code. If I were you, I would keep the item as a property in the view holder object, which has a function annotated with @OnClick(R.id.stats) so that it opens the preferred WebView accordingly.

I hope these help.