ImageView size issue within ListView

Question

I encounter an error where when I first load a listview with images from a URL the size is not displayed correctly. However this only happens the first time.

If I go back to the previous fragment and then again to the ListView, the image sizes are fixed ( although I can see that momentarily they had the wrong size before being fixed ).

I use Android Query to retrieve the images and this example for my listview : http://javatechig.com/android/android-listview-tutorial

SearchResultAdapter.java

public class SearchResultAdapter extends BaseAdapter{

    private Context context;
    private ArrayList listData;
    private LayoutInflater layoutInflater;

    public SearchResultAdapter(Context context, ArrayList listData) {
        this.context = context;
        this.listData = listData;
        layoutInflater = LayoutInflater.from(context);
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {

            convertView = layoutInflater.inflate(R.layout.searchresult_single_item, null);
            holder = new ViewHolder();

            holder.adImage = (ImageView) convertView.findViewById(R.id.adImage);
            holder.adTitle = (TextView) convertView.findViewById(R.id.adTitle);
            holder.adPrice = (TextView) convertView.findViewById(R.id.adPrice);
            holder.adSize = (TextView) convertView.findViewById(R.id.adSize);
            holder.adDetails = (TextView) convertView.findViewById(R.id.adDetails);
            holder.adMessage = (ImageView) convertView.findViewById(R.id.adMessage);
            holder.adFavorite = (ImageView) convertView.findViewById(R.id.adFavorite);
            convertView.setTag(holder);
        } 
        else {
            holder = (ViewHolder) convertView.getTag();
        }

        AdItem adListItem = (AdItem) listData.get(position);

        AQuery aq = new AQuery(convertView);
        aq.id(holder.adImage).image(adListItem.getAdImageURL(), true, true, 50, 0, null, AQuery.FADE_IN_NETWORK, 1.0f);

        ImageLoader imgLoader = new ImageLoader(context);
        imgLoader.DisplayImage(adListItem.getAdImageURL(), holder.adImage);

        holder.adTitle.setText(adListItem.getAdTitle());
        holder.adPrice.setText(adListItem.getAdPrice());
        holder.adSize.setText(adListItem.getAdSize());
        holder.adDetails.setText(adListItem.getAdDetails());

        return convertView;
    }

    static class ViewHolder {
        ImageView adImage;
        TextView adTitle;
        TextView adPrice;
        TextView adSize;
        TextView adDetails;
        ImageView adMessage;
        ImageView adFavorite;
    }

}

SearchResultFragment.java

public class SearchResultFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_searchresult, container, false);

        ArrayList listData = getListData();
        final ListView searchResult = (ListView) view.findViewById(R.id.listViewSearchResult);
        searchResult.setAdapter(new SearchResultAdapter(getActivity(), listData));

        searchResult.invalidateViews();
        return view;
    }

    private ArrayList getListData() {

        ArrayList results = new ArrayList();
        AdItem adData = new AdItem();

        adData.setAdImageURL("https://img.wg-gesucht.de/media/up/2014/36/3d3eb5b646560480_2014_09_07_19_26_33.sized.jpg");
        adData.setAdTitle("Apartment");
        adData.setAdPrice("€300");
        adData.setAdSize("37m");
        adData.setAdDetails("This is a wonderful apartment at a very reasonable price.");
        results.add(adData);

        adData = new AdItem();
        adData.setAdImageURL("https://img.wg-gesucht.de/media/up/2014/46/a37ed74847504440_img_7409.sized.jpg");
        adData.setAdTitle("Apartment");
        adData.setAdPrice("€450");
        adData.setAdSize("50m");
        adData.setAdDetails("This is a wonderful apartment at a very reasonable price.");
        results.add(adData);

        adData = new AdItem();
        adData.setAdImageURL("https://img.wg-gesucht.de/media/up/2014/46/4399903447385080_img_3106.sized.jpg");
        adData.setAdTitle("Apartment");
        adData.setAdPrice("€500");
        adData.setAdSize("62m");
        adData.setAdDetails("This is a wonderful apartment at a very reasonable price.");
        results.add(adData);

        return results;
    }

}

This is my fragment layout for the row item :

<ImageView
    android:id="@+id/adImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:minWidth="50dp" 
    android:minHeight="50dp" 
    android:layout_marginRight="20dp"/>

<TextView
    android:id="@+id/adTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="" 
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/adImage" />

<TextView
    android:id="@+id/adPrice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="" 
    android:layout_below="@id/adTitle"
    android:layout_toRightOf="@id/adImage" />

<TextView
    android:id="@+id/adSize"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="" 
    android:layout_below="@id/adTitle"
    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@id/adPrice" />

<TextView
    android:id="@+id/adDetails"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="" 
    android:layout_toRightOf="@id/adImage"
    android:layout_below="@id/adPrice"/>

<ImageView
    android:id="@+id/adFavorite"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"/>

<ImageView
    android:id="@+id/adMessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/adFavorite"/>

First image is what it looks like the first time the listview is loaded and what it looks like after ( 2nd image is what it should look like ).

Answer 1

If it is not necessary to keep this min width/height, you can get 2nd image result changing ImageView attributes in your list row to:

<ImageView
    android:id="@+id/adImage"
    android:layout_width="70dp"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="20dp"
    android:scaleType="centerCrop"/>