You don’t always want an image to appear abruptly on the screen. Sometimes you want to apply some sort of animation like image switcher in Android example when it transitions from one image to another.
Android does have a built-in ImageSwitcher class that allows for the switching of images.
An image switcher lets you add transitions to your images when you view them on your screen.
To use Image Switcher you need to define the component’s XML first.
Syntax:
<ImageSwitcher
android:layout_width="350dp"
android:layout_height="300dp"
android:id="@+id/imgswitcher"
android:layout_gravity="center"
/>
Now we will create the instance in Java file:
ImageSwitcher imageSwitcher; imageSwitcher = (ImageSwitcher) findViewById(R.id.imgswitcher);
Now we will implement the viewfactory interface in onCreate:
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView view = new ImageView(getApplicationContext());
view.setScaleType(ImageView.ScaleType.FIT_CENTER);
view.setLayoutParams(new
ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
return view;
}
});
The last thing you need to do is add Animation to the ImageSwitcher.
Animation classes need to be defined in this way using a static method called loadAnimation.
It’s given below:
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);
setInAnimation sets the animation of the appearance of the object on the screen whereas setOutAnimation does the opposite.
The method loadAnimation() is used to create an animation object.
Image Switcher in Android Example of Full Code:
Following is the content of the modified main activity file src/MainActivity.java
package com.example.imageswitcher;
import androidx.appcompat.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.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher;
import android.app.ActionBar.LayoutParams;
public class MainActivity extends AppCompatActivity {
ImageSwitcher imageSwitcher;
Button buttonleft, buttonright;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonleft = (Button) findViewById(R.id.button);
buttonright = (Button) findViewById(R.id.button2);
imageSwitcher = (ImageSwitcher) findViewById(R.id.imgswitcher);
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView view = new ImageView(getApplicationContext());
view.setScaleType(ImageView.ScaleType.FIT_CENTER);
view.setLayoutParams(new
ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
return view;
}
});
Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);
buttonleft.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "previous Image",
Toast.LENGTH_LONG).show();
imageSwitcher.setImageResource(R.drawable.first);
}
});
buttonright.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Next Image",
Toast.LENGTH_LONG).show();
imageSwitcher.setImageResource(R.drawable.second);
}
});
}
}
Following the modified content of the xml res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="35dp" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Voltage Lab"
android:textColor="#009688"
android:textSize="35dp"
android:textStyle="bold" />
<ImageSwitcher
android:id="@+id/imgswitcher"
android:layout_width="350dp"
android:layout_height="300dp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_marginRight="50dp"
android:text="Left" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button"
android:layout_alignLeft="@+id/button"
android:layout_alignParentBottom="true"
android:text="Right" />
</LinearLayout>
</LinearLayout>
Result of Image Switcher in Android Example
Let’s try to run the application we just modified.
You can set up your AVD using the default parameters.
To run the app from Android studio, open one of your project’s activity files and click the Run icon from the toolbar.
Install android studio and run the emulator it should run and you can see the emulator window like this one.
If you have any questions, please let us know.
Read More:
Align Text to the Right Android & Vertical Align TextView Without Programmatically
