Develop Reference

onClick logic based on image displayed

How do you change what onClick is doing based on the image that is displayed when clicked? I have an ImageView that changes the image to one of a set randomly in an onClick method. I would like this to set a score based on the image when clicked, and am unsure of how to accomplish this. I'm currently updating the score when the image changes as part of the prototype, but for actual game play this won't work. Not looking for the answer, so much as being pointed in the right direction. My first thought was to pull the image name as a string and compare that, but doing that every time an image is clicked seems inefficient. I can post the onClick method for the ImageView if requested, but it's not really relevant. Any help is appreciated.
Edit: To clarify, I'm not having any particular problem. I'm just wrong on my approach. What I have updates the score when the image changes, and I want to complete this based on the image that is being clicked. Should this be done with string comparison, or is there a better way to complete this? I haven't been able to find anything related to this so far.
final ImageView block1 = (ImageView) findViewById(R.id.coin1);
block1.setOnClickListener(new View.OnClickListener() {
#SuppressLint("SetTextI18n")
#Override
public void onClick(View view) {
final TypedArray imgs = getResources().obtainTypedArray(R.array.apptour);
final Random rand = new Random();
final int rndInt = rand.nextInt(imgs.length());
final int resID = imgs.getResourceId(rndInt, 0);
TextView id = (TextView) findViewById(R.id.ID);
block1.setImageResource(resID);
if (rndInt == 0 || rndInt == 1) {
score++;
id.setText("Score: " + score);
} else if (rndInt == 2) {
score += 5;
id.setText("Score: " + score);
} else {
id.setText("Game Over");
}
}
});

Error RecyclerView with Picasso Android

I have recyclerview that contains image.
#Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
// Get element from your dataset at this position and replace the contents of the view
// with that element
if(mEntities.get(position).url.equals("kosong")) {
Log.e("LOAD", "KOSONG " + position);
viewHolder.getTextDataView().setText(mEntities.get(position).data);
}
else{
Log.e("LOAD", "ISI " + position);
Picasso.with(mContext).load(mEntities.get(position).url).skipMemoryCache().into(viewHolder.imageView);
viewHolder.getTextDataView().setText(mEntities.get(position).data);
}
}
Im success to make the image loaded to recyclerview in correct list, but somehow it duplicate in another list in that recyclerview. Why ?
Thanks for your answer :)

So from what I understand if your url contains "kosong" you shouldn't display any image right?
However you're not clearing the imageview of it's previous image. Keep in mind that listviews/recycler views recycle their views. So if you display an image on your imageview and later on (scrolling up and down) that imageview is recycled it will contain the last image that was set to it.
Remember to clear the image when you don't want to use it (if(mEntities.get(position).url.equals("kosong"))) using something like:
viewHolder.imageView.setImageResource(android.R.color.transparent);
So it should be something like this:
if(mEntities.get(position).url.equals("kosong")) {
Log.e("LOAD", "KOSONG " + position);
viewHolder.getTextDataView().setText(mEntities.get(position).data);
//we don't need to display an image here however it's possible that our listview contains another image from a recycled row. Let's clear it
viewHolder.imageView.setImageResource(android.R.color.transparent);
}
else{
Log.e("LOAD", "ISI " + position);
Picasso.with(mContext).load(mEntities.get(position).url).skipMemoryCache().into(viewHolder.imageView);
viewHolder.getTextDataView().setText(mEntities.get(position).data);
}

Images getting mixed up in listview

