1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 1/8

Android Image Switcher Tutorial

Advertisements

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

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

<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. Itssytnax 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 unimplementedmethod 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 ofAnimation class through AnimationUtilities class by calling a static method loadAnimation. Its syntax isgiven below:

Animation in =

AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);

imageSwitcher.setInAnimation(in);

imageSwitcher.setOutAnimation(out);

Previous Page

HOME JAVA PHP Python Ruby Perl HTML CSS Javascript MySQL C++ UNIX MORE...

Android Tutorial

Android Home

Android Overview

Android Environment Setup

Android Architecture

Application Components

Hello World Example

Android Resources

Android Activities

Android Services

Android Broadcast Receivers

Android Content Providers

Android Fragments

Android Intents/Filters

Android User Interface

Android UI Layouts

Android UI Controls

Android Event Handling

Android Styles and Themes

Android Custom Components

Android Advanced Concepts

Android Drag and Drop

Android Notifications

Location Based Services

Android Sending Email

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 2/8

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

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

Sr.No Method & 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 basicapplication 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.

Steps Description

1

You will use Eclipse IDE to create an Android application and name it as ImageSwitcherunder a package com.example.imageswitcher. While creating this project, make sure youTarget SDK and Compile With at the latest version of Android SDK to use higher levels ofAPIs.

2 Modify src/MainActivity.java file to add necessary code.

3 Modify 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 andverify the results

Following is the content of the modifed main activity filesrc/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 {

Android Sending SMS

Android Phone Calls

Publishing Android Application

Android Useful Examples

Android Alert Dialoges

Android Animations

Android Audio Capture

Android AudioManager

Android Auto Complete

Android Best Practices

Android Bluetooth

Android Camera

Android Clipboard

Android Custom Fonts

Android Data Backup

Android Developer Tools

Android Emulator

Android Facebook Integration

Android Gestures

Android Google Maps

Android Image Effects

Android Internal Storage

Android JetPlayer

Android JSON Parser

Android Linkedin Integration

Android Loading Spinner

Android Localization

Android Login Screen

Android MediaPlayer

Android Multitouch

Android Navigation

Android Network Connection

Android NFC Guide

Android PHP/MySQL

Android Progress Circle

Android ProgressBar

Android ImageSwitcher

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 3/8

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 Push Notification

Android RenderScript

Android RSS Reader

Android Screen Cast

Android SDK Manager

Android Sensors

Android Session Management

Android Shared Preferences

Android SIP Protocol

Android Spelling Checker

Android SQLite Database

Android Support Library

Android Testing

Android Text to Speech

Android TextureView

Android Twitter Integration

Android UI Deign

Android UI Patterns

Android UI Testing

Android WebView Layout

Android Wi-Fi

Android Widgets

Android XML Parsers

Android Useful Resources

Android Quick Guide

Android Useful Resources

Selected Reading

Developer's Best Practices

Effective Resume Writing

Computer Glossary

Who is Who

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 4/8

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>

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 5/8

</application>

</manifest>

Let's try to run our Image Switcher application we just modified. I assume you had created your while doing environment setup. To run the app from Eclipse, open one of your project's activity files and

click Run 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:

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 towardsleft. It is shown below:

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 6/8

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

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 7/8

Advertisements

Copyright © 2014 by tutorialspoint. All Rights Reserved.

Previous Page Print Version

Eclipse plugin XMLEditorwww.oxygenxml.com

30 day Free trial of <oXygen/> Native XML

Databases support

ASP.NET | jQuery | AJAX | ANT | JSP | Servlets | log4j | iBATIS | Hibernate | JDBC | Struts |

1/20/2014 Android Image Switcher Tutorial

http://www.tutorialspoint.com/android/android_imageswitcher.htm 8/8