How to fade out and in between two images? - android

Okay a little help here, so I have two images loading in my splash screen. The first image opens (starting the splash screen) then the second image opens, once the second image closes the mainactivity starts. Now my question is how do I make my first image fade out, then fade in with my second image?
-Oh yes, and no cross fading
-Just a complete fade out and in transition
-Thanks in advance
-The splash.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:id="#+id/lin_lay"
android:gravity="center" >
<ImageView
android:contentDescription="#string/desc"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinning_wheel_image"
android:background="#drawable/splashscreen1" />
</LinearLayout>
The mainanim.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/splashscreen1" android:duration="2500" />
<item android:drawable="#drawable/splashscreen2" android:duration="4000" />
</animation-list>
The Splash.java
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
ourSong = MediaPlayer.create(Splash.this, R.raw.splashsound);
ourSong.start();
Thread timer = new Thread(){
public void run(){
try{
sleep(10500);
} catch (InterruptedException e){
e.printStackTrace();
}finally{
Intent openStartingPoint = new Intent("com.theapplication.app.STARTINGPOINT");
startActivity(openStartingPoint);
}
}
};
timer.start();
}
#Override
public void setRequestedOrientation(int requestedOrientation) {
// TODO Auto-generated method stub
super.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
// TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);
ImageView mainimage = (ImageView)findViewById(R.id.spinning_wheel_image);
mainimage.setBackgroundResource(R.anim.mainamin);
mainanimation = (AnimationDrawable) mainimage.getBackground();
mainanimation.start();

use ImageSwitcher instead of ImageView which support animations by it self.
see this sample:
http://www.java2s.com/Code/Android/UI/UsingImageSwitcher.htm
you can add animation like this:
imageSwitcher.setInAnimation(fadeInAnimation);
imageSwitcher.setOutAnimation(fadeOutAnimation);
//
my test:
public class IntroActivity extends Activity implements ViewFactory {
private static final String TAG = "IntroActivity";
private final int[] images = { R.drawable.img3, R.drawable.img2,
R.drawable.img1, R.drawable.img4, R.drawable.img5, R.drawable.img6,
R.drawable.img7, R.drawable.img8 };
private int index = 0;
private final int interval = 10000;
private boolean isRunning = true;
#Override
public void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.activity_intro);
startAnimatedBackground();
}
private void startAnimatedBackground() {
Animation aniIn = AnimationUtils.loadAnimation(this,
android.R.anim.fade_in);
aniIn.setDuration(3000);
Animation aniOut = AnimationUtils.loadAnimation(this,
android.R.anim.fade_out);
aniOut.setDuration(3000);
final ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
imageSwitcher.setInAnimation(aniIn);
imageSwitcher.setOutAnimation(aniOut);
imageSwitcher.setFactory(this);
imageSwitcher.setImageResource(images[index]);
final Handler handler = new Handler();
Runnable runnable = new Runnable() {
#Override
public void run() {
if (isRunning) {
index++;
index = index % images.length;
Log.d("Intro Screen", "Change Image " + index);
imageSwitcher.setImageResource(images[index]);
handler.postDelayed(this, interval);
}
}
};
handler.postDelayed(runnable, interval);
}
#Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return imageView;
}
#Override
public void finish() {
isRunning = false;
super.finish();
}
}
to start next activity, in
#Override
public void run() {
if (isRunning) {
just check for the index,
if the index equals to 1 then start the next activity and finish the current;

You can simply just fade out the image, change it, and then finally fade it in again.
imageView.animate()
.alpha(0f)
.setDuration(100)
.setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) { }
#Override
public void onAnimationEnd(Animator animator) {
imageView.setImageResource(R.drawable.newimg);
imageView.animate().alpha(1).setDuration(200);
}
#Override
public void onAnimationCancel(Animator animator) { }
#Override
public void onAnimationRepeat(Animator animator) { }
});

Related

I want to set animation on ImageView