I am developing a chat application, where i have implemented image sending. So without the images everything works fine. But now I'm facing issues in displaying the images that are sent / received. For that what i've done is downloaded the image first and saved it in external storage. My idea was simple fetch the bitmap set it in an imageview on the getView method. Nothing wrong with fetching the image and displaying but listview ruins everthing.
This is my code-
ListView getView()
ViewHolder holder = null;
if(convertView == null ){
convertView = inflater.inflate(R.layout.chat_list, null);
holder = new ViewHolder();
holder.mMsg = (TextView) convertView.findViewById(R.id.text);
holder.mDate = (TextView) convertView.findViewById(R.id.text1);
holder.mLinLay=(LinearLayout) convertView.findViewById(R.id.linSide1);
holder.mRelLay=(RelativeLayout) convertView.findViewById(R.id.relSide);
holder.img=(ImageView)convertView.findViewById(R.id.image);
holder.progCircle=(ProgressBar)convertView.findViewById(R.id.pbHeaderProgress);
convertView.setTag(holder);
} else{
holder = (ViewHolder) convertView.getTag();
}
holder.position=position;
holder.img.setTag(position+"img");
HashMap<String, String> hm = list.get(position);
String date=hm.get("date");
long l = Long.parseLong(date);
long unixTime = System.currentTimeMillis();
CharSequence datedate=DateUtils.getRelativeTimeSpanString(l, unixTime, 1);
String status = hm.get("status");
String who = hm.get("who");
if(hm.get("message").contains("[[pic_message]]"))
{
String picName=hm.get("message").replace("[[pic_message]]", "");
final String picPath1=Environment.getExternalStorageDirectory()+"/App/sent_pics/"+picName+".jpg";
File file = new File(picPath);
if(file.exists())
{
new AsyncTask<ViewHolder, Void, Bitmap>() {
private ViewHolder v;
Bitmap bm;
#Override
protected Bitmap doInBackground(ViewHolder... params) {
v = params[0];
bm = decodeSampledBitmapFromResource(picPath1,100,100);
return bm;
}
#Override
protected void onPostExecute(Bitmap result) {
super.onPostExecute(result);
if (v.img.getTag().equals(position+"img")) {
v.img.setImageBitmap(result);
}
}
}.execute(holder);
}else{
holder.img.setImageBitmap(null);
}
}else{
holder.img.setImageBitmap(null);
Spannable msg =getSmiledText(getApplicationContext(),hm.get("message"));
holder.mMsg.setText(msg);
}
holder.mDate.setText(datedate);
return convertView;
What the problem is-
The listview shows up, but the images are displayed at random listview items. I searched a lot for this kind of problem, tried them but still no luck. The asyntask code is from Google- Use A Background Thread.. As you see from above i didn't set any holder.mMsg.setText(msg); but still whenever the images are shown they are accompanied by a msg, which is not desirable. Also the scrolling is kindda laggy when the images are shown. I have seen many messaging apps, they all run so smoothly, and the items are never mixed up. So what do they use.Also, while googling this problem, one answer suggested that we should remove the converView if else and then everything will be fine. But that will have performance issues which i don't want.
So my question is what should i do? How do the chat apps like, hangouts,bbm,whatsapp achieve this so smoothly?
EDIT
The pictures are displayed with no problem but the main problem is that they are diplayed at random orders.
Like this- i scroll till the image message, they are displayed. Then I again scroll and now the image is displayed in other listview item. My guess is that the same view(which originallly holds the image) is now being used by other, but the image stays there. How can i fix that ? And make the listview smooth (even with images) like the IM apps?

It's because Android ListView reuses Views, so while your Asynctask execute the donInBackground the user is already doing something else and you code don't know anything about it. (So it will put the image)
I would use Picasso to avoid the problem and let someone else handle your problem.
I handled this problem in my application (a contact phone) using:
A cache, to avoid to send multiple requests for the same image even when i already have in memory his image
I send a WeakReference<> to the Asynctask so when it's done check if the ImageView is still valid and put the bitmap inside it. Update the cache.
(Specific to me) Since sometimes i could happen that a contact don't have a photo i just created another List with all users without a photo (so i don't try to download it)
Everytime a .getview is called check if the image is inside the cache and if it's inside the cache put directly it, or start the asynctask.
Bitmap bitmap = cache.get(number);
if (bitmap == null) {
Log.d(TAG, "I will download image for " + name + ".");
// i set a dummy image to avoid to show the wrong picture
holder.contactPhoto.setImageResource(R.drawable.ic_action_person);
loadUserProfilePhoto(number, holder.contactPhoto);
}
else {
// show it directly
Log.d(TAG, "I already have " + name + " in cache.");
holder.contactPhoto.setImageBitmap(bitmap);
}
If you see, it could happen that it shows another picture instead of the user-photo while it's still loading it so i set a dummy picture instead of the old photo.
It's not the best implementation, but it's to show you that it could be very hard to implement it by yourself and do it right.
Read Picasso documentation and see how it could implement it in your code (it's simple, it's just one line.)

