Picasso: adding multiple images dynamically in flipper for Android. - android

I'm new to picasso.using it i want to dynamically fetch images and be able to update the images whenever some new link has been updated. currently i'm only able to do this for a single Image. the code that i'm using is :
picasso.with(this).load(url).into(image1)
where url is the url to the image and image1 is an imageview. i want to diaplay 5 images into 5 different imageviews, iteratively. how can i do that ?
also i wan to delete the cached images of picasso, so that i can update it with newer images. any help would be appreciated.

In your xml just add only this,
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ViewFlipper>
lets Say your URL Images Array like this.
String ImgAry[] = {"url1","url2","url3","url4","url5"}
In your onCreate()
viewFlipper = (ViewFlipper) findViewById(R.id.flipper);
for(int i=0;i<ImgAry.length;i++)
{
// create dynamic image view and add them to ViewFlipper
setImageInFlipr(ImgAry[i]);
}
method in Your Activity file
private void setImageInFlipr(String imgUrl) {
ImageView image = new ImageView(getApplicationContext());
picasso.with(this).load(imgUrl).into(image);
viewFlipper.addView(image);
}

private void setImageInFlipr(String imgUrl) {
ImageView image = new ImageView(getApplicationContext());
picasso.get().load(imgUrl).into(image);
viewFlipper.addView(image);
}

Related

How can I use ViewFlipper like a slider

I have a layout for recyclerview adapter that it's like a instagram. That means it has a slider for images and like button and etc.
Now I want to load multiple images in the slider and clients should change images with dragging like instagram exactly.
First I used PosterSlider library, but its problem is that doesn't have scale type so I cannot manage images size.
So now I wanna try ViewFLipper, but my problem is I don't know how can I use ViewFlipper like a slider.
That means how can I change images by dragging in ViewFLipper?
If you have another idea for changing picture, I will be glad to hear it.
This is my code for ViewFlipper that I know it is wrong, because it shows just one Image and it doesn't have any code for changing picture by dragging:
try {
JSONArray jsonArray = new JSONArray(newsLetterList.get(position).Jsonsrc);
for(int i = 0;i < jsonArray.length(); i++){
setImageInFlipper(jsonArray.getString(i),holder);
}
} catch (JSONException e) {
e.printStackTrace();
}
setImageInFLipper method:
private void setImageInFlipper(String imgUrl,NewsLetterViewHolder holder){
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(context).load(imgUrl).into(imageView);
holder.slider.addView(imageView);
}
You can take some reference from here. They have implemented the same viewflipper slide both with next(flip) button and without using any button. Hope that helps!

ViewFlipper change image dynamically

I have a task to show 5 images periodically. I'm using ViewFlipper for this. The images are loaded dynamically from gallery or camera.
I got stuck with modifying the image source at runtime i.e user should be able to change the current image he is viewing.
I can get the current index, now I want to change the image source from gallery at run time
// code to initialise the flipper
vf_profile_slide = (ViewFlipper) this.findViewById(R.id.profile_slide_vf);
int gallery_grid_Images[]={R.drawable.image1,R.drawable.image2};
for(int i=0;i<gallery_grid_Images.length;i++)
{
setFlipperImage(gallery_grid_Images[i]);
}
/* tempBmp = BitmapFactory.decodeFile(imgPath);
addNewImageToFlipper(mContext, tempBmp);
*/
vf_profile_slide.setAutoStart(true);
vf_profile_slide.setFlipInterval(5000);
vf_profile_slide.startFlipping();
//On button click i m feteching the image index
PROFILE_INDEX = vf_profile_slide.getDisplayedChild();
//calling this function...
private void addImageToFlipperAt(Context mContext,int index,Bitmap bm)
{
ImageView iv_new = (ImageView) findViewById(vf_profile_slide.getChildAt(index).getId());
iv_new.setImageBitmap(bm);
vf_profile_slide.addView(iv_new,index);
}
the new image is added successfully.... but i want the current image at that index gone... that is not happening .... tell me where i m going wrong
Is this possible?

How to insert images in horizonatal scrollview in custom adapter?