i want to make a toss app ..it is spining all time and will not stop to show a head or tail..i want that when i click on the coin then it should spin for 2 3 seconds and then stops to show head or tail at random selection...but it is continuously spinning.
Here is the code...
public class MainActivity extends AppCompatActivity {
ImageView Coin;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Coin=(ImageView) findViewById(R.id.ImgViewcoin);
Coin.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation animation = new AlphaAnimation(1, 0);
animation.setInterpolator(new DecelerateInterpolator());
animation.setDuration(3000);
Coin.startAnimation(animation);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
final int[] photos = {R.drawable.heads, R.drawable.tails};
final ImageView image = (ImageView) findViewById(R.id.ImgViewcoin);
final Random ran = new Random();
int i = ran.nextInt(photos.length);
image.setImageResource(photos[i]);
image.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
int k = ran.nextInt(photos.length);
image.setImageResource(photos[k]);
}
}
);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
Coin.startAnimation(animation);
}
});
}
}
Remove the findviewbyid from onclick and use with Coin instance you have.

how to make the ImageSwitcher run automatically

hi am Trying to use ImageSwitcher i manage to make it work but i have problem is that i need to press start to make it start and stop to make it stop , i want it to start automatically when the activity start
this is my code
public class MainActivity extends Activity
{
private ImageSwitcher imageSwitcher;
private int[] gallery = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f};
private int position = 0;
private Timer timer = null;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
imageSwitcher.setFactory(new ViewFactory() {
public View makeView()
{
return new ImageView(MainActivity.this);
}
});
// Set animations http://danielme.com/2013/08/18/diseno-android-transiciones-entre-activities/
Animation fadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
Animation fadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);
imageSwitcher.setInAnimation(fadeIn);
imageSwitcher.setOutAnimation(fadeOut);
}
//////////////////////BUTTONS
public void start(View button)
{
timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
public void run() {
// avoid exception: "Only the original thread that created a view hierarchy can touch its views"
runOnUiThread(new Runnable() {
public void run() {
imageSwitcher.setImageResource(gallery[position]);
position++;
if (position == 6)
{
position = 0;
}
}
});
}
}, 0, 2500);
}
public void stop(View button)
{
timer.cancel();
}
}
You just can call on your onCreate the method start(null) (with null parameter) and that's it, if you want it to stop then call the stop method with null parameter when the timer is up.

repeating animation with Timer

I have two animations xml file, i use these in java class. I want my animation repeats 1000 msec. I write this code but when i run this program, animation not repeat. I use Timer in repeatAnim() function but i think this is not work in 1000msec.
relative.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/txt1"
></TextView>
<ImageButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pic1"
android:layout_gravity="center"/>
</LinearLayout>
SwitchClass.java:
public class SwitchClass extends Activity implements AnimationListener{
Animation animation1;
Animation animation2;
boolean frontButton=true;
ImageButton btn;
Timer timer;
TimerTask mTimerTask;
Handler handler=new Handler();
boolean repeat=true;
#Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.relative);
animation1=AnimationUtils.loadAnimation(this, R.anim.to_middle);
animation1.setAnimationListener(this);
animation2=AnimationUtils.loadAnimation(this, R.anim.from_middle);
animation2.setAnimationListener(this);
btn=(ImageButton)findViewById(R.id.btn2);
btn.setOnClickListener(onClickListener);
repeatAnimation();
repeatAnim();
}
private OnClickListener onClickListener=new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent intent=new Intent(SwitchClass.this,AnimClass.class);
startActivity(intent);
}
};
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
if(animation==animation1){
if(frontButton){
btn.setImageResource(R.drawable.pic2);
}
else{
btn.setImageResource(R.drawable.pic1);
}
btn.clearAnimation();
btn.setAnimation(animation2);
btn.startAnimation(animation2);
}
else{
frontButton=!frontButton;
btn.setEnabled(true);
}
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
public void repeatAnim(){
timer=new Timer();
mTimerTask=new TimerTask(){
public void run(){
handler.post(new Runnable(){
public void run(){
repeatAnimation();
}
});
}
};
timer.schedule(mTimerTask, 1000);
}
public void repeatAnimation(){
btn.setEnabled(false);
btn.clearAnimation();
btn.setAnimation(animation1);
btn.startAnimation(animation1);
}
}
Thanks for advise.Cheers
What about to use use Handler, see below:
private int mSampleDurationTime = 1000; // 1 sec
private boolean continueToRun = true;
Handler mHandler = new Handler();
mHandler.postDelayed(mRunnable, mSampleDurationTime);
where mRunnable is your task:
private final Runnable mRunnable = new Runnable() {
//...
public void run() {
// do your stuff here, like update
// this block of code you going to reach every second
if(continueToRun == true){
mHandler.postDelayed(mRunnable, mSampleDurationTime);
}
}
...
};
First time you call postDelayed and invoke new Runnable(). After, if you want to continue,
call the same method into run()
why not just use handler.postDelayed(runnable, delay) instead of using a timer?
Also, try using animation1.startNow() after setting the animation on the button, and call btn.invalidate() after setting the animation to redraw the view

