Android Image Switcher

Android image switcher provides an animation over images to transition from one image to another. In order to use image switcher, we need to implement ImageSwitcher component in .xml file.

The setFactory() method of ImageSwitcher provide implementation of ViewFactory interface. ViewFactory interface implements its unimplemented method and returns an ImageView.

Example of Image Switcher

Create activity_main.xml and content_main.xml file in layout folder.

Place some images in drawable folder which are to be switch.

activity_main.xml

File: activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:fitsSystemWindows="true"  
8.     tools:context="com.example.test.imageswitcher.MainActivity">  
9.   
10.     <android.support.design.widget.AppBarLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:theme="@style/AppTheme.AppBarOverlay">  
14.   
15.         <android.support.v7.widget.Toolbar  
16.             android:id="@+id/toolbar"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="?attr/actionBarSize"  
19.             android:background="?attr/colorPrimary"  
20.             app:popupTheme="@style/AppTheme.PopupOverlay" />  
21.   
22.     </android.support.design.widget.AppBarLayout>  
23.     <include layout="@layout/content_main" />  
24.   
25. </android.support.design.widget.CoordinatorLayout>  

content_main.xml

File: content_main.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:paddingBottom="@dimen/activity_vertical_margin"  
8.     android:paddingLeft="@dimen/activity_horizontal_margin"  
9.     android:paddingRight="@dimen/activity_horizontal_margin"  
10.     android:paddingTop="@dimen/activity_vertical_margin"  
11.     app:layout_behavior="@string/appbar_scrolling_view_behavior"  
12.     tools:context="com.example.test.imageswitcher.MainActivity"  
13.     tools:showIn="@layout/activity_main">  
14.   
15.     <TextView  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:text="Image Switcher Example"  
19.   
20.         android:id="@+id/textView"  
21.         android:layout_alignParentTop="true"  
22.         android:layout_centerHorizontal="true" />  
23.   
24.     <ImageSwitcher  
25.         android:id="@+id/imageSwitcher"  
26.         android:layout_width="match_parent"  
27.         android:layout_height="250dp"  
28.         android:layout_marginBottom="28dp"  
29.         android:layout_marginTop="40dp" />  
30.   
31.     <Button  
32.         android:layout_width="wrap_content"  
33.         android:layout_height="wrap_content"  
34.         android:text="Next"  
35.         android:id="@+id/button"  
36.         android:layout_marginBottom="47dp"  
37.         android:layout_alignParentBottom="true"  
38.         android:layout_centerHorizontal="true" />  
39. </RelativeLayout>  

Activity class

File: MainActivity.java

1. package com.example.test.imageswitcher;  
2.   
3. import android.os.Bundle;  
4. import android.support.v7.app.AppCompatActivity;  
5. import android.support.v7.widget.Toolbar;  
6. import android.view.View;  
7. import android.widget.Button;  
8. import android.widget.ImageSwitcher;  
9. import android.widget.ImageView;  
10. import android.widget.ViewSwitcher;  
11.   
12. import android.app.ActionBar;  
13. import android.view.animation.Animation;  
14. import android.view.animation.AnimationUtils;  
15.   
16.   
17. public class MainActivity extends AppCompatActivity {  
18.     ImageSwitcher imageSwitcher;  
19.     Button nextButton;  
20.   
21.     int imageSwitcherImages[] =   
22.       {R.drawable.cpp, R.drawable.c_sarp, R.drawable.jsp, R.drawable.mysql, R.drawable.hadoop};  
23.   
24.     int switcherImageLength = imageSwitcherImages.length;  
25.     int counter = -1;  
26.   
27.     @Override  
28.     protected void onCreate(Bundle savedInstanceState) {  
29.         super.onCreate(savedInstanceState);  
30.         setContentView(R.layout.activity_main);  
31.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
32.         setSupportActionBar(toolbar);  
33.   
34.         imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);  
35.         nextButton = (Button) findViewById(R.id.button);  
36.   
37.         imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {  
38.             @Override  
39.             public View makeView() {  
40.                 ImageView switcherImageView = new ImageView(getApplicationContext());  
41.                 switcherImageView.setLayoutParams(new ImageSwitcher.LayoutParams(  
42.                         ActionBar.LayoutParams.FILL_PARENT, ActionBar.LayoutParams.FILL_PARENT  
43.                 ));  
44.                 switcherImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);  
45.                 switcherImageView.setImageResource(R.drawable.hadoop);  
46.                 //switcherImageView.setMaxHeight(100);  
47.                 return switcherImageView;  
48.             }  
49.         });  
50.   
51.         Animation aniOut = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);  
52.         Animation aniIn = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);  
53.   
54.        imageSwitcher.setOutAnimation(aniOut);  
55.        imageSwitcher.setInAnimation(aniIn);  
56.   
57.         nextButton.setOnClickListener(new View.OnClickListener() {  
58.             @Override  
59.             public void onClick(View v) {  
60.                 counter++;  
61.                 if (counter == switcherImageLength){  
62.                     counter = 0;  
63.                     imageSwitcher.setImageResource(imageSwitcherImages[counter]);  
64.                 }  
65.                 else{  
66.                     imageSwitcher.setImageResource(imageSwitcherImages[counter]);  
67.                 }  
68.             }  
69.         });  
70.     }  
71.   
72. }  

Output