I am using custom adapter for listview where I put 4 sections.
Now i have photo section in which I put HorizontalScrollView. I got bunch of images from server so put them in string array.
if (postDisplay.getImageUrl().equals("null")) {
holder.photo_layout.setVisibility(View.GONE);
} else {
holder.photo_layout.setVisibility(View.VISIBLE);
String SharePhotos=postDisplay.getImageUrl();
String temp=SharePhotos.replace("small", "big");
String[] SharePicArray=temp.split("~");
for (int i=0; i<SharePicArray.length; i++) {
ImageView imageview = new ImageView(activity);
imageview.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
imageLoader.DisplayImage(SharePicArray[i], imageview);
String URL=SharePicArray[i];
holder.image_layout.addView(imageview);
}
}
When I run this code first time it gives me right solution but when I scroll down and then scroll up to see again the images it again create another imageview.
If there is any other solution please let me know.
If there is any other view I can take to show images from server.

Adding images to LinearLayout in code in Android

I have a list of images that I need to show on the page one after another and all that bellow some text. I have LinearLayout in xml of the file where I added the part related to that text (some TextViews). As I need to call service to get image urls I add images to that LinearLayout in code. I use this code to get image using its url and to add it to the layout (in the onPostExecute part of the AsyncTask implementation).
/**
* Download image using image url and show it in ImageView
*/
private class DownloadImageTask extends AsyncTask<Void, Void, Bitmap> {
public DownloadImageTask() {
super();
}
protected Bitmap doInBackground(Void... arg0) {
String urlDisplay = mDocumentUrls.get(mDocumentIdx);
mDocumentIdx = mDocumentIdx + 1;
Bitmap bmp = null;
try {
InputStream in = new java.net.URL(urlDisplay).openStream();
bmp = BitmapFactory.decodeStream(in);
} catch (Exception e) {
e.printStackTrace();
}
return bmp;
}
protected void onPostExecute(Bitmap result) {
// We add a new ImageView to the LinearLayout of the page and set it
// source to the downloaded image
ImageView newImageView = new ImageView(getActivity());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(convertDpToPx(20), convertDpToPx(5), convertDpToPx(20), 0);
newImageView.setImageBitmap(result);
mDocumentDetailsLayout.addView(newImageView, params);
//Next image
if(mDocumentIdx < mDocumentUrls.size())
new DownloadImageTask().execute();
}
}
And this is the xml of the page (the part related to LinearLayout)
<ScrollView
android:id="#+id/details_form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/splashScreenGray
android:visibility="gone" >
<LinearLayout
android:id="#+id/details_form_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/splashScreenGray"
android:clickable="false"
android:orientation="vertical" ...
Images are shown on the page, but I have two problems:
1. I can't center them horizontally (prtsc1.png)
2. When my phone is in portrait mode I have this margins (top margin on the first image and margins between images) that I don't have when my phone is in portrait mode (I don't need them) - compare prtsc1.png and prtsc2.png.
I tried everything, but I am not sure what I am doing wrong.
Hope this could help...for u r imageView to getCentrally Aligned...
img.setScaleType(ImageView.ScaleType.CENTER_CROP);
Any problem persist please let me know...
I suggest you try Relative layout instead of LinearLayout. LinearLayout has a brain of its own, that is good otherwise but sometimes it can mess things up.
You should change the parameters of the image to align itself below the text
for the second one, if you are using a linearlayout, you should make the width match_parent and padding.

display mulitple images one after the other in my ImageView

Currently my code displays a single image from a file path (in SDCard). This is in onCreate() method for now:
ImageView imgView01 = (ImageView) findViewById(R.id.imageView1);
File dir = new File("/sdcard/WallpapersHD/");
File file[]=dir.listFiles();
for (int i=0;i<file.length;i++) {
Drawable d = (Drawable) Drawable.createFromPath(file[i].toString());
imgView01.setImageDrawable(d);
}
I want to display all the images in that particular folder one after the other using a time delay of say 5 seconds. If I can create a new drawable for each image in the folder, How do I do it? and how do I change the image in ImageView to set that drawable's path?
You could use an ImageSwitcher for convenience, and then do:
imageSwitcher.postDelayed(
new Runnable() {
#Override
public void run() {
i++;
imageSwitcher.setImageURI(Uri.fromFile(file[i]));
imageSwitcher.postDelayed(this, millisBetweenImages);
}
},
millisBetweenImages);
it also has a setImageDrawable-method if you want to keep your images as Drawables.
Create a drawable for each image, and then keep changing the image in your ImageView, perhaps in a Handler or TimerTask.

Categories

Resources