Alternate image in a imageview of screen

I have two images in my drawable folder and I desire to alternate the two images in my view every x time.
I try to use a Asynctask but don't work and I can't found the solution.
My xml Code
<ImageView
android:id="#+id/imageload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="64dp"
android:adjustViewBounds="false"
android:baselineAlignBottom="false"
android:contentDescription="#string/imatge"
android:cropToPadding="false"
android:fitsSystemWindows="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:src="#drawable/hdtitol2" />
I call the class with:
new ModifyImage().execute(null,null,null);
The main class contains de class with async code
public class ModifyImage extends AsyncTask<Void, Void, Void> {
ImageView img= (ImageView)findViewById(R.id.imageload);
#Override
protected void onPreExecute(){
}
#Override
protected Void doInBackground(Void... params) {
// TODO Auto-generated method stub
int i = 0;
boolean opt = true;
boolean exit = false;
while(!exit){
if(i == 1000){
i = 0;
if(!opt){
img.setImageResource(R.drawable.blackhdtitol2);
opt =true;
}else{
opt = false;
img.setImageResource(R.drawable.hdtitol2);
}
}
i++;
}
return null;
}
#Override
protected void onPostExecute(Void i){
}
}
Do this,
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
Integer tag = (Integer) img.getTag();
if(tag == R.drawable.blackhdtitol2){
img.setImageResource(R.drawable.blackhdtitol2);
img.setTag(R.drawable.blackhdtitol2);
}else{
img.setImageResource(R.drawable.hdtitol2);
img.setTag(R.drawable.hdtitol2);
}
}
}, 60*1000);
In the end I found a possible solution descarting all de java code that I had about this problem.
The solution that I found is to create a new class
public class RepeatingThread implements Runnable {
private final Handler mHandler = new Handler();
public RepeatingThread() {
}
#Override
public void run() {
final ImageView img = (ImageView) findViewById(R.id.imageload);
if(img.getVisibility() == View.INVISIBLE ){
img.setVisibility(View.VISIBLE);
}else{
img.setVisibility(View.INVISIBLE);
}
mHandler.postDelayed(this, 1000);
}
}
And the code in the function on create:
final Thread t = new Thread(new RepeatingThread());
t.start();

Class to display flash screen

