how to flip between two images and change images based on states of a widget

Lets us discuss about how do we do image switching with the help of ViewFlipper class. And also some tips about using item-selector for selecting images based on various states ( of a widget like button, imageview )

What we are gonna achieve now is, we have two images, which needs to flipped or toggled between them.

We have two images stop & refresh.
we need to toggle the stop / refresh button based on a button click.

1 - In the layout --> main.xml

I am going to add the two imageviews ( stop & refresh imageviews ) under a tag .

<ViewFlipper android:id="@+id/imageflipper" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" > 

<ImageView 
android:layout_width="50dip"
android:layout_height="50dip"
android:src="@drawable/stop"/>

<ImageView 
android:layout_width="50dip"
android:layout_height="50dip"
android:src="@drawable/refresh"/>

</ViewFlipper>

2 - Two most attributes for ViewFlipper class is setting In & Out animations when a view is switched from one to another and next one is the time taken to do switch the views. This is will come into picture if you had set the setAutoStart(true)

        flipper=(ViewFlipper)findViewById(R.id.details); 
        flipper.setInAnimation(getApplicationContext(), R.anim.slide_right_in);
        flipper.setOutAnimation(getApplicationContext(), R.anim.slide_left_out);
        btn=(Button)findViewById(R.id.flip_me); 
        
        btn.setOnClickListener(new View.OnClickListener() { 
            public void onClick(View view) { 
                flipper.showNext(); 
            } 
        });

flipper.showNext() -> shows the next view in that ViewFlipper content. For us the initially when the screen is launched, Stop will be showed. When the button is clicked, it shows the refresh.
It circulates the two images for each button click.

Suppose, you had three imageviews in the <ViewFlipper> tag, each one will be showed next to next ( 1 to 2 to 3 ) again ( 3 to 1 to 2 to 3 ... ) on each button press.




In this example, i had set the imageview src. Which means you cannot change the image backgrounds, when clicked.

To achieve that I am gonna write a xml which handles the different states of images.( pressed, focused ) Basically this xml is a <selector>

More info http://developer.android.com/guide/topics/resources/available-resources.html

Note : Clicking the image wont flip the images in ViewFlipper.

Lets write a refresh_state.xml and put it in /drawable folder. [ keep the images refresh_pressed, refresh_default in drawable folder ]

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:drawable="@drawable/refresh_pressed">
    </item>

    <item android:state_focused="true"
          android:drawable="@drawable/refresh_default">
    </item>

    <item
            android:drawable="@drawable/refresh_default">
    </item>

</selector>

1 - android:state_pressed="true"
android:state_enabled="true"
This state implies that the widget is set Enabled (true ) and also pressed, it picks this image.

2 - android:state_pressed="true"
android:state_enabled="false"

This state implies that the widget is set Enabled (false ) ex. button is disabled like it is dimmed meaning no action for that,and if imageView is pressed, it picks this image.

3 - android:state_enabled="false"

This state implies that the widget is set Enabled (false ) ex. button is disabled like it is dimmed meaning no action for that, then it displays this image.

How to make the widget ( button, imageView etc ) to be disable or enabled in code.

this api sets the state ' state_enabled' to 'true' or 'false'

Imageview v = (ImageView) findViewById(R.id.refresh);
v.setEnabled(true);
v.setEnabled(false);

make changes in layout.xml file as below.

Remove the src settings and set the 'background' property to point the refresh_state.xml file created in above step.
- android:clickable="true" --> this has to be set otherwise, click events will not allowed for imageview

<ViewFlipper android:id="@+id/imageflipper" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" > 

<ImageView 
android:layout_width="50dip"
android:layout_height="50dip"
android:background="@drawable/stop_state"
android:clickable="true"/>

<ImageView 
android:layout_width="50dip"
android:layout_height="50dip"
android:background="@drawable/refresh_state"
android:clickable="true"/>

</ViewFlipper>