Develop Reference

Load customize bitmap image using picasso in android listview

I need to create and set customize bitmap image on each row of listview. I am doing that using picasso. My code inside getView of adapter is like below,
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
View rowView = convertView;
if (rowView == null){
LayoutInflater inflater = context.getLayoutInflater();
rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);
viewHolder = new ViewHolder();
viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);
rowView.setTag(viewHolder);
}else {
viewHolder = (ViewHolder) rowView.getTag();
}
//Start Custom Image View///////
String photoUrl1 = arrayList.get(position).getPhotoUrl();
if (photoUrl1.length()<8){
photoUrl1 = "SOME_URL";
}
final String photoUrl = photoUrl1;
final ImageView imgDot = viewHolder.imgDot;
// final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
final View finalRowView = rowView;
final ViewHolder finalViewHolder = viewHolder;
final Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {
Log.d("PICASO", " called: " + "onBitmapLoaded called");
Bitmap original;
original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));
BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
int bitmapHeight= bitmap .getBitmap().getHeight();
int bitmapWidth = bitmap .getBitmap().getWidth();
Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
int width = mask.getWidth();
int height = mask.getHeight();
float centerX = (width - original.getWidth()) * 0.5f;
float centerY = (height- original.getHeight()) * 0.5f;
mCanvas.drawBitmap(original, centerX, centerY, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
imgDot.getLayoutParams().height = bitmapHeight;
imgDot.getLayoutParams().width = bitmapWidth;
imgDot.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgDot.setImageBitmap(result);
imgDot.setAdjustViewBounds(true);
Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
targets.remove(this);
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
Log.d("PICASO", " called: " + "onBitmapFailed called");
Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
targets.remove(this);
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");
}
};
targets.add(target);
// imgDot.setTag(target);
Picasso.with(context).load(photoUrl).into(target);
//End Custom Image View////////////
return rowView;
}
Suppose, there is two row so two customize bitmap will be created. When first one is created its showing nice but when second one created then this last image is showing in both row's imageview.
What I need to change in my code?
Any help will be appreciated.

You could try something by creating handler as subclass of your adapter and passing specific reference of your view holder and position which will help us to avoid overriding issue of target listener
// construct the handler inside your adapter's constructor so you know it is on the UI thread
Handler myHandler = new Handler();
class LoadImage implements Runnable {
ImageView iv;
int position;
public LoadImage(ImageView iv, int position) {
this.iv = iv;
this.position = position;
}
#Override
public void run() {
// keep your target listener stuffs here
Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {
Log.d("PICASO", " called: " + "onBitmapLoaded called");
Bitmap original;
original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));
BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
int bitmapHeight= bitmap .getBitmap().getHeight();
int bitmapWidth = bitmap .getBitmap().getWidth();
Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
int width = mask.getWidth();
int height = mask.getHeight();
float centerX = (width - original.getWidth()) * 0.5f;
float centerY = (height- original.getHeight()) * 0.5f;
mCanvas.drawBitmap(original, centerX, centerY, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
iv.getLayoutParams().height = bitmapHeight;
iv.getLayoutParams().width = bitmapWidth;
iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
iv.setImageBitmap(result);
iv.setAdjustViewBounds(true);
Picasso.with(context).cancelRequest(iv);
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
Log.d("PICASO", " called: " + "onBitmapFailed called");
Picasso.with(context).cancelRequest(iv);
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");
}
};
Picasso.with(context).load(photoList.get(position)).into(target);
}
}
And you will call it from your getView by :
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
View rowView = convertView;
if (rowView == null){
LayoutInflater inflater = context.getLayoutInflater();
rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);
viewHolder = new ViewHolder();
viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);
rowView.setTag(viewHolder);
//Change is here
viewHolder.mRunnable = new LoadImage(viewHolder.imgDot, position);
}else {
viewHolder = (ViewHolder) rowView.getTag();
//Change is here
myHandler.removeCallbacks(viewHolder.mRunnable);
}
//Start Custom Image View///////
String photoUrl1 = arrayList.get(position).getPhotoUrl();
if (photoUrl1.length()<8){
photoUrl1 = "SOME_URL";
}
final String photoUrl = photoUrl1;
final ImageView imgDot = viewHolder.imgDot;
// final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
final View finalRowView = rowView;
final ViewHolder finalViewHolder = viewHolder;
//Change is here
myHandler.postDelayed(viewHolder.mRunnable, 3000);
return rowView;
}

