Android Image Switcher Tutorial

Advertisements


Sometimes you don't want an image to appear abruptly on the screen, rather you want to apply some kind of animation to the image when it transitions from one image to another. This is supported by android in the form of ImageSwitcher.

An image switcher allows you to add some transitions on the images through the way they appear on screen. In order to use image Switcher, you need to define its XML component first. Its syntax is given below:

<ImageSwitcher
   android:id="@+id/imageSwitcher1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true"
   android:layout_centerVertical="true" >
</ImageSwitcher>

Now we create an intance of ImageSwithcer in java file and get a reference of this XML component. Its sytnax is given below:

private ImageSwitcher imageSwitcher;
imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1);

The next thing we need to do implement the ViewFactory interface and implement unimplemented method that returns an imageView. Its syntax is below:

imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      return myView;
   }
}

The last thing you need to do is to add Animation to the ImageSwitcher. You need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation. Its syntax is given below:

Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);         

The method setInAnimaton sets the animation of the appearance of the object on the screen whereas setOutAnimation does the opposite. The method loadAnimation() creates an animation object.

Apart from these methods, there are other methods defined in the ImageSwitcher class. They are defined below:

Sr.NoMethod & description
1setImageDrawable(Drawable drawable)
Sets an image with image switcher. The image is passed in the form of bitmap
2setImageResource(int resid)
Sets an image with image switcher. The image is passed in the form of integer id
3setImageURI(Uri uri)
Sets an image with image switcher. THe image is passed in the form of URI
4ImageSwitcher(Context context, AttributeSet attrs)
Returns an image switcher object with already setting some attributes passed in the method
5onInitializeAccessibilityEvent (AccessibilityEvent event)
Initializes an AccessibilityEvent with information about this View which is the event source
6onInitializeAccessibilityNodeInfo (AccessibilityNodeInfo info)
Initializes an AccessibilityNodeInfo with information about this view

Example

The below example demonstrates some of the image switcher effects on the bitmap. It crates a basic application that allows you to view the animation effects on the images.

To experiment with this example , you need to run this on an actual device.

StepsDescription
1You will use Eclipse IDE to create an Android application and name it as ImageSwitcher under a package com.example.imageswitcher. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add necessary code.
3Modify the res/layout/activity_main to add respective XML components
4Run the application and choose a running android device and install the application on it and verify the results

Following is the content of the modifed main activity file src/com.example.imageswithcer/MainActivity.java.

package com.example.imageswitcher;

import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageButton;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

   private ImageButton img;
   private ImageSwitcher imageSwitcher;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      img = (ImageButton)findViewById(R.id.imageButton1);
      imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1);

      imageSwitcher.setFactory(new ViewFactory() {

   @Override
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      myView.setScaleType(ImageView.ScaleType.FIT_CENTER);
      myView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.
      FILL_PARENT,LayoutParams.FILL_PARENT));
      return myView;
       }

   });

   }

   public void next(View view){
      Toast.makeText(getApplicationContext(), "Next Image", 
      Toast.LENGTH_LONG).show();
      Animation in = AnimationUtils.loadAnimation(this,
      android.R.anim.slide_in_left);
      Animation out = AnimationUtils.loadAnimation(this,
      android.R.anim.slide_out_right);
      imageSwitcher.setInAnimation(in);
      imageSwitcher.setOutAnimation(out);
      imageSwitcher.setImageResource(R.drawable.ic_launcher);
   }
   public void previous(View view){
      Toast.makeText(getApplicationContext(), "previous Image", 
      Toast.LENGTH_LONG).show();
      Animation in = AnimationUtils.loadAnimation(this,
      android.R.anim.slide_out_right);
      Animation out = AnimationUtils.loadAnimation(this,
      android.R.anim.slide_in_left);
      imageSwitcher.setInAnimation(out);
      imageSwitcher.setOutAnimation(in);
      imageSwitcher.setImageResource(R.drawable.ic_launcher);
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

Following is the modified content of the xml res/layout/activity_main.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >

   <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="54dp"
      android:onClick="next"
      android:src="@android:drawable/ic_menu_send" />

   <ImageSwitcher
      android:id="@+id/imageSwitcher1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true" >
   </ImageSwitcher>

   <ImageButton
      android:id="@+id/imageButton2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:layout_marginBottom="85dp"
      android:onClick="previous"
      android:src="@android:drawable/ic_menu_revert" />

</RelativeLayout>

Following is the content of AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.imageswitcher"
   android:versionCode="1"
   android:versionName="1.0" >

   <uses-sdk
      android:minSdkVersion="8"
      android:targetSdkVersion="17" />

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name="com.example.imageswitcher.MainActivity"
         android:label="@string/app_name" >
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>

</manifest>

Let's try to run our Image Switcher application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window:

Android Image Switcher Tutorial

Now if you will look at your device screen , you will see the two buttons.

Now just select the upper button that right arrow. An image would appear from right and move towards left. It is shown below:

Android Image Switcher Tutorial

Now tap on the below button, that will bring back the previous image with some transition. It is shown below:

Android Image Switcher Tutorial

Advertisements
Advertisements