{"id":1687,"date":"2016-05-03T05:34:02","date_gmt":"2016-05-03T05:34:02","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1687"},"modified":"2019-06-12T12:04:12","modified_gmt":"2019-06-12T12:04:12","slug":"viewswitcher","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/viewswitcher","title":{"rendered":"ViewSwitcher Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, ViewSwitcher is a sub class of ViewAnimator that is used for switching between views. It is an element of transition widget which helps us to add transitions on the views. It is mainly useful to animate a view on screen. ViewSwitcher switches smoothly between two views (i.e. TextView, ImageView or any layout) and thus provides a way of transitioning from one view to another through appropriate animations. You can create views for a ViewSwitcher widget either using a\u00a0factory\u00a0or by adding them on your own.<\/p>\n

\"ViewSwitcher<\/p>\n

Important Note:<\/strong><\/span> ViewSwitcher can only have two child views of which only one is shown at a time. If you have more than two child views in ViewSwitcher,\u00a0java.lang.IllegalStateException of “Can’t add more than 2 views to a ViewSwitcher” error will come.<\/p>\n

\n

Basic\u00a0ViewSwitcher XML code:<\/strong><\/h4>\n
<ViewSwitcher\r\n\r\nandroid:id=\"@+id\/viewswitcher\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\" >\r\n\r\n<!--\u00a0\u00a0 Add Two View\u2019s Here -- >\r\n\r\n<\/ViewSwitcher>\r\n<\/pre>\n
\n
Steps for Implementation of ViewSwitcher:<\/strong><\/h4>\n
    \n
  1. Get the reference of ViewSwitcher in class using findViewById() method, or you can also create an object dynamically.<\/li>\n
  2. Set a factory using switcherid.setFactory() method<\/li>\n
  3. Set an in-animation using switcher.setInAnimation()<\/li>\n
  4. Set an out-animation using switcher.setOutAnimation()<\/li>\n<\/ol>\n
    \n
    Important Methods Of ViewSwitcher:<\/strong><\/h4>\n
    Let\u2019s we discuss some important methods of ViewSwitcher that may be called in order to manage the ImageSwitcher.<\/p>\n
    1. getNextView():<\/strong><\/span> This method return the next view to be displayed in ViewSwitcher. This method returns the view id of next view to be displayed.<\/p>\n
    Below we get the id of next view to be displayed in ViewSwitcher.<\/p>\n
    ViewSwitcher\u00a0simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); \/\/ get the reference of ViewSwitcher\r\nView nextView=simpleViewSwitcher.getNextView(); \/\/ get next view to be displayed\r\n<\/pre>\n
    2. reset():<\/strong><\/span> This method is used to reset the ViewSwitcher to hide all of the existing views and to make it think that the first time animation has not yet played. Sometime we need to reset the ViewSwitcher on click event so that it behaves like first time animation has not yet played.<\/p>\n
    Below we reset the ViewSwitcher to hide all of the existing views.<\/p>\n
    ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); \/\/ get the reference of ViewSwitcher\r\n\r\nsimpleViewSwitcher.reset(); \/\/ reset the ViewSwitcher to hide all of the existing views\r\n<\/pre>\n
    3. showNext():<\/strong><\/span> This method is used to show the next view of ViewSwitcher. As we discussed earlier ViewSwitcher can only have two child views of which only one is shown at a time, so this method is used to show the next views.<\/p>\n
    Below we perform click event on button and call showNext() method to show the next view in ViewSwitcher.<\/p>\n
    ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); \/\/ get the reference of ViewSwitcher\r\n\r\nButton btnNext=(Button) findViewById(R.id.buttonNext); \/\/ get the reference of Button\r\n\/\/ set Click event on next button\r\nbtnNext.setOnClickListener(new View.OnClickListener() {\r\n\r\npublic void onClick(View v) {\r\n\/\/ TODO Auto-generated method stub\r\n\/\/ show the next view of ViewSwitcher\r\nsimpleViewSwitcher.showNext();\r\n}\r\n});\r\n<\/pre>\n
    4. showPrevious():<\/strong><\/span> This method is used to show the Previous view of ViewSwitcher. As we discussed earlier ViewSwitcher can only have two child views of which only one is shown at a time, so this method is used to show the Previous view.<\/p>\n
    Below we perform click event on button and call showPrevious() method to show the previous view in ViewSwitcher.<\/p>\n
    ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); \/\/ get the reference of ViewSwitcher\r\n\r\nButton btnPrevious=(Button) findViewById(R.id.buttonPrevious); \/\/ get the reference of Button\r\n\/\/ set Click event on next button\r\nbtnPrevious.setOnClickListener(new View.OnClickListener() {\r\n\r\npublic void onClick(View v) {\r\n\/\/ TODO Auto-generated method stub\r\n\/\/ show the previouus view of ViewSwitcher\r\nsimpleViewSwitcher.showPrevious();\r\n}\r\n});\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 AnimationUtilities 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
    Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); \/\/ load an animation by using AnimationUtils class\r\n<\/pre>\n
    6. setInAnimation(in):<\/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 ViewSwitcher.<\/p>\n
    ViewSwitcher simpleViewSwitcher=(ViewSwitcher)findViewById(R.id. simpleViewSwitcher); \/\/ initiate a ViewSwitcher\r\nAnimation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); \/\/ load an animation\r\nsimpleViewSwitcher.setInAnimation(in); \/\/ set in Animation for ViewSwitcher\r\n<\/pre>\n
    7. setOutAnimation(out):<\/strong><\/span> This method does the opposite of setInAnimation().<\/p>\n
    whenever we show the next view, 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 ViewSwitcher<\/p>\n
    ViewSwitcher simpleViewSwitcher=(ViewSwitcher)findViewById(R.id. simpleViewSwitcher); \/\/ get reference of ViewSwitcher\r\nAnimation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); \/\/ load an animation\r\nsimpleViewSwitcher.setOutAnimation(out); \/\/ set out Animation for ViewSwitcher\r\n<\/pre>\n
    8. setFactory(ViewFactory factory):<\/strong><\/span> This method is used to create a new view for ViewSwitcher. By using this method we create a new view and replace the old view with that.<\/p>\n
    Below we show how to create a new view using setFactory method.<\/p>\n
    ViewSwitcher simpleViewSwitcher=(ViewSwitcher)findViewById(R.id. simpleViewSwitcher); \/\/ get reference of ViewSwitcher\r\n\r\n\/\/ Set the ViewFactory of the ViewSwitcher that will create a new view ( ImageView ) object when asked\r\nsimpleViewSwitcher.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});\r\n<\/pre>\n
    \n
    Attributes of ViewSwitcher:<\/strong><\/h4>\n
    Now let\u2019s we discuss some common attributes of a ViewSwitcher 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 ViewSwitcher.<\/p>\n
    <ViewSwitcher\r\n\r\nandroid:id=\"@+id\/viewswitcher\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\" > <!--\u00a0 id of ViewSwitcher that is used to uniquely identify it -->\r\n\r\n<!--\u00a0\u00a0 Add View\u2019s Here -- >\r\n\r\n<\/ViewSwitcher>\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 ViewSwitcher.<\/p>\n