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.
Related
This is an often asked question but I just can't find the right solution for my case. I'm working on a news app and I want to fullscreen images in the news content when the user clicks the image, and another click will return to the news page. In my code, I have an ArrayList of data with the type of image or text, this method will go through the ArrayList and dynamically add an image view or text view according to the type. The code is like
public void setText(ArrayList<HashMap<String, String>> datas) {
for (HashMap<String, String> hashMap : datas) {
String type = hashMap.get("type");
if (type.equals("image")) {
int imagewidth = mTypedArray.getDimensionPixelOffset(R.styleable.customTextView_image_width, 100);
int imageheight = mTypedArray.getDimensionPixelOffset(R.styleable.customTextView_image_height, 100);
imageView = new ImageView(mContext);
params = new LayoutParams(imagewidth, imageheight);
params.gravity = Gravity.CENTER_HORIZONTAL;
imageView.setLayoutParams(params);
addView(imageView);
DownloadPicTask task = new DownloadPicTask(imageView, handler);
task.execute(hashMap.get("value"));
} else {
//Add some text view
}
I have tried simply changing the image to FIT_XY on click, but only the last spawned image enlarged, and I don't want other content to still remain around the image.
Perhaps I should set an onclick listener to each image, then create a new fullscreen activity? But I'm new to android and I don't know how to pass the image data correctly to fullscreen activity, and how to make another click back to the original content.
My problem
I have some dynamically created imageViews in which I put a drawable (xml vector, SVG). Everything seems to be OK on the android emulator but when I load the app on my phone there is no image visible. I know the image is there because if I increment its size, the views on the right at on the left move to the side. So there is an image!
What I have tried
Check memory of the phone
Use android:src and app:sourceCompat for the imageViews
Convert Drawable into Bitmap
Load another image (which is doing well in another window)
Put the drawable file in another drawable-folder
Change the layout type from RelativeLayout to LinearLayout
Read all the similar posts... No one resolves my problem :(
My class RankingDialog extends from AlertDialog.Builder
My layout is a RelativeLayout but I don't think that this causes the issue...
Create the views
for (int i = 0; i < LocalNames.size(); i++){
LinearLayout layout = new LinearLayout(context);
layout.setLayoutParams(layoutParams);
TextView position = new TextView(context);
TextView name = new TextView(context);
TextView record = new TextView(context);
position.setTypeface(font);
name.setTypeface(font);
record.setTypeface(font);
position.setText(i+1 + ".");
position.setGravity(Gravity.CENTER);
name.setGravity(Gravity.CENTER);
record.setGravity(Gravity.CENTER);
position.setLayoutParams(tvPosParams);
layout.addView(position);
name.setText(LocalNames.get(i));
name.setLayoutParams(tvNameParams);
layout.addView(name);
//Here is where I create and load the imageView/image
ImageView flag = new ImageView(context);
flag.setLayoutParams(imageParams);
flag.setImageResource(context.getResources().getDrawable(R.drawable.myImage);
layout.addView(flag);
record.setText(LocalPoints.get(i));
record.setLayoutParams(tvPointsParams);
layout.addView(record);
mainLinear.addView(layout);
}
----------Emulator (How it should look like)
How it looks on any real device...
I'm stuck for a couple of weeks here. I can't understand why this is happening...
I will apreciate any help
I am currently using the code here, albeit heavily modified to suit my needs
https://stackoverflow.com/a/28186621/4541217
such as I need to take an image from the camera as well as select from the gallery. I am also zooming the image.
This all works nicely, except for one issue. I lose things when I rotate the device.
I have
bTemp = null;
if(getLastNonConfigurationInstance() != null) {
bTemp = getLastNonConfigurationInstance();
}
in my onCreate, and an override...
#Override
#Deprecated
public Object onRetainNonConfigurationInstance() {
return bTemp;
}
I can make this return the image but I lose all of my stroke information.
From the example, I have tried saving the Uri, the alteredBitmap, the bitmap and the choosenImageView. However, none of these are working. If I take a photo, scribble on it, then before doing anything else, using the alteredBitmap, if I rotate, then I get the first set of strokes. However, nothing after that.
Can anyone help me to keep my stroke information on rotate please?
Learn about the activity lifecycle.
You need to override functions like onPause, onResume, and use the savedInstanceState.
I managed to work it out eventually, so for anyone else that is trying to do the same, here is what I did.
Following on from the example link in my opening post, in order to make it stick while rotating...
in the onRetainNonConfigurationInstance, keep the alteredBitmap. (This is in the Activity)
#Override
#Deprecated
public Object onRetainNonConfigurationInstance() {
return alteredBitmap;
}
then, in the onCreate of the activity...
if(getLastNonConfigurationInstance() != null) {
bmp = (Bitmap)getLastNonConfigurationInstance();
alteredBitmap = Bitmap.createBitmap(bmp.getWidth(), bmp.getHeight(), bmp.getConfig());
choosenImageView.setNewImage(alteredBitmap, bmp);
}
notice that the "bmp" is what was sent from alteredBitmap, and now alteredBitmap is the new image. This is then passed into the setNewImage in the DrawableImageView.
I'm trying to read if there is any image or not, then if image is null, I make the imageview in post card gone. If not then load it using Glide.
It works when I load the recyclerview for first time. But after some scrolls, those imageviews get invisible(View.gone)
onBindViewHolder:
DataSnapshot d = topics.get(position);
holder.text.setText(d.child("caption").getValue(String.class));
if (d.child("type").getValue(String.class)!=null&&d.child("type").getValue(String.class).equals("image")){
Glide.with(c).load(d.child("image").getValue(String.class)).placeholder(R.drawable.background).centerCrop().into(holder.image);
}
else{
holder.image.setVisibility(View.GONE);
}
holder.name.setText(d.child("username").getValue(String.class));
holder.category.setText(d.child("category").getValue(String.class));
long millis = System.currentTimeMillis();
long posttime = d.child("time").getValue(Long.class);
long timedifference = millis-posttime;
int days = (int) (timedifference / (1000*60*60*24));
if (days<2){
holder.time.setText("Today");
}else {
holder.time.setText(days+" days ago");
}
if (d.child("pic").exists()){
Glide.with(c).load(d.child("pic").getValue(String.class)).placeholder(R.drawable.background).centerCrop().into(holder.pic);
}
So where am I doing wrong?
It is better to set the visibility first in your case as you are passing the image view to Glide to setup.
We never know what will happen with the glide library update, in case it library wants to access the dimensions. Especially you are making it GONE in else part, which is a bit different from making INVISIBLE.
if (d.child("type").getValue(String.class)!=null&&d.child("type").getValue(String.class).equals("image")){
holder.image.setVisibility(View.VISIBLE);
Glide.with(c).load(d.child("image").getValue(String.class)).placeholder(R.drawable.background).centerCrop().into(holder.image);
}
else{
holder.image.setVisibility(View.GONE);
}
Try this code snippet :
if (d.child("type").getValue(String.class)!=null&&d.child("type").getValue(String.class).equals("image")){
Glide.with(c).load(d.child("image").getValue(String.class)).placeholder(R.drawable.background).centerCrop().into(holder.image);
holder.image.setVisibility(View.VISIBLE);
}
else{
holder.image.setVisibility(View.GONE);
}
When you are setting visibility gone it won't be visible by it self.
you need to visible it when glide load the image and gone when image
is null.
Add holder.image.setVisibility(View.VISIBLE); in if condition.
RecyclerView creates new views first time for first visible data objects and when you scroll to load other items it reuses those views which has been scrolled to top and reuses those views again for new data items.
So whatever the visibility status of that view was when it was created for the first time, it will get retain and will be used for the other items as well.
What you need to do is to set the view VISIBLE explicitly to show it again:
if (d.child("type").getValue(String.class)!=null&&d.child("type").getValue(String.class).equals("image")){
holder.image.setVisibility(View.VISIBLE)
Glide.with(c).load(d.child("image").getValue(String.class)).placeholder(R.drawable.background).centerCrop().into(holder.image);
}
else{
holder.image.setVisibility(View.GONE);
}
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.