{"id":1663,"date":"2016-05-04T04:29:34","date_gmt":"2016-05-04T04:29:34","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1663"},"modified":"2019-06-12T09:41:18","modified_gmt":"2019-06-12T09:41:18","slug":"imageswitcher","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/imageswitcher","title":{"rendered":"ImageSwitcher Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, ImageSwitcher is a specialized ViewSwitcher that contain ImageView type children. ImageSwitcher is available in Android from v1.6+.<\/p>\n

It is an element of transition widget which helps us to add transitions on the images. It is mainly\u00a0 useful to animate an image on screen. ImageSwitcher switches smoothly between two images and thus provides a way of transitioning from one Image to another through appropriate animations.<\/p>\n

\"ImageSwitcher<\/p>\n

\n

Basic\u00a0ImageSwitcher code in XML:<\/strong><\/h4>\n
<ImageSwitcher\r\n    android:id=\"@+id\/simpleImageSwitcher\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\/><\/pre>\n
\n
Steps for Implementation of ImageSwitcher:<\/strong><\/h4>\n
    \n
  1. Get the reference of ImageSwitcher in class using findViewById() method, or you can also create an object dynamically.<\/li>\n
  2. Set a factory using switcherid.setFactory()<\/li>\n
  3. Set an in-animation using switcherid.setInAnimation()<\/li>\n
  4. Set an out-animation using switcherid.setOutAnimation()<\/li>\n<\/ol>\n
    \n
    Important Methods Of ImageSwitcher:<\/strong><\/h4>\n
    Let\u2019s we discuss some important methods of ImageSwitcher that may be called in order to manage the ImageSwitcher.<\/p>\n
    1. setFactory(ViewFactory factory):<\/strong><\/span> This method is used to create a new view for ImageSwitcher. By using this method we create a new ImageView and replace the old view with that.<\/p>\n
    Below code\u00a0create a new view using setFactory method.<\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ get reference of ImageSwitcher\r\n\r\n\/\/ Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked\r\nimageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {\r\n\r\npublic View makeView() {\r\n\/\/ TODO Auto-generated method stub\r\n\r\n\/\/ Create a new ImageView and set it's properties\r\nImageView imageView = new ImageView(getApplicationContext());\r\nimageView.setScaleType(ImageView.ScaleType.FIT_CENTER);\r\nimageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));\r\nreturn imageView;\r\n}\r\n });<\/pre>\n
    2. setImageDrawable(Drawable drawable): <\/strong><\/span>This method is used to set an image in\u00a0ImageSwitcher. In this we pass an image for Drawable.<\/p>\n
    Below we set image in ImageSwitcher by using setImageDrawable method.<\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ initiate a ImageSwitcher\r\nsimpleImageSwitcher.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); \/\/ set drawable image in ImageSwitcher\r\n<\/pre>\n
    \"setImageDrawable<\/p>\n
    3. setImageResource(int resid): <\/strong><\/span>This method is also used to set an image in\u00a0image switcher. The image is passed in the form of integer id.<\/p>\n
    Below we set image in ImageSwitcher by using setImageDrawable method.<\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ initiate a ImageSwitcher\r\nsimpleImageSwitcher.setImageResource(R.drawable.ic_launcher); \/\/ set image resource in ImageSwitcher\r\n<\/pre>\n
    4. setImageURI(Uri uri): <\/strong><\/span>This method is also used to set an image in\u00a0image switcher. The image is passed in the form of URI.<\/p>\n
    Below we set Image in ImageSwitcher from raw folder using Uri:<\/p>\n
    Before using below code first create a raw name folder in res directory and save an image name image1 in that folder.<\/em><\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ get reference of ImageSwitcher\r\nsimpleImageSwitcher.setImageURI(Uri.parse(\"android.resource:\/\/\" + getPackageName() + \"\/\" + R.raw.image1)); \/\/ set Image in ImageSwitcher from raw folder using Uri\r\n<\/pre>\n
    5. loadAnimation(Context context, int id):<\/span> <\/strong>This method is used whenever we need to define an object of Animation class through AnimationUtils class by calling a static method loadAnimation.<\/p>\n
    Below we create an object of Animation class and load an animation by using AnimationUtils class.<\/p>\n
    \/\/ load an animation by using AnimationUtils class\r\nAnimation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);\r\n Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);\r\n<\/pre>\n
    6. setInAnimation(Animation inAnimation):<\/strong><\/span> This method is used to set the animation of the appearance of the object on the screen.<\/p>\n
    Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the Animation on ImageSwitcher.<\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ initiate a ImageSwitcher\r\nAnimation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); \/\/ load an animation\r\nsimpleImageSwitcher.setInAnimation(in); \/\/ set in Animation for ImageSwitcher\r\n<\/pre>\n
    \"setInAnimation<\/p>\n
    7. setOutAnimation(Animation outAnimation):<\/strong><\/span> This method does the opposite of setInAnimation().<\/p>\n
    Whenever we use set a new Image in ImageView, it first removes the old view using an animation set with the setOutAnimation() method, and then places the new one using the animation set by the setInAnimation() method.<\/p>\n
    Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the out Animation on ImageSwitcher<\/p>\n
    ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); \/\/ get reference of ImageSwitcher\r\nAnimation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); \/\/ load an animation\r\nsimpleImageSwitcher.setOutAnimation(out); \/\/ set out Animation for ImageSwitcher\r\n<\/pre>\n
    \"setOutAnimation<\/p>\n
    \n
    Attributes of ImageSwitcher:<\/strong><\/h4>\n
    Now let\u2019s we discuss some common attributes of a ImageSwitcher that helps us to configure it in our layout (xml).<\/p>\n
    1. Id:<\/span>\u00a0<\/strong>id attribute is used to uniquely identify a ImageSwitcher.<\/p>\n
    Below we set the id of the ImageSwitcher that is used to uniquely identify it.<\/p>\n
    <ImageSwitcher\r\nandroid:id=\"@+id\/simpleImageSwitcher\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\" \/> <!--\u00a0 id of ImageSwitcher that is used to uniquely identify it -->\r\n<\/pre>\n
    2. padding: <\/strong><\/span>This attribute is used to set the padding from left, right, top or bottom side of a ImageSwitcher.<\/p>\n