The issue is with listview which continuously keep refreshing it.
So your all code is fine, but just set default image in holder.img instead of making it null holder.img.setImageBitmap(null);
And may be in async too, you need set default_image while your image is being loaded.

If you want display images on the fly I think you should use SurfaceView. It is a lot faster and has a higher refresh rate. I made a video streaming application where I tried to display each video frame on the ImageView but that failed. But when I tried out SurfaceVIew it worked out fine.

bug z-index ViewPager with PageTransformer doesn't work with getChildDrawingOrder

I'm looking for a solution since too long now and I feel stuck. So I decided to write my first post on stackoverflow :)
I'm trying to do a CoverFlow for my app in android 4.0 and higher, after some research I decided to do that with a ViewPager, to increase the OffscreenPageLimit, and to put a negative margin and in bonus a little PageTransformer for the effect.
So my bug is about the z-index when the margin is too negative one image overlay an other, because of the drawing order, the image on the left is on the top and it's not pretty at all.
See bug here --> http://img33.imageshack.us/img33/2448/r1l1.jpg
So after some research the solution appear to be to overwrite the getChildDrawingOrder method in my ViewPager class. I did it like that :
private void setChildDrawingOrder() {
int count = getChildCount();
positions = new SparseIntArray(count);
for (int i=0, j=0 ; i<count ; i++) {
if (i == position) {
positions.put(count-1, i);
} else {
j++;
positions.put(count-1-j, i);
}
}
mNeedsToSetChildDrawingOrder = false;
}
#Override
protected int getChildDrawingOrder(int childCount, int i) {
if(i == 0 && mNeedsToSetChildDrawingOrder) setChildDrawingOrder();
return positions.get(i);
}
Where positions is an SparseIntArray, where the item on the top got the higher value (childCount-1). I fill it in the onPageSelected (method implement with OnPageChangeListener on my ViewPager) to get the position of the item that i want it to be on the top.
#Override
public void onPageSelected(int position) {
if (lastPosition != position) {
lastPosition = position;
ViewPager viewPager = ((MainActivity)mAdapterContext).getViewPager();
viewPager.setPosition(position);
}
}
I can't see where is my mistake! I also tried something with bringChildToFront in the onPageSelected without any success, probably because the PageTransformer redraw everything after the onPageSelected is called.
Any idea ?
Thanks
EDIT 15/10/13 :
I edit my code because I didn't catch what the method do very weel! It's "to get the index of the child to draw for that iteration." and not "when should I draw child i?" (thx to this post)
I also had some NullPointerException` because the count where not everytime the same so I move it into my ViewPager.
It's way better but still have some drawing bug! My positions SparseIntArray look good so I don't understand. It seems to appear kind of randomly...

View thums images with GridView, scrolling is very slow

Currently I am in training, I am working on a file management application online.
I have a problem with the scrolling when I try to display many images (100 images or 200) with a thumbs GridView scrolling is very very long.
I download the images from the server I set drawable and layout parameter I set for the small image here is my code:
public void openImageWithCache(boolean loopTry, final ImageView iconView,
final LayoutParams layoutParams, final View v, final Node o) {
//if (v.getTag() == previewT){
try {
String prefix = (true ? "thumb_mini" : "");
File cacheFile = new File(AjaXplorerApplication.getCacheFolder(),
(prefix) + previewT.getUuidPath());
if (cacheFile.exists()) {
iconView.setImageDrawable(Drawable.createFromPath(cacheFile
.getPath()));
iconView.setLayoutParams(layoutParams);
//iconView.invalidate();
//loopTry = true;
return;
}

Are the thumb images large? If so minimize them to the smallest size you can.
In the getView method in the adapter, if the view is not null do not call "new" , just change the image, according to the position.