ListView item height is always same (and wrong)

I'm trying to resize ListView to show all items.
final ListAdapter adapter = timeline.getAdapter();
int totalHeight = 0;
final int desiredWidth = View.MeasureSpec.makeMeasureSpec(timeline.getWidth(), View.MeasureSpec.AT_MOST);
for (int i = 0; i < adapter.getCount(); i++) {
final View listItem = adapter.getView(i, null, timeline);
listItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
Log.v(TAG, "Item size = " + listItem.getMeasuredHeight()); // Always 38
totalHeight += listItem.getMeasuredHeight();
}
final ViewGroup.LayoutParams params = timeline.getLayoutParams();
params.height = totalHeight;
timeline.setLayoutParams(params);
timeline.requestLayout();
Why is listItem.getMeasuredHeight() always 38, disregard android:layout_height specified in item's XML layout.
The getView() method is pretty standard:
#Override
public View getView(final int position, View view, final ViewGroup parent) {
final ViewHolder holder;
if (view == null) {
final LayoutInflater li = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = li.inflate(R.layout.timeline_item, parent, false);
holder = new ViewHolder(view);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
final ActivityLogItem log = (ActivityLogItem) getItem(position);
holder.time.setText(format.print(log.getRecordedTime().withZone(DateTimeZone.getDefault())));
holder.time.setTextColor(log.isImportant() ? view.getResources().getColor(R.color.orange) : Color.WHITE);
holder.event.setText(log.getLocalizedType(view.getResources()));
holder.event.setTextColor(log.isImportant() ? view.getResources().getColor(R.color.orange) : Color.BLACK);
return view;
}

Gridview does not show all the picture, only a small part

I have the following GridView:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setScaleType(ScaleType.CENTER_CROP);
} else {
imageView = (ImageView) convertView;
}
if (mTemplates.get(position).getResource() != 0) {
LogService.log("", "zzzzzzzzzzzzzzzz======loaded from resource" + mTemplates.get(position).getResource() + "???????????" + mTemplates.size());
imageView.setImageResource(mTemplates.get(position).getResource());
} else {
imageView.setImageDrawable(mTemplates.get(position).getDrawableThumbnail());
// imageView.setImageResource(mTemplates.get(0).getResource());
LogService.log("", "zzzzzzzzzzzzzzzz======loaded from drawable");
LogService.log("", "=========SIZE: " + mTemplates.size());
}
return imageView;
}
Now I have some elements that do not have resources in the Drawables, but instead in a folder on the sdcard, so I create a drawable from the source of this pictures, and try to load that drawable on the gridview:
imageView.setImageDrawable(mTemplates.get(position).getDrawableThumbnail());
But its like the gridview does not recognise these, and if its on the same collumn with other pictures it is shown, but if its on another collumn (lower), it will only show 2-3mm of the picture (also doesn't recognise its position like its not therE).
If I hardcode and use the first picture from Resources like this:
imageView.setImageResource(mTemplates.get(0).getResource());
It all works, what could be the issue?

Because the actually size of the pic, is the small size, but when loading an imageView from Resources it strectches it to its parents size.
Resolved this issue by calculating the height needed, and then load all the pictures with that height:
public AdapterGridView(Context c) {
context = c;
DisplayMetrics metrics = new DisplayMetrics();
((Activity) c).getWindowManager().getDefaultDisplay().getMetrics(metrics);
if (Constants.IS_TABLET) {
height = metrics.widthPixels / 9 - (int) Util.pxFromDp(2, c);
} else {
height = metrics.widthPixels / 4 - (int) Util.pxFromDp(2, c);
}
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
} else {
imageView = (ImageView) convertView;
}
imageView.setScaleType(ScaleType.CENTER_CROP);
imageView.setAdjustViewBounds(true);
if (mTemplates.get(position).getResource() != 0) {
imageView.setImageResource(mTemplates.get(position).getResource());
} else {
imageView.setImageDrawable(mTemplates.get(position).getDrawableThumbnail());
}
imageView.setLayoutParams(new LayoutParams(height, height));
return imageView;
}

How to diasble the first item in the fragment list?

