In certain cases, you may not want an image to appear abruptly on screen, rather you would prefer that its transition from one image to another with some kind of animation. Android supports this in the form of ImageSwitcher. An image switcher allows you to add some transitions to the images through the way they appear on the screen.
What we are going to build in this article?
In this article, we will be using buttons to swipe images from left to right and vice versa along with ImageSwithcer performing its operation. Here is a sample video of the application which we are going to build. Note that we are going to implement this project in Java Language.
Step by Step Implementation
Step 1: Create a new project
- Open a new project.
- We will be working on Empty Activity with language as Java. Leave all other options unchanged.
- You can change the name of the project at your convenience.
- There will be two default files named activity_main.xml and MainActivity.java.
If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?
Step 2: Add new vector assets in drawable
Navigate to drawable > right-click > new > vector asset and then select the following assets from clip art.
1. Navigate next:
2. Navigate before:
Step 3: Working with XML files
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- Linear Layout as parent layout--> < LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "horizontal"
android:gravity = "center"
tools:context = ".MainActivity" >
<!-- Left button to swipe image-->
< ImageButton
android:layout_width = "50dp"
android:layout_height = "80dp"
android:id = "@+id/bt_previous"
android:background = "@android:color/transparent"
android:src = "@drawable/ic_navigate_before"
/>
<!-- Image switcher -->
< ImageSwitcher
android:layout_width = "250dp"
android:layout_height = "250dp"
android:id = "@+id/image_switcher"
/>
<!-- Right button to swipe image-->
< ImageButton
android:layout_width = "50dp"
android:layout_height = "80dp"
android:id = "@+id/bt_next"
android:background = "@android:color/transparent"
android:src = "@drawable/ic_navigate_next"
/>
</ LinearLayout >
|
Follow the path app > res > right-click > new > directory > Name it as “anim“. Create a new animation resource file in anim and name it as from_left.xml. Below is the code for from_left.xml file-
<? xml version = "1.0" encoding = "utf-8" ?>
android:shareInterpolator = "false" >
< translate
android:fromXDelta = "-100%" android:toXDelta = "0%"
android:fromYDelta = "0%" android:toYDelta = "0%"
android:duration = "250"
/>
</ set >
|
Create a new animation resource file in anim and name it as from_right.xml. Below is the code for the from_right.xml file
<? xml version = "1.0" encoding = "utf-8" ?>
android:shareInterpolator = "false" >
< translate
android:fromXDelta = "100%" android:toXDelta = "0%"
android:fromYDelta = "0%" android:toYDelta = "0%"
android:duration = "250"
/>
</ set >
|
Create a new animation resource file in anim and name it as to_right.xml. Below is the code for the to_right.xml file-
<? xml version = "1.0" encoding = "utf-8" ?>
android:shareInterpolator = "false" >
< translate
android:fromXDelta = "0%" android:toXDelta = "100%"
android:fromYDelta = "0%" android:toYDelta = "0%"
android:duration = "250"
/>
</ set >
|
Create a new animation resource file in anim and name it as to_left.xml. Below is the code for the to_left.xml file-
<? xml version = "1.0" encoding = "utf-8" ?>
android:shareInterpolator = "false" >
< translate
android:fromXDelta = "0%" android:toXDelta = "-100%"
android:fromYDelta = "0%" android:toYDelta = "0%"
android:duration = "250"
/>
</ set >
|
Step 4: Working with MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.
package com.example.imageswitcher;
import androidx.appcompat.app.AppCompatActivity;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewSwitcher;
public class MainActivity extends AppCompatActivity {
// initialize variables
ImageButton btPrevious,btNext;
ImageSwitcher imageSwitcher;
int imageList[]={R.drawable.android,R.drawable.java,R.drawable.js
,R.drawable.python,R.drawable.php};
int count=imageList.length;
int currentIndex= 0 ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// assign variables
btPrevious=findViewById(R.id.bt_previous);
btNext=findViewById(R.id.bt_next);
imageSwitcher=findViewById(R.id.image_switcher);
// implement the ViewFactory interface and implement
// unimplemented method that returns an imageView
imageSwitcher.setFactory( new ViewSwitcher.ViewFactory(){
@Override
public View makeView() {
ImageView imageView= new ImageView(getApplicationContext());
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams( new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT
,ViewGroup.LayoutParams.FILL_PARENT
));
// returning imageview
return imageView;
}
});
imageSwitcher.setImageResource(imageList[ 0 ]);
// set on click listener on left button
btPrevious.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
// setting animation to swipe image from right to left
imageSwitcher.setInAnimation(MainActivity. this ,R.anim.from_right);
imageSwitcher.setOutAnimation(MainActivity. this ,R.anim.to_left);
--currentIndex;
// condition
if (currentIndex< 0 )
currentIndex=imageList.length- 1 ;
imageSwitcher.setImageResource((imageList[currentIndex]));
}
});
// set on click listener on right(next) button
btNext.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
// setting animation to swipe image from left to right
imageSwitcher.setInAnimation(MainActivity. this ,R.anim.from_left);
imageSwitcher.setOutAnimation(MainActivity. this ,R.anim.to_right);
currentIndex++;
// condition
if (currentIndex==count)
currentIndex= 0 ;
imageSwitcher.setImageResource(imageList[currentIndex]);
}
});
}
} |
Here is the final output of our application.
Output: