Zoom control in android

ZoomControls in Android with Example

In Android, Zoom Control is a class that has some set of methods that are used to control the zoom functionality. It has two buttons that are used to control the zoom functionality (ie Zoom In and Zoom Out). Zoom Control Class has been deprecated in API Version 29. The functionalities offered by ZoomControls class are handled in a better way through Custom view and custom layouts then dedicated zoom controls widgets.

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more, please refer Complete Interview Preparation Course.

Important Methods of Zoom Controls

• Let say ZoomControls be the reference of ZoomControl class which is being used to call the different method of ZoomControls class.

ZoomControl zoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl);

• show(): This method is used to show the zoom controls on the App UI.

• hide(): This method is used to hide the zoom controls on the App UI.

• setOnZoomInClickListener(OnClickListenerlistener): This method is invoked when Zoom In button is pressed. It is used to customize the UI that will be shown when the zoom-in button is being pressed.

public void onClick(View v) <

// add the code which will be executed when

// the zoom in button has been pressed

• setOnZoomOutClickListener(OnClickListenerlistener): This method is invoked when Zoom Out is pressed. It too works in the same manner as the setOnZoomInClickListener() method works, but it minimizes ie converges the UI.

public void onClick(View v) <

// add the code which will be executed when

// the zoom out button has been pressed

• setIsZoomInEnabled(boolean isEnabled): It is one of the methods of Zoom Controls which is used to enable or disable the zoom-in functionality.

// it will enable the zoomIn button

// it will disable the zoomIn button

• setIsZoomOutEnabled(boolean isEnabled): It is also one of the methods of Zoom Controls, which is used to enable or disable the zoom out functionality.

// it will enable the zoomOut button

// it will disable the zoomOut button

• setZoomSpeed(long speed): This is used to set the zoom speed of the zoom that is being done with zoom controls

Important Attributes of Zoom Controls

• id: This attribute is used to give the zoom controls a unique identity.

• background: This is used to give the background color to the zoom controls.

• padding: This is used to give padding on the sides of zoom controls.

Example

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using both Java and Kotlin language.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Источник

Zoom control in android

This is a great tutorial

I am using this code in fragments but
java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.widget.ZoomControls.setOnZoomInClickListener(android.view.View$OnClickListener)’

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ZoomControls;

import abdulrehman.islamictasawwufsilsalanaqshbandiyaowaisia.R;
import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher;

/**
* A simple <@link Fragment>subclass.
*/
public class HomeFragment extends Fragment <
TextView textView;
ImageView imageView;
ZoomControls simpleZoomControls;
public HomeFragment() <
// Required empty public constructor
>

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) <
View view =inflater.inflate(R.layout.fragment_home, container, false);

final ImageView imageView = view.findViewById(R.id.HazratJeeIntro1);

ImageView imageView1 = view.findViewById(R.id.hazrajee1);
PhotoViewAttacher photoView2 = new PhotoViewAttacher(imageView1);
photoView2.update();

final TextView textView = view.findViewById(R.id.HazratJeeDescEng);

imageView.setOnTouchListener(new View.OnTouchListener() <
@Override
public boolean onTouch(View v, MotionEvent event) <
simpleZoomControls.show();
return false;
>
>);
// perform setOnZoomInClickListener event on ZoomControls
simpleZoomControls.setOnZoomInClickListener(new View.OnClickListener() <
@Override
public void onClick(View v) <
// calculate current scale x and y value of ImageView
float x = imageView.getScaleX();
float y = imageView.getScaleY();
// set increased value of scale x and y to perform zoom in functionality
imageView.setScaleX((float) (x + 1));
imageView.setScaleY((float) (y + 1));
// display a toast to show Zoom In Message on Screen
Toast.makeText(getContext(),”Zoom In”,Toast.LENGTH_SHORT).show();
// hide the ZoomControls from the screen
simpleZoomControls.hide();
>
>);
// perform setOnZoomOutClickListener event on ZoomControls
simpleZoomControls.setOnZoomOutClickListener(new View.OnClickListener() <
@Override
public void onClick(View v) <
// calculate current scale x and y value of ImageView
float x = imageView.getScaleX();
float y = imageView.getScaleY();
// set decreased value of scale x and y to perform zoom out functionality
imageView.setScaleX((float) (x – 1));
imageView.setScaleY((float) (y – 1));
// display a toast to show Zoom Out Message on Screen
Toast.makeText(getContext(),”Zoom Out”,Toast.LENGTH_SHORT).show();
// hide the ZoomControls from the screen
simpleZoomControls.hide();
>
>);
return view;
>
>

