1

I have an app where i can pick images from the sdcard. Once images have been picked, say from the photos folder, you can view the selected images in a ListView.

The selected images are passed to the listview using an Adapter which takes an array of paths to each image.

It all works fine, but how do make the image fit to the width of the listview row?

thanks in advance.

public class QueuedImagesActivity extends Activity {

    private static final String TAG = QueuedImagesActivity.class.getSimpleName();
    private ImageAdapter adapter;
    private ListView imageList;
    private ApplicationObj appObj;
    private Intent[] uniquePhotoChunks;
    private String path;
    private ArrayList<String> imagePaths = new ArrayList<String>(); 

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_listview);

        appObj = (ApplicationObj) getApplication();

        // Get the queued chunks
        try {
            boolean includeChunksCurrentlyBeingProcessed = true;
            boolean returnUniqueUris = true;
            uniquePhotoChunks = appObj.getQueuedChunks(includeChunksCurrentlyBeingProcessed, returnUniqueUris);
            Log.d(TAG, "There are " + uniquePhotoChunks.length + " photo paths sent back from getQueuedChunks");

            //get the URI out from the Intent with getDataString() and store in Array that the adapter will use
            for(int i = 0; i < uniquePhotoChunks.length; i++){

                path = uniquePhotoChunks[i].getDataString();
                imagePaths.add(path);

                Log.d(TAG, "path in QueuedImagesActivity = " + path);

            }

            //pass the array to the adapter
            imageList = (ListView) findViewById(R.id.listView1);
            adapter = new ImageAdapter(getBaseContext(), imagePaths);
            imageList.setAdapter(adapter);   

        }
        catch (Exception e) {
            Log.e(TAG, "There was a problem showing the queued images", e);
            Toast.makeText(this, "There was a problem showing the queued images", Toast.LENGTH_LONG).show();

            Intent intent = new Intent(this, MainActivity.class);
            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
        }


    }//end of onCreate
}

.

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

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="List of Images"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true" >
</ListView>

</RelativeLayout>

.

public class ImageAdapter extends BaseAdapter {

    private static final String TAG = ImageAdapter.class.getSimpleName();

    static class RowItemHolder{
        ImageView imageView;
    }
    private Context context;
    private ArrayList<String> imagePaths= new ArrayList<String>();

    public ImageAdapter(Context baseContext, ArrayList<String> imagePaths) {

        this.context= baseContext;
        this.imagePaths= imagePaths;
    }

    @Override
    public int getCount() {

        return imagePaths.size();
    }

    @Override
    public Object getItem(int position) {

            return null;
    }

    @Override
    public long getItemId(int position) {

            return 0;
    }

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

    View view;
    view= convertView;
    RowItemHolder holder = null;
    if(view== null){
            LayoutInflater in =(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = in.inflate(R.layout.image_view, parent, false);
            holder= new RowItemHolder();
            holder.imageView=(ImageView) view.findViewById(R.id.imageView1);
        view.setTag(holder);
    } else{
            holder = (RowItemHolder) view.getTag();
    }


    Log.e(TAG, "imagePaths.get(position) = " + imagePaths.get(position));



    holder.imageView.setImageURI(Uri.parse(imagePaths.get(position)));

    return view;
}
}

[edit1]

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

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/ic_launcher" />

</RelativeLayout>
turtleboy
  • 8,210
  • 27
  • 100
  • 199
  • You can always make you own `ArrayAdapter` with your own `layout` and use the `layout_width="match_parent"`. – luiscosta Jul 25 '14 at 16:30
  • @Akagami but why can i not just alter the layout in the imageAdapter? – turtleboy Jul 25 '14 at 16:32
  • In theory, if you extend the `ImageAdapter` on a custom adapter you should be able to override the `getView` method and use your own with your settings. – luiscosta Jul 25 '14 at 16:38
  • well in the above code i extend baseAdapter which has a getView(). In that method i inflate the view and have references to the ImageView and maybe the image. Can i alter how the image is displayed within that class? – turtleboy Jul 25 '14 at 16:42
  • Can you show the `R.layout.image_view`? – luiscosta Jul 25 '14 at 16:45
  • @Akagami yes, i shown the code in edit1 – turtleboy Jul 25 '14 at 16:47
  • You are aware that you have a `marginLeft` on your `ImageView`, are you not? Just checking! – luiscosta Jul 25 '14 at 16:51
  • @Akagami I wasn't when i edited the code but i've deleted them now. I've re-edited the post to show what i have now. i've recomplied and run it, but the images are still in the center. – turtleboy Jul 25 '14 at 16:55
  • @Akagami would it be possible to create the image bitmap in the getview() and get it's dimensions, then scale it up to those of the listview? I'm new to imaging so not too sure. – turtleboy Jul 25 '14 at 16:58

3 Answers3

2

Try to put the property android:scaleType="fitXY" in your ImageView like:

<ImageView
  android:id="@+id/imageView1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/ic_launcher"
  android:scaleType="fitXY" />

Hope this helps.

luiscosta
  • 855
  • 1
  • 10
  • 16
  • Thanks the images seem a little stretched. I found the following code which worked fine. you were on the right lines thanks.android:adjustViewBounds="true" android:scaleType="fitCenter" – turtleboy Jul 26 '14 at 10:46
  • 1
    I would use `centerCrop` instead. – njzk2 Jul 30 '14 at 20:49
0

Set layout_width of image view in your R.Layout. image_view to match_parent.

Charlesjean
  • 566
  • 1
  • 5
  • 16
  • no i'm afraid it just seems to centralizes the photos in each row. the photos are different sizes, this means at the moment the rows in the listview end up different sizes too. I would like it so there is no space either side of the image in the row – turtleboy Jul 25 '14 at 16:30
  • then your image will be stretched, it will not look good. I think you should think about a better design. – Charlesjean Jul 26 '14 at 07:36
0

An ImageView will only stretch images to fill the view bounds when they are set as the background. Images set as the src will maintain their original size or be shrunk to fit the view.

So you will need to get the drawable first and then call holder.imageView.setBackground(yourImageDrawable)

You can retrieve the drawable from a URI following something like this: Retrieve drawable resource from Uri

Thus it should end up looking something like the code below

Uri uri = Uri.parse(imagePaths.get(position));
Drawable drawable;
try {
    InputStream inputStream = context.getContentResolver().openInputStream(uri);
    drawable = Drawable.createFromStream(inputStream, uri.toString() );
} catch (FileNotFoundException e) {
    drawable = context.getResources().getDrawable(R.drawable.default_image);
}

holder.imageView.setBackgroundDrawable(drawable);
Community
  • 1
  • 1
Andrea Thacker
  • 3,440
  • 1
  • 25
  • 37