Display Custom Size Image Universal ImageLoader

Question

I am using Universal ImageLoader for downloading large images from server and displaying them in coverflow. Issue I am facing here is that I am unable to set custom size for my image. It just takes whole screen. For example, I am downloading image of size 500 x 1200 - and I want to display it of size 300 x 300. But it takes full display. Please help me with this issue as I am stuck for more than 3 days. Thanks.

Code

public class HomeCoverFlow {

    Context mContext;
    public CoverFlow coverFlow;
    ImageAdapter coverImageAdapter;
    ImageLoader imageLoader = ImageLoader.getInstance();
    DisplayImageOptions options;

     /** Called when the activity is first created. */

    public HomeCoverFlow(Context context)
    {
        mContext = context;
           options = new DisplayImageOptions.Builder()
           .showImageOnLoading(R.drawable.flyer_placeholder)
           .showImageForEmptyUri(R.drawable.flyer_placeholder)
           .imageScaleType(ImageScaleType.EXACTLY)
           .cacheInMemory(true)
           .build();

         coverFlow = new CoverFlow(context);

         coverImageAdapter =  new ImageAdapter(mContext);

         coverFlow.setAdapter(coverImageAdapter);

         coverFlow.setSpacing(-25);
         coverFlow.setSelection(2, true);
         coverFlow.setAnimationDuration(1000);

         coverFlow.setGravity(Gravity.CENTER_VERTICAL);


            // HEIGHT
            coverImageAdapter.coverflowHeight = 100; //display.getHeight() / 3;

            //WIDTH
            coverImageAdapter.coverflowWidth = 100;// display.getWidth() / 2;


        }

A method in adapter to create item views, Here I use imageloader to download image and display

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

         FeaturedFlyerData data = (FeaturedFlyerData) getItem(position);

             if(data.flyerImage == null)
             {
                 setNewImage(position);
             }
             //see text or image
             if(data.displayImage)
             {
                 data.flyerImage.setBackgroundColor(Color.BLACK);

                 imageLoader.displayImage(data.url, data.flyerImage, options, null);

             }


         return data.flyerImage;

}       

void setNewImage(int position)
     {
         FeaturedFlyerData data = (FeaturedFlyerData) getItem(position);

         data.flyerImage = new ImageView(mContext);
         data.flyerImage.layout(0, 10, 200,350);
         data.flyerImage.setScaleType(ScaleType.CENTER_INSIDE);
         data.flyerImage.setTag(Integer.toString(position));
         data.flyerImage.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {

            imageClicked(Integer.parseInt(v.getTag().toString()));

        }
    });
    }

}

I don't know what else code snippet to provide here. Please comment if you need any further clarifications. Thanks.

data.flyerImage is an ImageView right? Did u try to set layout_height and layout_width of that ImageView? — Glauco Neves, Feb 25 '14 at 16:21
@GlaucoNeves yes it is an imageview. I have already set in "setNewImage" method. See my edit. Am I doing it right way? — NightFury, Feb 25 '14 at 16:27
Try data.flyerImage.getLayoutParams().height = 100; data.flyerImage.getLayoutParams().width = 100; — Glauco Neves, Feb 25 '14 at 16:32
@GlaucoNeves I am getting `nullpointerexception` on using this. May be it's not valid for imageviews. — NightFury, Feb 25 '14 at 16:35
Maybe this helps http://stackoverflow.com/questions/3144940/set-imageview-width-and-height-programmatically — Glauco Neves, Feb 25 '14 at 16:37
Is there any reason why you don't use a xml layout to show the image? — WarrenFaith, Feb 25 '14 at 16:42
@WarrenFaith because I am using coverflow, and it is derived from gallery widget, which just display imageview items. — NightFury, Feb 25 '14 at 16:45
@GlaucoNeves still exception is thrown.. `java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams cannot be cast to android.widget.Gallery$LayoutParams` — NightFury, Feb 25 '14 at 16:53
Well for that particular error, you can change where you have the GalleryLayoutParams params to `LinearLayoutParams` — kabuto178, Feb 25 '14 at 16:55
It worked for me. Thank you guys. I set layout params for **Gallery widget**, not **linearlayout**. — NightFury, Feb 26 '14 at 07:19

score 1 · Accepted Answer · answered Feb 28 '14 at 06:53

I am using following code to display custom size images in coverflow using universal imageloader.

In constructor, set DisplayImageOptions as:

DisplayImageOptions options = new DisplayImageOptions.Builder()
      .showImageOnLoading(R.drawable.flyer_placeholder)
      .showImageForEmptyUri(R.drawable.flyer_placeholder)
      .imageScaleType(ImageScaleType.EXACTLY)
      .cacheInMemory(true)
      .build();

//set coverflow full screen, and images size.

         coverFlow.setSpacing(-25);
         coverFlow.setAnimationDuration(1000);
         coverFlow.setGravity(Gravity.CENTER_VERTICAL);
         coverFlow.setLayoutParams(new CoverFlow.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

         // GET SCREEN SIZE
            WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
            Display display = wm.getDefaultDisplay();

            DisplayMetrics dm = new DisplayMetrics();
            display.getMetrics(dm);

//Here I am setting image size using my custom adapter in "dp". Avoid to use pixels as things will mess up for different screen sizes

            coverImageAdapter.coverflowWidth = (int) Math.ceil(dm.widthPixels * (dm.densityDpi / 160.0));
            coverImageAdapter.coverflowHeight = (int) Math.ceil(dm.heightPixels * (dm.densityDpi / 160.0)) / 2;

In adapter's setNewImage method (called in getView), use Gallery.LayoutParams:

void setNewImage(int position)
 {
     FeaturedFlyerData data = (FeaturedFlyerData) getItem(position);

     data.flyerImage = new ImageView(mContext);      
     data.flyerImage.setLayoutParams(new Gallery.LayoutParams(coverflowWidth, coverflowHeight));
     data.flyerImage.setScaleType(ScaleType.CENTER_INSIDE);
}

Display Custom Size Image Universal ImageLoader

1 Answers1