I would like to create a "Flash" class to display a white flash screen (200ms) as easily as a toast, like this:
Flash.create(context).show();
This layer should appear instantly then gradually disappear (alpha transition)
It must not catch events
It must adapt to the screen rotation
It can be created from any activity
I looked for a solution via WindowManager but I am having some difficulties.
What solution do you recommend?
There are some issues with that, as you'll have to pass the Activity and not just a Context into the "Flash" screen. Therefore the handling of screen rotation will be tricky.
I've created and open-sourced a small library called Crouton that can help you.
Currently it still struggles with the issue of orientation changes while a Crouton is being displayed.
So I give my own solution if it can help anybody...
(I changed the call to flash method since my first post)
public class Flasher {
private final static int DURATION_OFFSET = 300;
private final static int DURATION_FADEIN = 50;
private final static int DURATION_FADEOUT = 200;
private Animation fadein;
private Animation fadeout;
private RelativeLayout flash;
private RelativeLayout view;
private Toast toast;
private int count;
public Flasher(Context context) {
fadein = new AlphaAnimation(0, 1);
fadein.setStartOffset(DURATION_OFFSET);
fadein.setDuration(DURATION_FADEIN);
fadein.setAnimationListener(new AnimationListener() {
#Override public void onAnimationStart(Animation anim) {}
#Override public void onAnimationRepeat(Animation anim) {}
#Override public void onAnimationEnd(Animation anim) {
flash.startAnimation(fadeout);
}
});
fadeout = new AlphaAnimation(1, 0);
fadeout.setDuration(DURATION_FADEOUT);
fadeout.setAnimationListener(new AnimationListener() {
#Override public void onAnimationStart(Animation anim) {}
#Override public void onAnimationRepeat(Animation anim) {}
#Override public void onAnimationEnd(Animation anim) {
if(count > 1) {
flash(count - 1);
} else {
cancel();
}
}
});
LayoutParams params = new LayoutParams(-1, -1);
flash = new RelativeLayout(context);
flash.setLayoutParams(params);
flash.setBackgroundColor(0xffffffff);
flash.setVisibility(View.INVISIBLE);
view = new RelativeLayout(context);
view.setLayoutParams(params);
view.addView(flash);
toast = new Toast(context);
toast.setView(view);
toast.setGravity(Gravity.FILL, 0, 0);
}
public final void flash(int count) {
toast.show();
this.count = count;
flash.startAnimation(fadein);
}
public final void cancel() {
toast.cancel();
}
}
MainActivity for test it:
public class MainActivity extends Activity {
private static Flasher flasher;
#Override
public void onCreate(Bundle state) {
super.onCreate(state);
View layout = getLayoutInflater().inflate(R.layout.activity_main, null);
setContentView(layout);
if(flasher == null) {
flasher = new Flasher(this);
}
layout.setOnClickListener(new OnClickListener() {
#Override public void onClick(View v) {
flasher.flash(1);
}
});
}
#Override protected void onDestroy() {
if(isFinishing()) {
flasher = null;
}
super.onDestroy();
}
}
Thank you to Keyboardsurfer for the help!
Edit: a constraint is not satisfied:
The Toast does not dispatch the touch event:
flasher.flash(10);
MainActivity is not touchable during flashes effect
If anybody have a solution to resolve the problem...
After searching for many hours, it seems impossible to delegate events from one window to another. So the final functional solution I've found is to extend an activity so that it achieves this flash effect. For those who are interested in it, here's my subclass:
public class FlmActivity extends Activity {
private final static int DURATION_FADEIN = 50;
private final static int DURATION_FADEOUT = 200;
private final static int DURATION_INTERVAL = 200;
private View view;
private AnimationSet anim;
private int count;
public FlmActivity() {
super();
}
#Override protected void onPostCreate(Bundle state) {
super.onPostCreate(state);
view = new View(this) {{
setBackgroundColor(0xffffffff);
setVisibility(View.INVISIBLE);
}};
anim = new AnimationSet(false) {{
addAnimation(new AlphaAnimation(0, 1) {{
setDuration(DURATION_FADEIN);
}});
addAnimation(new AlphaAnimation(1, 0) {{
setStartOffset(DURATION_FADEIN);
setDuration(DURATION_FADEOUT);
}});
addAnimation(new Animation() {{
setStartOffset(DURATION_FADEIN + DURATION_FADEOUT);
setDuration(DURATION_INTERVAL);
setAnimationListener(new AnimationListener() {
#Override public void onAnimationStart(Animation anim) {}
#Override public void onAnimationRepeat(Animation anim) {}
#Override public void onAnimationEnd(Animation anim) {
flash(count - 1);
}
});
}});
}};
addContentView(view, getWindow().getAttributes());
}
#Override protected void onDestroy() {
((ViewGroup) view.getParent()).removeView(view);
super.onDestroy();
}
public final void flash(int count) {
if((this.count = count) > 0) {
view.startAnimation(anim);
}
}
}
Code to call flash effect in an extended activity:
flash(10);
With this implementation, the events pass through the layer

Categories

Resources