How to show animated popup in Android - android

I'm looking for a way to make a popup (not Dialog) like it is in Whatsapp when you click on a profil picture.
Something like this. How do this work in Android? What do I'm looking for?
I want to show some Informations if a user clicks on a ImageView in my ListView Header.
Until now I open a new Activity if the ImageView is clicked.
holder.projectImageImageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent intent = new Intent(context1, JobInfo.class);
intent.putExtra("projectInfo", projectItems);
intent.putExtra("distributorInfo", distributorItems);
intent.putExtra("contractorInfo", contractorItems);
context1.startActivity(intent);
}
});
This Code is inside a CustomAdapter which extends BaseAdapter.
Is there any way to do what I want?
Kind Regards!

You can set dialog window enter animation and exit animation in style and can set in dialog using this-
<style name="animationdialog">
<item name="#android:windowEnterAnimation">#anim/dialog_in</item>
<item name="#android:windowExitAnimation">#anim/dialog_out</item>
</style>
dialog = new Dialog(getActivity(),android.R.style.Theme_Holo_Dialog_NoActionBar);
dialog.setContentView(R.layout.custom_layout_dialog);
dialog.getWindow().getAttributes().windowAnimations = R.style.animationdialog;
dialog_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="500"
android:fromXScale="0.3"
android:fromYScale="0.3"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
<alpha
android:duration="500"
android:fromAlpha="0.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="1.0" />
</set>
dialog_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.0"
android:toYScale="0.0" />
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="0.0" />
</set>

You can create a Layout for a custom Dialog with TextView that you need
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="#+id/image"/>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Ok "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
/>
</RelativeLayout>
and in your Activity, in onClick()
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom);
dialog.setTitle("Title...");
// set the custom dialog components - text and button
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Your Text");
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();

Related

Define certain enter and exit transitions for specific views in activity

I am adding activity transitions using this documentation. I understand that I can define enter and exit transitions for the entire activity, such as explode.
However, what if I want to animate certain views of the entering activity differently? For example, if I have one view on the top half of the layout and one at the bottom of the layout, I may want to use a downwards slide transition on the top view and an upward slide animation on the bottom view. Is this possible to set?
I can think of using scene animations (documented here) and bringing in the elements from the sides of an empty view, but my layout is complicated and I am iterating it often, so keeping track of two different layouts for it is not really ideal.
Thanks!
Finally got it! The idea is to create custom transition in xml and to set there targets:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
android:transitionOrdering="together">
<slide
android:slideEdge="top">
<targets>
<target android:targetId="#id/toolbar"/>
</targets>
</slide>
<slide
android:slideEdge="bottom">
<targets>
<target android:targetId="#id/text"/>
</targets>
</slide>
</transitionSet>
To apply animation to desired view like button, textview, imageview, etc check this http://www.androidhive.info/2013/06/android-working-with-xml-animations/
Create four XML files for animation:
/res/anim/anim_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="500"
android:repeatCount="1"
android:repeatMode="reverse" />
</set>
/res/anim/anim_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:startOffset="0"
android:repeatCount="1"
android:repeatMode="reverse" />
</set>
/res/anim/anim_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="3.0"
android:fromYScale="1.0"
android:toYScale="3.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:repeatCount="1"
android:repeatMode="reverse" />
</set>
/res/anim/anim_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="500"
android:repeatCount="1"
android:repeatMode="reverse"/>
</set>
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<Button
android:id="#+id/translate"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Translate" />
<Button
android:id="#+id/alpha"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Alpha" />
<Button
android:id="#+id/scale"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Scale" />
<Button
android:id="#+id/rotate"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Rotate" />
</LinearLayout>
Main activity:
package com.exercise.AndroidAnimButtons;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
public class AndroidAnimButtonsActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Animation animTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
final Animation animAlpha = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
final Animation animScale = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
final Animation animRotate = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
Button btnTranslate = (Button)findViewById(R.id.translate);
Button btnAlpha = (Button)findViewById(R.id.alpha);
Button btnScale = (Button)findViewById(R.id.scale);
Button btnRotate = (Button)findViewById(R.id.rotate);
btnTranslate.setOnClickListener(new Button.OnClickListener(){
#Override
public void onClick(View arg0) {
arg0.startAnimation(animTranslate);
}});
btnAlpha.setOnClickListener(new Button.OnClickListener(){
#Override
public void onClick(View arg0) {
arg0.startAnimation(animAlpha);
}});
btnScale.setOnClickListener(new Button.OnClickListener(){
#Override
public void onClick(View arg0) {
arg0.startAnimation(animScale);
}});
btnRotate.setOnClickListener(new Button.OnClickListener(){
#Override
public void onClick(View arg0) {
arg0.startAnimation(animRotate);
}});
}
}

How to get the animated view