sir how i can implement these zoom controls in textview. /

Источник

Implement Zoom In or Zoom Out in Android

Zoom In and Zoom Out animations are used to enlarge and reduce the size of a view in Android applications respectively. These types of animations are often used by developers to provide a dynamic nature to the applications. Users also feel the changes happening in the application by watching these kinds of animations.

XML Attributes of Scale Tag

The characteristics of Zoom In and Zoom Out animations are defined in the XML files by using scale tag.

XML attribute	Description
android:duration	Used to define the duration of the animation in millisecond
android:fromXScale	Used to set initial size of the view in X-axis
android:fromYScale	Used to set initial size of the view in Y-axis
android:pivotX	To define the X coordinate of the point about which the object is being zoom in/out
android:pivotY	To define the Y coordinate of the point about which the object is being zoom in/out
android:toXScale	Used to set final size of the view in X-axis
android:toYScale	Used to set final size of the view in Y-axis

How to Add Zoom In/Out Animation in Android

The following example demonstrates the steps involved in implementing Zoom In and Zoom Out animation to an image file. An image file will be added in the activity using ImageView.

Note: Following steps are performed on Android Studio version 4.0

Step 1: Create new project

1. Click on File, then New => New Project.
2. Select language as Kotlin.
3. Select the minimum SDK as per your need.

Источник

Android Zoom In / Out Animations with Examples

In android, Zoom In and Zoom Out animations are used to change the appearance and behavior of the objects over a particular interval of time. The Zoom In and Zoom Out animations will provide a better look and feel for our applications.

Generally, the animations are useful when we want to notify users about the changes happening in our app, such as new content loaded or new actions available, etc.

To create an animation effect on the objects in our android application, we need to follow below steps.

Create XML File to Define Animation

We need to create an XML file that defines the type of animation to perform in a new folder anim under res directory (res à anim à zoom_in.xml) with the required properties. In case, if anim folder does not exist in res directory, create a new one.

To use Zoom In or Zoom Out animations in our android applications, we need to define new XML files with tag like as shown below.

For Zoom In animation, we need to set android :pivotX= «50%» and android :pivotY= «50%» to perform the zoom from the centre of the element. Also, we need to use fromXScale , fromYScale attributes to define the scaling of an object and we need keep these values lesser than toXScale , toYScale like as shown below.

xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» >
scale
xmlns: android = «http://schemas.android.com/apk/res/android»
android :duration= «1000»
android :fromXScale= «2»
android :fromYScale= «2»
android :pivotX= «50%»
android :pivotY= «50%»
android :toXScale= «4»
android :toYScale= «4» >
scale >
set >

Zoom Out animation is same as Zoom In animation but fromXScale , fromYScale attribute values must be greater than toXScale , toYScale like as shown below.

xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» >
scale
android :duration= «2500»
android :fromXScale= «1.0»
android :fromYScale= «1.0»
android :pivotX= «50%»
android :pivotY= «50%»
android :toXScale= «.2»
android :toYScale= «.2»/>
set >

Once we are done with creation of required animation XML files, we need to load those animation files using different properties.

Android Load and Start the Animation

In android, we can perform animations by using AnimationUtils component methods such as loadAnimation(). Following is the code snippet of loading and starting an animation using loadAnimation() and startAnimation() methods.

Animation aniSlide = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. zoom_in );
img .startAnimation(aniSlide);

