Develop Reference

Picasso: adding multiple images dynamically in flipper for 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);
}

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?

Create animation in imageviews

I have an imageview with a default image. Now when I try to click it, I want it to animate that displays 4 frames of images. How could I accomplish this, I tried a simpler approach (more of a dumb approach) by changing the imageresource 4 times, as expected the image changes so fast that the animating image effect is not visible. Any ideas?
I tried this approach:
Gem = (ImageView)v;
Gem.setImageResource(com.example.gems.R.drawable.bd1);
Gem.postDelayed(new Runnable() {
public void run() {
Gem.setImageResource(com.example.gems.R.drawable.bd2);
Gem.postDelayed(new Runnable() {
public void run() {
Gem.setImageResource(com.example.gems.R.drawable.bd3);
Gem.postDelayed(new Runnable() {
public void run() {
Gem.setImageResource(com.example.gems.R.drawable.bd4);
Gem.postDelayed(new Runnable() {
public void run() {
}
}, 500);
}
}, 500);
}
}, 500);
}
}, 500);
It worked, but is there a better way to this without coding too much lines? I have 25 kinds of images and each image has 4 frames.
EDIT:
I tried using xml transition files:
Java file:
Resources res = this.getResources();
Gem = (ImageView)v;
TransitionDrawable transition;
transition = (TransitionDrawable)
res.getDrawable(R.drawable.blue_diamond_animation);
Gem.setImageDrawable(transition);
transition.startTransition(3000);
xml file:
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bd1"></item>
<item android:drawable="#drawable/bd2"></item>
<item android:drawable="#drawable/bd3"></item>
<item android:drawable="#drawable/bd4"></item>
<item android:drawable="#drawable/invi"></item>
</transition>
This seems to work, but I don't want to draw this images in a transition. I want to change the background in a transition. I tried changing this android:drawable to android:drawable but it doesn't work.

It turns out that there is an exact class for this: AnimationDrawable
Basically, just add frames with the other pictures to use in the animation to the AnimationDrawable object and specify how long they should display using addFrame(Drawable frame, int duration)
Then set the ImageView to display whatever image it should start with and set the background to the AnimationDrawable you just made using setBackgroundDrawable(Animation)
Lastly, start the animation in the onClick listener
EDIT: FOR EXAMPLE
AnimationDrawable ad = new AnimationDrawable();
ad.addFrame(getResources().getDrawable(R.drawable.image1), 100);
ad.addFrame(getResources().getDrawable(R.drawable.image2), 500);
ad.addFrame(getResources().getDrawable(R.drawable.image3), 300);
ImageView iv = (ImageView) findViewById(R.id.img);
iv.setBackgroundDrawable(animation);
And then in your onClick listener, just call ad.start

It depends on what you are trying to accomplish. You have not given enough info to go on
The viewproperty animator is really the easiest thing to use have a look. It can also be used with older API's using nineoldandroids jar (google it)
http://developer.android.com/reference/android/view/ViewPropertyAnimator.html
The ObjectAnimator and ValueAnimator are also available similar and slightly more difficult to implement
http://developer.android.com/reference/android/animation/ObjectAnimator.html
http://developer.android.com/reference/android/animation/ValueAnimator.html
Have a look at the APIdemos in the sample packs there are a few examples mainly using the ValueAnimator.
http://developer.android.com/tools/samples/index.html
There are also Sprites to consider but it is basically a bitmap , you can user the timer obect to choreograph

How to do frame-by-frame animation on Android?

I am trying to find out how to do png frame-by-frame animation at a good frame rate...
I have a bunch of pngs(probably 1500 png poses) and I need to play them one-by-one (just like a talking app, take tom cat as an example)
I`ve already tried SurfaceView, normal View, AnimationDrawable and also ImageView(with a thread setting the background with a sleep(33)[for a 30fps]), but none of these ways made a good frame rate compared to tom cat on bad CPU phones (like HTC Desire A).
Its also good to say that I've already added Options to set up the in SampleSize for the images, in case it needs more memory or processing speed.
I think the unique way is loading up an amount of pngs , draw on the SurfaceView and while it plays load more pngs and recycle the other bitmaps...
Anyone can help me with that? At least with some code?
Thanks!

here you go... try this... :)
create an XML file like this on ur values folder
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="frames">
<item>#drawable/pak1_1</item>
<item>#drawable/pak1_2</item>
<item>#drawable/pak1_3</item>
<item>#drawable/pak1_4</item>
<item>#drawable/pak1_5</item>
</array>
</resources>
Now try this code:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
TypedArray FrameImages = res.obtainTypedArray(R.array.frames);
animation = new AnimationDrawable();
for (int i = 0; i < 1500; i++) {
Drawable drawable = FrameImages.getDrawable(i);
animation.addFrame(drawable, 33);
}
animation.setOneShot(false);
ImageView imageAnim = (ImageView) findViewById(R.id.img);
imageAnim.setBackgroundDrawable(animation);
// run the start() method later on the UI thread
imageAnim.post(new Starter());
}
class Starter implements Runnable {
public void run() {
animation.start();
}
}

How to retrieve an image from ImageView when Click on that image?

i have a ImageView in the layout, when i click on the image i want to get that image into a variable and replace with another image in this ImageView. please help me..

The onClick Listener will give you a View, that's the ImageView that was clicked. Cast it to an ImageView and do whatever you want with it.

in this example i have take previous image in Drawable and replace i with new image. if you set any imageview to image which stay in drawable variable(d) then use :: setBackgroundDrawable(d); is useful
public void onClick(View v){
ImageView i;
i = (ImageView) findViewById(R.id.img);
Drawable d = i.getBackground();
i.setBackgroundResource(R.id.secondImage);
}