{"id":1496,"date":"2016-04-16T05:56:35","date_gmt":"2016-04-16T05:56:35","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1496"},"modified":"2019-06-12T12:09:57","modified_gmt":"2019-06-12T12:09:57","slug":"zoomcontrols","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/zoomcontrols","title":{"rendered":"Zoom Controls Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, Zoom Controls class display simple set of controls that is used for zooming and provides callback to register for events. Zoom Controls has two buttons ZoomIn and ZoomOut which are used to control the zooming functionality.<\/p>\n

\"ZoomControls<\/p>\n

Zoom Controls code in XML:<\/strong><\/p>\n

<ZoomControls\r\nandroid:id=\"@+id\/simpleZoomControl\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\" \/>\r\n<\/pre>\n
\n
Important Methods Of Zoom Controls:<\/strong><\/h4>\n
Now let\u2019s discuss some common methods which are used to configure ZoomControls in our application.<\/p>\n
1. hide():<\/strong><\/span> This method is used to hide the ZoomControls from the screen. In some cases we need to hide the ZoomControls from the screen so that we use this function.<\/p>\n
2. show():<\/strong><\/span> This method is used to show the ZoomControls which\u00a0we\u00a0hide from the screen by using hide method.<\/p>\n
Below we show the use of hide and show methods of ZoomControls:<\/p>\n
Step 1:<\/strong> In this example\u00a0first in\u00a0xml file we display ZoomControls with two buttons hide and show which are used to hide and show the ZoomControls.<\/p>\n
\"hide<\/p>\n
xml code of above image UI:<\/strong><\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\".MainActivity\">\r\n\r\n<ZoomControls\r\nandroid:id=\"@+id\/simpleZoomControl\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerHorizontal=\"true\"\r\nandroid:layout_marginTop=\"50dp\" \/>\r\n\r\n<Button\r\nandroid:id=\"@+id\/show\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:layout_margin=\"20dp\"\r\nandroid:background=\"#0f0\"\r\nandroid:text=\"Show\"\r\nandroid:textColor=\"#fff\" \/>\r\n\r\n<Button\r\nandroid:id=\"@+id\/hide\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_below=\"@+id\/show\"\r\nandroid:layout_margin=\"20dp\"\r\nandroid:background=\"#f00\"\r\nandroid:text=\"Hide\"\r\nandroid:textColor=\"#fff\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
Step 2:<\/strong> Now in\u00a0Java Class we use hide() and show() methods to hide and show Zoom Controls option.<\/p>\n
\/*Add below setContentView() method in Oncreate()*\/\r\n        final ZoomControls simpleZoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\n        Button show = (Button) findViewById(R.id.show); \/\/ initiate show Button\r\n        Button hide = (Button) findViewById(R.id.hide); \/\/ initiate hide Button\r\n\/\/ perform setOnClickListener on show button\r\n        show.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\/\/ show a ZoomControls\r\n                simpleZoomControls.show();\r\n            }\r\n        });\r\n\/\/ perform setOnClickListener on hide button\r\n        hide.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\/\/ hide a ZoomControls\r\n                simpleZoomControls.hide();\r\n\r\n            }\r\n        });<\/pre>\n
Output:<\/strong><\/p>\n
Now run the App and\u00a0you can see ZoomControls can be hided and showed again from user.<\/p>\n
\"show<\/p>\n
3. setOnZoomInClickListener(OnClickListenerlistener):<\/strong><\/span> This is a listener event automatically called when we click on the Zoom In button of ZoomControls. In this listener we add the code to\u00a0zoom in image.<\/p>\n
Below we show the use of setOnZoomInClickListener in android.<\/p>\n
final ZoomControls simpleZoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\n\r\n\/\/ perform\u00a0 setOnZoomInClickListener event on ZoomControls\r\nsimpleZoomControls.setOnZoomInClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View v) {\r\n\/\/ add zoom in code here\r\n}\r\n});\r\n<\/pre>\n
4. setOnZoomOutClickListener(OnClickListenerlistener):<\/strong><\/span> This is a listener event automatically called when we click on the Zoom Out button of ZoomControls. In this listener we add the code for zoom out a image.<\/p>\n
Below we show the use of setOnZoomOutClickListener in android.<\/p>\n
final ZoomControls simpleZoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\n\r\n\/\/ perform\u00a0 setOnZoomOutClickListener event on ZoomControls\r\nsimpleZoomControls.setOnZoomOutClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View v) {\r\n\/\/ add zoom out code here\r\n}\r\n});\r\n<\/pre>\n
5. setIsZoomInEnabled(boolean isEnabled):<\/strong><\/span> This method is used to enable or disable the zoom In button of ZoomControls. In this method we set a Boolean value either\u00a0true or false. By default it has true value but sometime after a limit of zoom in we need to disable the zoom in functionality i.e.\u00a0after\u00a0that we didn\u2019t need more zoom in.<\/p>\n
Below we set the false value for setIsZoomInEnabled that disable zoom in button of ZoomControls.<\/p>\n
ZoomControls simpleZoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\nsimpleZoomControls.setIsZoomInEnabled(false); \/\/ disable zoom in button of ZoomControls\r\n<\/pre>\n
6. setIsZoomOutEnabled(boolean isEnabled):<\/strong><\/span> This method is used to enable or disable the zoom Out button of ZoomControls. In this method we set a Boolean value means true or false. By default it has true value but sometime after a limit of zoom out we need to disable the zoom out functionality means at that time we didn\u2019t need more zoom out.<\/p>\n
Below we set the false value for setIsZoomOutEnabled that disable zoom out button of ZoomControls.<\/p>\n
ZoomControls simpleZoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\nsimpleZoomControls.setIsZoomOutEnabled(false); \/\/ disable zoom out button of ZoomControls\r\n<\/pre>\n
\n
Attributes Of\u00a0<\/strong>Zoom Controls in Android<\/strong>:<\/strong><\/h4>\n
Now let\u2019s \u00a0we discuss some important\u00a0attributes that helps us to configure a ZoomControls in our xml file.<\/p>\n
1. id:\u00a0<\/strong><\/span>This attribute is used to uniquely identify a ZoomControls.<\/p>\n
<ZoomControls\r\nandroid:id=\"@+id\/simpleZoomControl\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\" \/> <!--\u00a0 id of ZoomControls used to uniquely identify it -->\r\n<\/pre>\n
2. background:\u00a0<\/strong><\/span>This attribute is used to set the background of a ZoomControls. We can set a color or a drawable in the background of a ZoomControls.<\/p>\n
Below we set the black color for the background of ZoomControls.<\/p>\n
<ZoomControls\r\nandroid:id=\"@+id\/simpleZoomControl\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:background=\"#000\" \/>\r\n<!-- set black color in the background of a ZoomControls -->\r\n<\/pre>\n
\"background<\/p>\n
Setting background in ZoomControls In Java class:<\/strong><\/p>\n
ZoomControls simpleZoomControls = (ZoomControls)findViewById(R.id.simpleZoomControl); \/\/ initiate a ZoomControls\r\nsimpleZoomControls.setBackgroundColor(Color.BLACK); \/\/ set black color in the background of ZoomControls\r\n<\/pre>\n
3. padding:<\/span>\u00a0<\/strong>This\u00a0attribute is used to set the padding from left, right, top or bottom side of a ZoomControls .<\/p>\n