here is xml fileļ¼š
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="150dp"
android:layout_height="match_parent">
<Button
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
here is java code
private Button text;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text = (Button)findViewById(R.id.textview);
text.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
text.startAnimation(getScaleAnimation());
}
});
}
private ScaleAnimation getScaleAnimation(){
ScaleAnimation animation = new ScaleAnimation(1f,1.2f,1f,1.2f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(1000);
animation.setFillAfter(true);
return animation;
}
I am performing a simple ScaleAnimation on a Button.Is there any way I can get the animated view?
Just open anim folder inside res folder. Create an xml file. Then you need to create set tag. Inside of it, you can create scale tag.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<scale
android:fromXScale="0.5"
android:toXScale="2"
android:fromYScale="0.5"
android:toYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
</set>
Note: do not forget to include xmlns:android declaration.
Now, inside of onCreate method or wherever you want, just put following. I am animating(scaling) a button itself when it is clicked:
Button but = (Button) findViewById(R.id.button1);
but.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Animation anim = AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.animation);
but.startAnimation(anim);
}
});
EDIT:
in case you want to rotate it while scaling, you can put following inside of the xml file:
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
Hope this helps.
Use this way
Create an xml inside /res/anim folder and put the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale android:fromXScale="0.0" android:fromYScale="0.0"
android:toXScale="1.0" android:toYScale="1.0"
android:duration="700" android:fillBefore="false" />
</set>
Place the below code inside the java file:
Animation scaleAnimation
= AnimationUtils.loadAnimation(this, R.anim.logoanimation);
Btn.startAnimation(scaleAnimation);
logoanimation is the name of my animation xml file.
for more refer this tutorial

Rotate animation android

I'm trying to do a rotating image animation.
I need to rotate an icon around itself just like they do in a progressbar, but what I'm getting is an image rotating around a circle.
Here is my animation code
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2500"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
Where am I going wrong in here?
Thanks
This is the source code for the layout main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/testButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="animationText"
android:onClick="AnimClick"/>
<ImageView
android:id="#+id/testImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="image_desc"
android:scaleType="fitCenter"
android:src="#drawable/cat2" />
</RelativeLayout>
To implement the rotation animation, we can define the animation by XML or Java code. If we want to write the animation in the xml, we need to create an animation xml file under /res/anim folder. Here, we create a xml file named rotate_around_center_point.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<rotate
android:duration="2500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
and this is my Activity:
public class MainActivity extends Activity implements OnClickListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btn = (Button) findViewById(R.id.testButton);
btn.setOnClickListener(this);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_around_center_point);
animationTarget.startAnimation(animation);
}
}
You could try with the following code, rather than doing it in XML:
RotateAnimation rotate = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
rotate.setDuration(4000);
rotate.setRepeatCount(Animation.INFINITE);
yourView.setAnimation(rotate);
Well I got where I was wrong. I gave padding to my image which caused it to move aside a little every time it rotated.
Anyhow I removed the padding and now it's working just fine.
Add the following xml in the animation folder
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:duration="4000"
android:fromdegrees="0"
android:pivotx="50%"
android:pivoty="50%"
android:todegrees="360"
android:toyscale="0.0">
</set>
Hope this will help you..
for more information http://www.blazin.in/2013/09/simple-rotate-animation-in-android.html

How to use fade in and fade out effect with an image using Transition, android

I have seen in Android mobile. When i click photo gallery, one image is opened (Fade in) and after I clicked disappeared (Fade out).
Same, I have done in my app. I have pasted one image in Drawable. And applied Fade in and Fade out conditions. But I have not seen any images than sky blue color background. That is view.
How could I do this programmatically in Android?
In what way can I fix this problem? What mistake have I done here?
My code is:
btn=(Button)findViewById(R.id.Click);
viewToAnimate=(View)findViewById(R.id.view1);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(viewToAnimate.getVisibility()==View.VISIBLE)
{
boolean toRight = false;
Context c = null;
//Animation out=AnimationUtils.makeOutAnimation(this,true);
Animation out=AnimationUtils.makeOutAnimation(c, toRight);
viewToAnimate.startAnimation(out);
viewToAnimate.setVisibility(View.INVISIBLE);
} else {
int id = 0;
Context c = null;
// Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
Animation in=AnimationUtils.loadAnimation(c, id);
viewToAnimate.startAnimation(in);
viewToAnimate.setVisibility(View.VISIBLE);
}
}
} );
} }
Then in Main.xml :
<Button
android:id="#+id/Click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fade" />
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#AAA"
android:src="#drawable/fade"/>
for fadeIn.xml
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="2000"/>
</set>
for fadeOut.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="2000"/>
</set>
try using this animation in your image view..
This works for me:
Fade in-
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="1000" />
</set>
Fade out-
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="1000" />
</set>

How can I animate a custom view (ImageView) programmatically?

I want to animate a custom view programmatically. I want it to only animate in the position where it is declare in the xml file, and I don't want it to mess the layout. Also this animation is affected by other factor so the android Animation class is out of the question.
I have test this sample tutorial and watch this videos. My problem is that most tutorial is for animating a sprite into a canvas where you will trace your sprite's location.
How can you animate the custom view without affecting layout and without using the Android Animation class?
Edited:
The custom view will act as a animated-gif and will toggle another set of frames whenever an event activates it.
you can create animation XML and apply that animation from program to your ImageView check following example
you can start animation for your customized view just call viewobject.startAnimation(animationobject);
animation.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="#android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
your main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
<ImageView android:id="#+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>
then your activity class myActivity.java
public class myActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView image = (ImageView) findViewById(R.id.ImageView01);
//create animation class object
Animation hyperspaceJump =
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
//start animation for image
image.startAnimation(hyperspaceJump);
}
}
If you want "frame by frame" animation that just "runs" like an animated gif, you can follow:
drawable-animation official tutorial.
Quoting from the tutorial:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust3" android:duration="200" />
</animation-list>
and in your code
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}

Categories

Resources