How to make a loaded image gradient with Volley Library in developing an android App

Question

I am developing an android App with Volley Library.

I would like to load an image in async into listView Adapter with Volley and after loading I would like to make the image gradient.

My code is following. It does not work well. The placeholder image becomes gradient, but the loaded image doesn't.

Could you tell me how to solve this problem?

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

    if (null == convertView) 
        convertView = mInflater.inflate(R.layout.main_list_detail, null);
    if (imageLoader == null)
        imageLoader = AppController.getInstance().getImageLoader();

    String mUrl = "http://....";

    NetworkImageView imageView = (NetworkImageView)convertView.findViewById(R.id.image);

    imageView.setDefaultImageResId(R.drawable.placeholder);
    imageView.setErrorImageResId(R.drawable.placeholder);
    imageView.setImageUrl(mURL, imageLoader);

    GradientDrawable gd = new GradientDrawable(
        GradientDrawable.Orientation.TOP_BOTTOM,
        new int[] {Color.parseColor("#81a001"), Color.parseColor("#455600")});
        gd.setStroke(1, Color.parseColor("#455600"));

    imageView.setImageDrawable(gd);

    return convertView;
}

Answer 1

place holder is gradient because code is executed properly when image is loaded... but the network image is loaded a bit late i.e when network I/O is completed and the image properties might be altered by volley library code ... so apply the same gradient code volley callback methods try ImageRequest class instead of NetworkImageView as NetworkImageView doesnt have callback methods ImageRequest Does for that matter

Answer 2

    public class imgloaderList implements ImageListener{

            @Override
            public void onErrorResponse(VolleyError error) {
                //error handling code
            }

            @Override
            public void onResponse(ImageContainer response, boolean isImmediate) {
              // code when your network I/O is completed
             // coding style in not properly followed i hope you can fix that 
                GradientDrawable gd = new GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        new int[] {Color.parseColor("#81a001"), Color.parseColor("#455600")});
                        gd.setStroke(1, Color.parseColor("#455600"));
                imageView.setImageBitmap(response.getBitmap());
                imageView.setImageDrawable(gd);
            }

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

            if (null == convertView) 
                convertView = mInflater.inflate(R.layout.main_list_detail, null);
            ImageLoader imageLoader;
            if (imageLoader == null)
                imageLoader = AppController.getInstance().getImageLoader();

            String mUrl = "http://....";

            NetworkImageView imageView = (NetworkImageView)convertView.findViewById(R.id.image);

            imageView.setDefaultImageResId(R.drawable.placeholder);
            imageView.setErrorImageResId(R.drawable.placeholder);

//provide your own custom ImageLoader.ImageListener as you can see onResponse method is //overridden apply gradient in onResponse method, plz handle the bitmap caching
            imageView.setImageUrl(mURL, new imgloaderList());

            GradientDrawable gd = new GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                new int[] {Color.parseColor("#81a001"), Color.parseColor("#455600")});
                gd.setStroke(1, Color.parseColor("#455600"));

            imageView.setImageDrawable(gd);

            return convertView;
        }

provide custom ImageLoader.ImageListener; in override the onResponse method where you can do image processing of post Network I/O