How to create custom listview from two array strings in fragment?

Question

I was searching on Youtube and other questions on Google but didn't get the best result. I need to connect two ArrayList to TextView on XML, I did try this with two arrayadapter, but the result only affects one on the last of arrayadapter. Maybe anyone here can help me with this case.

This is my ShopFragment.java

    public class ShopFragment extends Fragment implements AdapterView.OnItemClickListener {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_shop, container, false);
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        ListView listView = (ListView)view.findViewById(R.id.product_list_view);

        ArrayList<String> name_of_product = new ArrayList<>();
        name_of_product.add("Tomat");
        name_of_product.add("Cabe");
        name_of_product.add("Wortel");
        name_of_product.add("Bayam");
        name_of_product.add("Sawi");
        name_of_product.add("Kangkung");

        ArrayList<String> price_of_product = new ArrayList<>();
        price_of_product.add("4000");
        price_of_product.add("5000");
        price_of_product.add("8000");
        price_of_product.add("6000");
        price_of_product.add("6000");
        price_of_product.add("6000");

        ArrayAdapter<String> adapter = new ArrayAdapter<>(getActivity(), R.layout.shop_row, R.id.product_name, name_of_product);


        listView.setAdapter(adapter);
        listView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        if(position==0) {
            Toast.makeText(getActivity(), "Tomat", Toast.LENGTH_SHORT).show();
        }
        if(position==1) {
            Toast.makeText(getActivity(), "Cabe", Toast.LENGTH_SHORT).show();
        }
        if(position==2) {
            Toast.makeText(getActivity(), "Wortel", Toast.LENGTH_SHORT).show();
        }
        if(position==3) {
            Toast.makeText(getActivity(), "Bayam", Toast.LENGTH_SHORT).show();
        }
        if(position==4) {
            Toast.makeText(getActivity(), "Sawi", Toast.LENGTH_SHORT).show();
        }
        if(position==5) {
            Toast.makeText(getActivity(), "Kangung", Toast.LENGTH_SHORT).show();
        }
    }
}

and this shop_row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal"
    android:weightSum="5">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Bayam"
            android:textSize="25dp"
            android:fontFamily="sans-serif-medium"
            android:gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:textColor="@color/cyan_900"
            android:id="@+id/product_name"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.6">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Rp."
            android:textSize="25dp"
            android:fontFamily="monospace"
            android:gravity="center_vertical"
            android:textColor="@color/cyan_900"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.4">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="5000"
            android:textSize="25dp"
            android:fontFamily="monospace"
            android:gravity="center_vertical"
            android:textColor="@color/cyan_900"
            android:id="@+id/product_price"/>

    </LinearLayout>

</LinearLayout>

I just want name_of_product and price_of_product can connect with product_name and product_price on xml.

Answer 1

Change:

ArrayAdapter<String> adapter = new ArrayAdapter<>(getActivity(), R.layout.shop_row, R.id.product_name, name_of_product);

to

        ArrayAdapter<String> adapter = new ArrayAdapter(getActivity(), R.layout.shop_row, name_of_product) {
        @NonNull
        @Override
        public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
            convertView = super.getView(position, convertView, parent);
            TextView tvName = convertView.findViewById(R.id.product_name);
            TextView tvPrice = convertView.findViewById(R.id.product_price);
            tvName.setText(name_of_product.get(position));
            tvPrice.setText(price_of_product.get(position));
            return convertView;
        }
    };