Custom ListView where all the images have the same size

Question

I want to create a ListView where every row have a rectangular image and some Text. Like this: enter image description here

The problem that I have is that some image the height is higher than width and then the ListView looks like this: enter image description here

This is my actual code:

xml layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="5dp"
    android:id="@+id/resultItem">
<ImageView
    android:id="@+id/spicture"
    android:layout_width="97dp"
    android:layout_height="60dp"
    android:layout_marginBottom="3dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="10dp"
    android:adjustViewBounds="true"
    android:layout_marginTop="3dp" >
</ImageView>
<TextView
        android:id="@+id/sname"
        style="@android:style/TextAppearance.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

And the custom adapter looks like this:

public class ListViewAdapter extends BaseAdapter {
    private final Context mContext;
    private ArrayList<Integer> imageId;
    private ArrayList<String> textStr;
    private final LayoutInflater inflater;

    private static class ViewHolder {
        ImageView imgView;
        TextView txtView;
    }

    public ListViewAdapter(Context c) {
        mContext = c;
        inflater = LayoutInflater.from(mContext);
    }

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

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

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


    /**
     * Rep per parametre un array amb els identificadors de les imatges i els
     * string dels textes a mostrar
     *
     * @param idImages
     * @param strText
     */
     public void setData(ArrayList<String> strText, ArrayList<Integer> idImages) {
        imageId = idImages;
        textStr = strText;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.result_item, null);
            holder.imgView = (ImageView) convertView.findViewById(R.id.spicture);
            holder.txtView = (TextView) convertView.findViewById(R.id.sname);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        Bitmap bitmap = BitmapUtils.decodeSampledBitmapFromResource(mContext.getResources(), imageId.get(position), 50, 50);
        holder.imgView.setImageBitmap(bitmap);
        holder.txtView.setText(textStr.get(position));
        holder.txtView.setGravity(Gravity.CENTER);
        return convertView;
    }
}

How can I have all the images rectangular with the same size?

You can use `weights` foer both the ImageView and the TextView. give them a weight of **1** (both) and both width = **0dp**. So, they will both take the `50% of the item width`. — Phantômaxx, May 09 '15 at 19:19

score 3 · Accepted Answer · answered May 09 '15 at 19:20

Either you crop the images before setting to the listViewItem. Or you just use images with the same ratio.

But i assume you are looking for a easier solution. Just add scaleType="centerCrop"

<ImageView
    android:id="@+id/spicture"
    android:scaleType="centerCrop"
    android:layout_width="97dp"
    android:layout_height="60dp"
    android:layout_marginBottom="3dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="10dp"
    android:adjustViewBounds="true"
    android:layout_marginTop="3dp" >

You can find more information about the scaleTypes here: http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/

Note fitXY will scale it to fit, but the original ratio will get lost.

That solved my problem thank you. Also I will have a look the the web. Thanks! — jordiPons, May 09 '15 at 19:33

score 2 · Answer 2 · answered May 09 '15 at 19:20

Use this android:scaleType="fitXY" for ImageView try below code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="5dp"
    android:id="@+id/resultItem">
<ImageView
    android:id="@+id/spicture"
    android:layout_width="97dp"
    android:layout_height="60dp"
    android:layout_marginBottom="3dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="10dp"
    android:adjustViewBounds="true"
    android:layout_marginTop="3dp" >
</ImageView>
<TextView
        android:id="@+id/sname"
        style="@android:style/TextAppearance.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

That solution works, thank you. But as it says the other answer fitXY scale it to fit, but the original ratio will get lost. Thank you. — jordiPons, May 09 '15 at 19:34

Custom ListView where all the images have the same size

2 Answers2