How to select item from ImageView in ScrollView?

Question

Please bear with me as I am new to android studio. I want to make a ScrollView containing images with corresponding name (TextView). I want to be able to select an image by touching it in the ScrollView, but I don't know how. I have implemented the ScrollView like this, I also want to be able to add pictures with a name attached to them.

Main_activity.xml

<HorizontalScrollView
    android:id="@+id/scrollFilterView"
    android:layout_width="fill_parent"
    android:layout_height="130dp"
    android:scrollbars="none"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.57"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0">

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

scrollview.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/filterView"
        android:layout_width="90dp"
        android:layout_height="90dp"
        app:srcCompat="@android:drawable/sym_def_app_icon"
        android:contentDescription="filterView" />

    <TextView
        android:id="@+id/textFilter"
        android:layout_width="90dp"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="textFilter" />

MainActivity.java

LayoutInflater inflater = LayoutInflater.from(this);

for (int i = 0; i < NUMBER_OF_FILTERS_GRID; i++ ) {

    View scrollView = inflater.inflate(R.layout.scrollview, gallery, false);

    TextView textview = scrollView.findViewById(R.id.textFilter);
    textview.setText("Filter "+ i);

    ImageView filterView = scrollView.findViewById(R.id.filterView);
    filterView.setImageResource(R.mipmap.ic_launcher);

    gallery.addView(scrollView);
}
}

Some input to if this is the right path to take and what functions i should use is very appreciated :)

Miguel Manzo Miguel Manzo · Accepted Answer · 2020-06-29T15:24:35

Use a RecyclerView instead of a ListView, and used with and adapter, this will grant you more control over each item displayed on the list (in this case in the RecyclerView), you will need to create and Adapter class, a simple class for your Items and a new XML layout that will serve as the model of each item in the list.

Simple class for your items:

public class dataSetItem {

private Integer image;
private String listItemText;

public Integer getImage() {
return image;
}

public void setImage(Integer image) {
this.image = image;
}

public String getListItemText() {
return listItemText;
}

public void setListItemText(String listItemText) {
this.listItemText = listItemText;
}

}

In your mainActivity remove the listView and for loop, use this instead:

  public class MyActivity extends Activity {
        private RecyclerView recyclerView;
        private RecyclerView.Adapter mAdapter;
        private RecyclerView.LayoutManager layoutManager;
        private ArrayList mAdapter = new ArrayList();

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.my_activity);
            recyclerView = (RecyclerView) findViewById(R.id.your_recycler_view);

            mDataset.add(dataSetItem("item 1", R.mipmap.ic_launcher))
            mDataset.add(dataSetItem("item 2", R.mipmap.ic_launcher))

            // You can add more items to the mDataset list and call the adapter again to update the RecyclerView




            // use a linear layout manager
            layoutManager = new LinearLayoutManager(this);
            recyclerView.setLayoutManager(layoutManager);

            // specify an adapter (see also next example)
            mAdapter = new MyAdapter(myDataset);
            recyclerView.setAdapter(mAdapter);
        }
        // ...
    }

Create this XML layout which will serve as the model for each item, called my_item_list_layout:

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


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:gravity="center">

                <ImageView
                    android:id="@+id/the_image_i_want_to_click"
                    android:layout_width="80dp"
                    android:layout_margin="10dp"
                    android:layout_height="80dp"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:background="@color/ADRBlack"
                    />
                    <TextView
                        android:id="@+id/item_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:maxWidth="220dp"
                        android:textColor="@color/Black"
                        android:textSize="16sp"
                        tools:text="Example Restaurant" />
                </LinearLayout>
</LinearLayout>

Now the adapter class, in this case called MyAdapter:

 public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
        private customItem[] mDataset;

        // Provide a reference to the views for each data item
        // Complex data items may need more than one view per item, and
        // you provide access to all the views for a data item in a view holder
        public static class MyViewHolder extends RecyclerView.ViewHolder {
            // each data item is just a string in this case
            public TextView textView;
            public MyViewHolder(TextView v) {
                super(v);
                textView = v;
            }
        }

        // Provide a suitable constructor (depends on the kind of dataset)
        public MyAdapter(customItem[] myDataset) {
            mDataset = myDataset;
        }

        // Create new views (invoked by the layout manager)
        @Override
        public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
                                                       int viewType) {
            // create a new view
            TextView v = (TextView) LayoutInflater.from(parent.getContext())
                    .inflate(R.my_item_list_layout, parent, false);
                       

            MyViewHolder vh = new MyViewHolder(v);
            return vh;
        }

        // Replace the contents of a view (invoked by the layout manager)
        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            // - get element from your dataset at this position
            // - replace the contents of the view with that element
            holder.textView.setText(mDataset[position].getListItemText);
            holder.textView.setBackground(mDataset[position].getImage);

            //Now to do something when you clic the image use this

            holder.textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(final View v) {
            
                //Your action here

           }
          });

        }

        // Return the size of your dataset (invoked by the layout manager)
        @Override
        public int getItemCount() {
            return mDataset.length;
        }
    }

How to select item from ImageView in ScrollView?

1 Answers