If you observe above code snippet, we are adding an animation to the image using loadAnimation() method. The second parameter in loadAnimation() method is the name of our animation xml file.

Here we used another method startAnimation() to apply the defined animation to imageview object.

Now we will see how to implement zoom in and zoom out animations for imageview on button click in android applications with examples.

Android Zoom In & Zoom Out Animations Example

Following is the example of implementing a zoom in and zoom out animations to change the image size on button click in android applications.

Create a new android application using android studio and give names as ZoomInOutExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

xml version= «1.0» encoding= «utf-8» ?>
RelativeLayout xmlns: android = «http://schemas.android.com/apk/res/android»
android :layout_width= «match_parent»
android :layout_height= «match_parent»
android :paddingLeft= «10dp»
android :paddingRight= «10dp» >
ImageView android :id= «@+id/imgvw»
android :layout_width= «wrap_content»
android :layout_height= «250dp»
android:src= «@drawable/bangkok»/>
Button
android:id= «@+id/btnZoomIn»
android:layout_below= «@+id/imgvw»
android:layout_width= «wrap_content»
android:layout_height= «wrap_content»
android:text= «Zoom In» android:layout_marginLeft= «100dp»/>
Button
android:id= «@+id/btnZoomOut»
android:layout_width= «wrap_content»
android:layout_height= «wrap_content»
android:layout_alignBottom= «@+id/btnZoomIn»
android:layout_toRightOf= «@+id/btnZoomIn»
android:text= «Zoom Out»/>
RelativeLayout >

As discussed, we need to create an xml files to define zoom in and zoom out animations in new folder anim under res directory (res à anim à zoom_in.xml, zoom_out.xml) with required properties. In case anim folder not exists in res directory, create a new one.

Following is the example of creating an XML files (zoom_in.xml, zoom_out.zml) under anim folder to define zoom in / out animation properties.

Now open zoom_in.xml file and write the code to set zoom in animation properties like as shown below

zoom_in.xml

xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» >
scale
xmlns: android = «http://schemas.android.com/apk/res/android»
android :duration= «1000»
android :fromXScale= «2»
android :fromYScale= «2»
android :pivotX= «50%»
android :pivotY= «50%»
android :toXScale= «4»
android :toYScale= «4» >
scale >
set >

Now open zoom_out.xml file and write the code to set zoom out animation properties like as shown below

zoom_out.xml

xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» >
scale
android :duration= «2500»
android :fromXScale= «1.0»
android :fromYScale= «1.0»
android :pivotX= «50%»
android :pivotY= «50%»
android :toXScale= «.2»
android :toYScale= «.2»/>
set >

Now open your main activity file MainActivity.java from \java\com.tutlane.zoominoutexample path and write the code like as shown below.

MainActivity.java

package com.tutlane.zoominoutexample;
import android.media.Image;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity <
private Button btnzIn ;
private Button btnzOut ;
private ImageView img ;
@Override
protected void onCreate(Bundle savedInstanceState) <
super .onCreate(savedInstanceState);
setContentView(R.layout. activity_main );
btnzIn = (Button)findViewById(R.id. btnZoomIn );
btnzOut = (Button)findViewById(R.id. btnZoomOut );
img = (ImageView)findViewById(R.id. imgvw );
btnzIn .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
Animation animZoomIn = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. zoom_in );
img .startAnimation(animZoomIn);
>
>);
btnzOut .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
Animation animZoomOut = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. zoom_out );
img .startAnimation(animZoomOut);
>
>);
>
>

If you observe above code, we are adding an animation to the image using loadAnimation() method and used startAnimation() method to apply the defined animation to imageview object.

Output of Android Zoom In / Out Animations Example

When we run the above program in android studio we will get the result as shown below.

If you observe the above result, whenever we are clicking on Zoom In or Zoom Out buttons, the image size varies based on our functionality.

This is how we can implement zoom in and zoom out animations for imageview in android applications based on our requirements.

Источник