Custom Listview items layouts

Question

I am new to Android development. I am trying to make my custom listview items layout. I want to know how will I give image path if I have a ImageView in may layout.

Activity file where I am populating this ListView

ListView lstItems = (ListView) findViewById(R.id.lstItems);

String[] from = new String[]{"itemname", "productimage"};
int[] to = new int[]{R.id.itemname, R.id.productimage};

List<HashMap<String, Object>> fillMaps = new ArrayList<HashMap<String, Object>>();

for (Item item : objects) {

    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put("itemname", item.getName());
    map.put("productimage", item.getImages());

    fillMaps.add(map);

}

SimpleAdapter adapter = new SimpleAdapter(this, fillMaps, R.layout.shop_listitem_view, from, to);
lstItems.setAdapter(adapter);

Layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView
        android:id="@+id/itemname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="19dp"
        android:layout_marginTop="22dp"
        android:text="TextView"
        android:textSize="14sp"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/productimage" />

    <ImageView
        android:id="@+id/productimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        app:srcCompat="@drawable/common_full_open_on_phone"
        android:layout_alignTop="@+id/itemname"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Answer 1

In this case, the SimpleAdapter will not work for you. In first place you have to create a class that represent your business logic:

public class Product {

public String productName;

public String productImage;

}

Second, you have to add the Glide library into your build.gradle (module app) file. Add this line in your dependencies block:

dependencies {
  compile 'com.github.bumptech.glide:glide:3.7.0'
  }

After that, you have to create your layout file that will be inflated by your Adapter:

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

    <ImageView
        android:id="@+id/your_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

</LinearLayout>

Now, let's create your Adapter class, it must extends the BaseAdapter class:

public class YourAdapter  extends BaseAdapter{

    private List<Object> products;
    private Context context;


    public YourAdapter(Context context, List<Product> products){
        this.context = context;
        this.products = products;

    }


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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater li = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = li.inflate(R.layout.your_list_layout, null);//set layout for displaying items
        ImageView image = (ImageView) view.findViewById(R.id.your_image_view);//get id for image view
        Glide.with(context).load(products.get(position).productImage).into(image); //set the image in your image view
        TextView text = (TextView) view.findViewById(R.id.your_text_view);
        text.setText(products.get(position).productName);
        return view;
    }
}

And finally, in your activity you can use it:

//Create a product:
List<Product> p = new ArrayList<>();
Product prod = new Product();
prod.productName = "Name of your product";
prod.productImage = "http://your_image_url";
prod.add(prod);

YourAdapter adapter = new YourAdapter(this, p);

//and finally, set it into your listview:

listview.setAdapter(adater);