The code is as follows:
It should not be clickable at position 0. I used view.setClickable(false) but it was of no use.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// Get the textview and imageview
int c = ctx.getResources().getColor(R.color.expandlist);
int selectedColor = ctx.getResources().getColor(R.color.colorexpand);
View view = super.getView(position, convertView, parent);
TextView textView = (TextView) view.findViewById(R.id.cust_view);
Typeface tf = Typeface.createFromAsset(ctx.getAssets(),
"fonts/segoeuil.ttf");
ImageView imageView = (ImageView) view.findViewById(R.id.productImage);
textView.setTypeface(tf);
//Check the position so that proper values are assigned
if (position == 0) {
File sdCardRoot = Environment.getExternalStorageDirectory();
File yourDir = new File(sdCardRoot, "ProductImages" + "/Main" + ID
+ ".jpg");
if (yourDir.getPath() != null) {
Bitmap picture = BitmapFactory.decodeFile(yourDir.getPath());
int width = picture.getWidth();
int height = picture.getWidth();
float aspectRatio = (float) width / (float) height;
int newWidth = 149;
int newHeight = (int) (150 / aspectRatio);
picture = Bitmap.createScaledBitmap(picture, newWidth,
newHeight, true);
imageView.setImageBitmap(picture);
textView.setPadding(13, 200, 0, 0);
}
textView.setClickable(false);
imageView.setClickable(false);
view.setClickable(false);
} else {
if (position == 1) {
if (ProductItemListFragment.videos) {
textView.setBackgroundColor(selectedColor);
} else {
textView.setBackgroundColor(Color.TRANSPARENT);
}
} else if (position == 2) {
if (ProductItemListFragment.images) {
textView.setBackgroundColor(selectedColor);
} else {
textView.setBackgroundColor(Color.TRANSPARENT);
}
} else if (position == 3) {
if (ProductItemListFragment.story) {
textView.setBackgroundColor(selectedColor);
} else {
textView.setBackgroundColor(Color.TRANSPARENT);
}
} else {
textView.setBackgroundColor(Color.TRANSPARENT);
}
// hide/remove image
imageView.setVisibility(View.GONE); // or GONE, as you wish
textView.setPadding(13, 10, 0, 15);
}
return view;
}

setImageResource in GridView makes holes

Hello everyone I have a problem.
I want to do a GridView with a Custom Loyout so i used the layoutInflater and i did this:
private ImageView prima;
private ImageView seconda;
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if (convertView == null) {
LayoutInflater li = getLayoutInflater();
v = li.inflate(R.layout.icon, null);
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
prima = (ImageView) v.findViewById(R.id.imageView1);
prima.getLayoutParams().height = width / 3;
prima.getLayoutParams().width = width / 3;
seconda = (ImageView) v.findViewById(R.id.imageView2);
seconda.getLayoutParams().height = width / 3;
seconda.getLayoutParams().width = width / 3;
v.setLayoutParams(new GridView.LayoutParams(width / 3, width / 3));
v.setPadding(0, 0, 0, 0);
} else {
v = convertView;
}
prima.setImageResource(mThumbIds[position]); //mThumbIds[] is an array with R.drawable.vip_0_mini, R.drawable.a_1, R.drawable.b_2, R.drawable.c_3 .....
return v;
};
When i run my application the image are arranged random and there are many black space with no images.
What i did wrong ?

Your View and convertView are not linked.
Try with ViewHolder concept like this:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder v;
if (convertView == null) {
LayoutInflater li = getLayoutInflater();
convertView = li.inflate(R.layout.icon, null);
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
v = new ViewHolder();
v.prima = (ImageView) convertView .findViewById(R.id.imageView1);
v.prima.getLayoutParams().height = width / 3;
v.prima.getLayoutParams().width = width / 3;
v.seconda = (ImageView) convertView .findViewById(R.id.imageView2);
v.seconda.getLayoutParams().height = width / 3;
v.seconda.getLayoutParams().width = width / 3;
convertView .setLayoutParams(new GridView.LayoutParams(width / 3, width / 3));
convertView .setPadding(0, 0, 0, 0);
convertView.setTag(v);
} else {
v = (ViewHolder)convertView.getTag();
}
v.prima.setImageResource(mThumbIds[position]); //mThumbIds[] is an array with R.drawable.vip_0_mini, R.drawable.a_1, R.drawable.b_2, R.drawable.c_3 .....
//v.seconda
return convertView;
};
class ViewHolder{
ImageView prima;
ImageView seconda;
}

You forgot to apply images to
seconda = (ImageView) v.findViewById(R.id.imageView2);
prima.setImageResource(....);