ImageSwitcher
A ImageSwitcheris a specialized ViewSwitcher that contains only children of type ImageView. A ImageSwitcher is useful to animate an Image on screen.
ImageSwitcher switches smoothly between two images and thus provides a way of transitioning from one Image to another through appropriate animations.
In the below snapshot we can see an Image is coming IN and other Image is going OUT
Two types animations are required for for ImageSwitcher to switch between the texts.
1: In Animation: with which Image come in the Screen.
2: Out Animation: with which Image goes out from the Screen.
We can provide following Animations
For In Animation
R.anim.slide_in_left
R.anim.fade_in
For Out Animation
R.anim.slide_out_right
R.anim.fade_out
In This Post I have given two Examples with Source Code
In Example 1, I have an ImageSwitcher and a button called "NEXT" , when user clicks on NEXT button ImageSwitcher will switch between Images . The current Image will go OUT and next Image will come in with specified Animation.
In Example 2, I have a ImageSwitcher ,and two Buttons "START" and "STOP" , when User clicks on START, ImageSwitcher automatically start switching between Images and continue switching between Images, and when User clicks on STOP ImageSwitcher will stop switching the Images, I have implemented it using Threads.
ImageSwitcher Example 1:
In this Example I have following layout
In the above layout, we have an ImageSwitcher and a button called "NEXT" , when user clicks on NEXT button ImageSwitcher will switch between Images . The current Image will go OUT and next Image will come in with specified Animation.
example1_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageSwitcher
android:id="@+id/imageSwitcher"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center_horizontal" />
<Button
android:id="@+id/buttonNext"
android:layout_marginTop="150dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="NEXT"
/>
</LinearLayout>
ImageSwitcherExample1Activity.java
public class ImageSwitcherExample1Activity extends Activity
{
private ImageSwitcher imageSwitcher;
Button btnNext;
// Array of Image IDs to Show In ImageSwitcher
int imageIds[]={R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,R.drawable.image6,};
int messageCount=imageIds.length;
// to keep current Index of ImageID array
int currentIndex=-1;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.example1_layout);
// get The references
btnNext=(Button)findViewById(R.id.buttonNext);
imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
// Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked
imageSwitcher.setFactory(new ViewFactory() {
public View makeView() {
// TODO Auto-generated method stub
// Create a new ImageView set it's properties
ImageView imageView = new ImageView(getApplicationContext());
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
return imageView;
}
});
// Declare the animations and initialize them
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
// set the animation type to imageSwitcher
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);
// ClickListener for NEXT button
// When clicked on Button ImageSwitcher will switch between Images
// The current Image will go OUT and next Image will come in with specified animation
btnNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
currentIndex++;
// If index reaches maximum reset it
if(currentIndex==messageCount)
currentIndex=0;
imageSwitcher.setImageResource(imageIds[currentIndex]);
}
});
}
}
ImageSwitcher Example 2:
In this Example I have following layout
In the above layout, We have an ImageSwitcher ,and two Buttons "START" and "STOP" , when User clicks on START, ImageSwitcher automatically start switching between Images and continue switching between Images, and when User clicks on STOP ImageSwitcher will stop switching the Images
.
example2_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageSwitcher
android:id="@+id/imageSwitcher"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="150dp"
android:orientation="horizontal">
<Button
android:id="@+id/buttonStart"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Start />
<Button
android:id="@+id/buttonStop"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stop"/>
</LinearLayout>
</LinearLayout>
ImageSwitcherExample1Activity.java
public class ImageSwitcherExample1Activity extends Activity
{
private ImageSwitcher imageSwitcher;
Button btnStart,btnStop;
// Array of Image IDs to Show In ImageSwitcher
int imageIds[]={R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,R.drawable.image6,};
int messageCount=imageIds.length;
int currentIndex=-1; // to keep current Index
// Declare in and out Animation
Animation in,out;
Context mContext;
private Handler mHandler = new Handler();
// Create a Runnable Instance
Runnable r=new Runnable() {
// Override the run Method
public void run() {
// TODO Auto-generated method stub
try
{
// Update the TextSwitcher text
updateImageSwitcherImage();
}
finally
{
mHandler.postDelayed(this, 1000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.example2_layout);
mContext=this;
// get The references
btnStart=(Button)findViewById(R.id.buttonStart);
btnStop=(Button)findViewById(R.id.buttonStop);
imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
// Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked
imageSwitcher.setFactory(new ViewFactory() {
public View makeView() {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(getApplicationContext());
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
return imageView;
}
});
in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
// set the animation type to imageSwitcher
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);
mHandler.postDelayed(r, 1000);
// ClickListener for Start button
// When clicked on Button ImageSwitcher will Start switch between Images
// The current Image will go OUT and next Image will come in with specified animation
btnStart.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Start The ImageSwitcher Animation
mHandler.postDelayed(r,1000);
}
});
// Button Stop Click Listener
// When clicked on This Button, ImageSwitcher will Stop switching between Images
btnStop.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Stop the Image Switcher Animation
mHandler.removeCallbacks(r);
}
});
}
// method to Update the ImageSwitcher Image
private void updateImageSwitcherImage()
{
currentIndex++;
if(currentIndex==messageCount)
currentIndex=0;
imageSwitcher.setImageResource(imageIds[currentIndex]);
}
}
perfact!!!!!!!!!!!!!!!!!!!!!!!!!!!
ReplyDeleteGood Post...Its very informative, Thanks for sharing the blog...Keep updating the blog. see this blog for Best Software Development tools in 2020
ReplyDelete