Android: make dynamically added imageviews full screen on click - java

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.

Related

Can't resize an ImageView from a dynamic declaration

I'm writing a chess app and I've been able to resize my pieces to match the square size, that itself depends on screen size.
Problem is, it relies on XML. And I need to be able to do it dynamically (adding or removing pieces on the screen after each move)
This is working :
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(sq_size, sq_size);
ImageView klt60 = (ImageView)findViewById(R.id.klt60);
klt60.setImageResource(R.drawable.klt60); // setting the image in the layout
klt60.setLayoutParams(layoutParams); // allows resizing
But this is not : if I declare my imageView without using XML, it just won't resize, and also it won't move when I play a move with that piece.
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(sq_size, sq_size);
ImageView klt60 = new ImageView(this); // Create a new image (several pawns to display, for example)
klt60.setImageResource(R.drawable.klt60); // setting the image in the layout
klt60.setLayoutParams(layoutParams); // allows resizing
My view just extends extends AppCompatActivity. Thanks for help

ImageView shows on Emulator but NOT on device. Image on device is invisible

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

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.

Android Saving/Displaying Drawn Images In View

I'm fairly new to the android platform and I overrode a CustomView's onDraw method with canvas.drawPath(path, paint) in order to produce drawings on the page.
However, I attempted to save this drawing to be used in another activity (final page) where multiple saved drawings can be displayed side by side, but I ran into frequent issues with no images appearing on my final page.
I was wondering how to handle this scenario. I read posts on SO about storing the drawing as a bitmap and reconstructing this later. So I used Convert view to bitmap on Android
public static Bitmap getBitmapFromView(View view) { ...
to extract a bitmap from my custom view containing the original drawing. Then, I created a canvas with the extracted bit map using
Bitmap map = getBitmapFromView(cView);
Canvas canvas = new Canvas(map);
and appended this canvas to a static list of Canvas objects.
In the activity used to display all drawings side by side, I had
RelativeLayout layout = (RelativeLayout) findViewById(R.id.activity_display);
for (int x=0; x < canvasList.size(); x++) {
Canvas currCanvas = canvasList.get(x)
View view = new View(this);
view.draw(currCanvas);
layout.addView(canvasList.get(x));
}
There is definitely something wrong with my approach, but I have failed to identify it.
So, have you tried displaying the bitmapRecieved in getBitmapFromView to verify that it works?
Then the next step would be to store it in a static class, and try to display it in another acitvity to ensure storing works as planned.
And on your last Code Snippet: your are creating a View, drawing onto its canvas and then adding the canvas to the layout? without further research to logical thing to do, seems to add the view to the layout or am i wrong?
Try using Bundle savedInstance. Instead of using canvasList, I will use a bitmap array:
#Override
protected void onSaveInstanceState(Bundle state) {
super.onSaveInstanceState(state);
state.putSerializable("starttime", startTime);
for(int i=0; i<bmp.size; i++){
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bmp[i].compress(Bitmap.CompressFormat.PNG, 100, stream);
byte[] byteArray = stream.toByteArray();
state.putByteArray("img"+i, byte[] value);
}
#Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
if ((bundle != null)
for(int i=0; bundle.getByteArray("img"+i) != null; i++) {
//Load byteArray back to bitmap array
}
}
I haven't tested the code, so there might be some issues. There is a lot of ways to achieve what you want, you can also save in a drawable or save as a picture at user's client.
Good luck, let me know if it works!

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.

Categories

Resources