Animation of a Custom Dialog Fragment in Android - android

To achieve a animated pop up, I have used a custom DialogFragment extending the DialogFragment class. Then, I designed the overlay layout in xml and added that during loading of the pop up. As, I needed to do the animation, I designed 2 animation xml files and added that in styles.xml and added the animation during the loading of the overlay.
I am showing the overlay animation in 3 places. It shows perfectly i.e. grows from the Bee icon and disappears in the bee icon when I use it as a component in a list item and when I use it along with a image view. But when I use it along with a VideoView or Exoplayer View the starting point of the animation shifts to the left for the x axis and goes up for the Y axis.
Also, the the pop up along with the animation works perfectly using the below code for Samsung Note Edge but causes the above problem for Samsung Galaxy S5 and Nexus 4.
It also works fine i.e. the overlay is at the exact position where the bee is for all 3 screens when I do not use the animation. So, I guess the error is in the animation.
I am giving sample code, I wrote.
Custom Dialog Fragment:
public class ConfirmBox extends DialogFragment {
private View source;
private RelativeLayout relLayout;
public ConfirmBox() {
}
public ConfirmBox(View source) {
this.source = source;
}
public ConfirmBox(View source,RelativeLayout relLayout) {
this.source = source;
this.relLayout =relLayout;
}
public static ConfirmBox newInstance(View source) {
return new ConfirmBox(source);
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(STYLE_NO_TITLE, 0);
}
#Override
public void onStart() {
super.onStart();
// Less dimmed background; see http://stackoverflow.com/q/13822842/56285
Window window = getDialog().getWindow();
WindowManager.LayoutParams params = window.getAttributes();
params.dimAmount = 0.2f; // dim only a little bit
window.setAttributes(params);
// Transparent background; see http://stackoverflow.com/q/15007272/56285
// (Needed to make dialog's alpha shadow look good)
window.setBackgroundDrawableResource(android.R.color.transparent);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Put your dialog layout in R.layout.view_confirm_box
final View view = inflater.inflate(R.layout.overlay_view, container, false);
RelativeLayout layout = (RelativeLayout) view.findViewById(R.id.overlayLayout);
layout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
getDialog().dismiss();
}
});
setDialogPosition();
return view;
}
/**
* Try to position this dialog next to "source" view
*/
private void setDialogPosition() {
if (source == null) {
return; // Leave the dialog in default position
}
// Find out location of source component on screen
// see http://stackoverflow.com/a/6798093/56285
int[] location = new int[2];
source.getLocationOnScreen(location);
int sourceX = location[0];
int sourceY = location[1];
Log.d("CONFIRM BOX:", "X: " + sourceX + "Y: " + sourceY);
Window window = getDialog().getWindow();
window.getAttributes().windowAnimations = R.style.PauseDialogAnimation;
// set "origin" to top left corner
window.setGravity(Gravity.TOP| Gravity.LEFT);
WindowManager.LayoutParams params = window.getAttributes();
params.x = sourceX;
params.y = sourceY - dpToPx(25);
Log.d("CONFIRM BOX:","X: "+ sourceX + "Y: "+ sourceY);
Log.d("CONFIRM BOX:","-----------------------------------------------------------");
window.setAttributes(params);
// Show the animation of the DialogueFragment
window.getAttributes().windowAnimations = R.style.PauseDialogAnimation;
}
public int dpToPx(float valueInDp) {
DisplayMetrics metrics = getActivity().getResources().getDisplayMetrics();
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueInDp, metrics);
}
}
anim_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="#android:anim/linear_interpolator"
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:fillAfter="false"
android:startOffset="100"
android:duration="200"
android:pivotX = "5%"
android:pivotY = "-40%"
/>
<translate
android:fromYDelta="50%"
android:toYDelta="0"
android:startOffset="100"
android:duration="200"
/>
</set>
anim_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="#android:anim/linear_interpolator"
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:fillAfter="false"
android:duration="200"
android:pivotX = "5%"
android:pivotY = "-40%"
/>
<translate
android:fromYDelta="0"
android:toYDelta="50%"
android:duration="200"
/>
</set>
styles.xml:
<style name="PauseDialogAnimation">
<item name="android:windowEnterAnimation">#anim/anim_in</item>
<item name="android:windowExitAnimation">#anim/anim_out</item>
</style>
Can someone kindly help me on zeroing in on the problem here?
Thanks.

Related

how to implement umano/AndroidSlidingUpPanel lib

My App has a map fragment . And on clicking marker , an slide up animation shows from bottom to half of screen . And it slide down on clicking marker again .
I want : Slide up menu should be clickable or drag gable so that it
can move to top of screen . to be more clear , i mean either on
clicking or dragging this slide up menu which is on half of screen ,
should go to top of screen .
So far i done : On clicking marker, call the slide up animation to half of screen. :
Animation code : slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="yFraction"
android:valueType="floatType"
android:valueFrom="1.0"
android:valueTo="0.58"
android:duration="#android:integer/config_mediumAnimTime"/>
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="alpha"
android:valueType="floatType"
android:valueFrom="0.58"
android:valueTo="1.0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="yFraction"
android:valueType="floatType"
android:valueFrom="0.58"
android:valueTo="1.0"
android:duration="#android:integer/config_mediumAnimTime"/>
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="alpha"
android:valueType="floatType"
android:valueFrom="1"
android:valueTo="0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
The code in Activity which calling this Animation on Marker click :
public void toggleList() {
Fragment f = getFragmentManager().findFragmentByTag(LIST_FRAGMENT_TAG);
if (f != null) {
getFragmentManager().popBackStack();
} else {
getFragmentManager()
.beginTransaction()
.setCustomAnimations(R.anim.slide_up,
R.anim.slide_down,
R.anim.slide_up,
R.anim.slide_down)
.add(R.id.list_fragment_container, BaseMapSlidingFragment
.instantiate(this, BaseMapSlidingFragment.class.getName()),
LIST_FRAGMENT_TAG
)
.addToBackStack(null).commit();
googleMap.getUiSettings().setAllGesturesEnabled(false);
if(animCheck == false){
animCheck = true;
}else
{
animCheck= false;
}
}}
menu_Sliding.up.xml
<?xml version="1.0" encoding="utf-8"?>
<com.trickyandroid.fragmenttranslate.app.view.SlidingRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#7c7c7c">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.trickyandroid.fragmenttranslate.app.view.SlidingRelativeLayout>
Custom_View :
**package com.trickyandroid.fragmenttranslate.app.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.ViewTreeObserver;
import android.widget.RelativeLayout;
/**
* Created by paveld on 4/13/14.
*/
public class SlidingRelativeLayout extends RelativeLayout {
private float yFraction = 0;
public SlidingRelativeLayout(Context context) {
super(context);
}
public SlidingRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SlidingRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
private ViewTreeObserver.OnPreDrawListener preDrawListener = null;
public void setYFraction(float fraction) {
this.yFraction = fraction;
if (getHeight() == 0) {
if (preDrawListener == null) {
preDrawListener = new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
getViewTreeObserver().removeOnPreDrawListener(preDrawListener);
setYFraction(yFraction);
return true;
}
};
getViewTreeObserver().addOnPreDrawListener(preDrawListener);
}
return;
}
float translationY = getHeight() * fraction;
setTranslationY(translationY);
}
public float getYFraction() {
return this.yFraction;
}
}**
Now how to get this menu to top of screen on clicking slide up menu
which is on the half of screen ?
I suggest you to use AndroidSlidingUpPanel library, that can be found here. There is no point for you to write the same thing again.
It has what you need and much more. It is easy to use and modify (I am using it in my project).
How to use
Include com.sothree.slidinguppanel.SlidingUpPanelLayout as the root element in your activity layout.
The layout must have gravity set to either top or bottom.
Make sure that it has two children. The first child is your main layout. The second child is your layout for the sliding up panel.
The main layout should have the width and the height set to match_parent.
The sliding layout should have the width set to match_parent and the height set to either match_parent, wrap_content or the max desireable height.
By default, the whole panel will act as a drag region and will intercept clicks and drag events. You can restrict the drag area to a specific view by using the setDragView method or umanoDragView attribute.

android pop out (zoom) view on focus

I have a group of views, which I want to 'pop-out' of the screen when focused; the sort of thing you might see in a menu on a video game, for example.
To achieve this I am adding an onfocusChaned listener to these views which runs a zoomIn animation on focus, and a zoomOut animation on losing focus:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ViewGroup base = (ViewGroup) this.getLayoutInflater().inflate(R.layout.gridtest, null);
ViewGroup container = (ViewGroup) base.getChildAt(0);
this.animZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoomin);
this.animZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoomout);
int x=0;
for(View child:this.getViews(container))
{
ImageView i = (ImageView) child;
i.setPadding(10,10,10,10);
if(x==0) { i.setBackgroundColor(Color.RED); x++; }
else if(x==1) {i.setBackgroundColor(Color.GREEN); x++; }
else if(x==2) {i.setBackgroundColor(Color.BLUE); x=0; }
i.setTag(GridActivity.TAG_EMPTY);
i.setOnFocusChangeListener(new View.OnFocusChangeListener()
{
#Override
public void onFocusChange(View v, boolean hasFocus)
{
if (hasFocus)
{
v.startAnimation(GridActivity.this.animZoomIn);
}
else
{
v.startAnimation(GridActivity.this.animZoomOut);
}
}
});
}
setContentView(base);
}
zoomin.xml:
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:zAdjustment="top"
android:fillEnabled="true"
android:fillAfter="true"
android:fromXScale="1.0"
android:toXScale="1.2"
android:fromYScale="1.0"
android:toYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="200" />
zoomout.xml:
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:zAdjustment="bottom"
android:fromXScale="1.2"
android:toXScale="1.0"
android:fromYScale="1.1"
android:toYScale="1.0"
android:duration="50" />
This works in so far as the views zoom in and out correctly, however the z-ordering of the views doesn't change... so the 'popped out' view is overlapped by the (smaller) view immediately to its right.
I have tried using v.bringToFront() but that appears to move the focused view to the end of the parent layout, rather than actually re-order it z-wise.
(edit)
This is the effect I'm trying to duplicate

android animation not working

I'm trying to animate an image view with a simple fade in but when I run it in my emulator it simply does nothing. Any idea what is happening or what I am doing wrong?
I tried to reproduce the example in this website, but somehow it's not working.
Here's a sample of my XML:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="2000"
>
</alpha>
</set>
Here's a sample of my code:
protected void onStart ()
{
super.onStart();
RelativeLayout layout = (RelativeLayout) findViewById(R.id.relative);
ImageView logo = new ImageView(this);
int margem_px = 50;
float density = this.getResources().getDisplayMetrics().density;
int margem_dp = (int)(density*margem_px);
Resources res = getResources();
layout.setBackgroundColor(res.getColor(R.color.branco));
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
params.setMargins(margem_dp, margem_dp*2, margem_dp, margem_dp);
logo.setLayoutParams(params);
logo.setImageResource(R.drawable.pc_apps_logo_white);
logo.setScaleType(ScaleType.CENTER_INSIDE);
logo.setVisibility(View.VISIBLE);
logo.setAlpha((float) 0);
layout.addView(logo);
Animation anima = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myfadein);
logo.startAnimation(anima);
}
}
Just remove this line & here you go:
logo.setAlpha((float) 0);

How to animate button in android?

I am making an android app, and I have a button which leads to a messaging place. On the activity with the button, I check if there is any unread messages, and if so I want to do something to the button to let the user know that there is something unread.
I was thinking of having the button sorta vibrate horizontally like 3 shakes every 2 or 3 seconds.
I know how to run a thread in the background which does something every x milliseconds. But what I don't know what to do is shake it horizontally 3 times.
Can anyone help with this?
I was thinking of using the sin function, for the animation, I can use output from a sin function to get values that go up and down, which I can set the horizontal position of the button... But this seems too extreme, is there a better way?
I can't comment on #omega's comment because I don't have enough reputation but the answer to that question should be something like:
shake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100" <!-- how long the animation lasts -->
android:fromDegrees="-5" <!-- how far to swing left -->
android:pivotX="50%" <!-- pivot from horizontal center -->
android:pivotY="50%" <!-- pivot from vertical center -->
android:repeatCount="10" <!-- how many times to swing back and forth -->
android:repeatMode="reverse" <!-- to make the animation go the other way -->
android:toDegrees="5" /> <!-- how far to swing right -->
Class.java
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
view.startAnimation(shake);
This is just one way of doing what you want, there may be better methods out there.
create shake.xml in anim folder
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="#anim/cycle" />
and cycle.xml in anim folder
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="4" />
now add animation on your code
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
anyview.startAnimation(shake);
If you want vertical animation, change fromXdelta and toXdelta value to fromYdelta and toYdelta value
Class.Java
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_with_the_button);
final Animation myAnim = AnimationUtils.loadAnimation(this, R.anim.milkshake);
Button myButton = (Button) findViewById(R.id.new_game_btn);
myButton.setAnimation(myAnim);
}
For onClick of the Button
myButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.startAnimation(myAnim);
}
});
Create the anim folder in res directory
Right click on, res -> New -> Directory
Name the new Directory anim
create a new xml file name it milkshake
milkshake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="10"
android:repeatMode="reverse"
android:toDegrees="5" />
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class HeightAnimation extends Animation {
protected final int originalHeight;
protected final View view;
protected float perValue;
public HeightAnimation(View view, int fromHeight, int toHeight) {
this.view = view;
this.originalHeight = fromHeight;
this.perValue = (toHeight - fromHeight);
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
view.getLayoutParams().height = (int) (originalHeight + perValue * interpolatedTime);
view.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
}
uss to:
HeightAnimation heightAnim = new HeightAnimation(view, view.getHeight(), viewPager.getHeight() - otherView.getHeight());
heightAnim.setDuration(1000);
view.startAnimation(heightAnim);
Dependency
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}}
and then add dependency
dependencies {
compile 'com.github.varunest:sparkbutton:1.0.5'
}
Usage
XML
<com.varunest.sparkbutton.SparkButton
android:id="#+id/spark_button"
android:layout_width="40dp"
android:layout_height="40dp"
app:sparkbutton_activeImage="#drawable/active_image"
app:sparkbutton_inActiveImage="#drawable/inactive_image"
app:sparkbutton_iconSize="40dp"
app:sparkbutton_primaryColor="#color/primary_color"
app:sparkbutton_secondaryColor="#color/secondary_color" />
Java (Optional)
SparkButton button = new SparkButtonBuilder(context)
.setActiveImage(R.drawable.active_image)
.setInActiveImage(R.drawable.inactive_image)
.setDisabledImage(R.drawable.disabled_image)
.setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
.setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
.setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
.build();
In Kotlin, this way after XML:
Define a View:
val playDel = findViewById<ImageView>(R.id.player_del)
Find a Animation: Here from Android Lib
val imgAnim = AnimationUtils.loadAnimation(this, android.R.anim.fade_out)
Connect to the View
playDel.animation=imgAnim
First create shake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="10"
android:repeatMode="reverse"
android:toDegrees="5" />
Class.java
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
view.startAnimation(shake);

shaking / wobble view animation in android

I created an anim.xml file such as below to shake imageview like IOS icon shaking in android.
However it does not provide me same result.
Is there any better idea?
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromDegrees="-2"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="2" />
Try setting android:repeatMode="reverse". Below animation gives a very reasonable immitation on my Galaxy Nexus. Obviously you can fine tune the parameters to your own liking.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="5" />
Nice shake animation;
res/anim/shake.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="150"
android:fromXDelta="-10%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="10%"/>
</set>
How to use it
final Animation animShake = AnimationUtils.loadAnimation(this, R.anim.shake);
btn_done = (Button) findViewById(R.id.btn_act_confirm_done);
btn_done.startAnimation(animShake);
How to use it (Simpler version):
btn_done.startAnimation(AnimationUtils.loadAnimation(this,R.anim.shake));
You could try this:
shake.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="#anim/cycle_7" />
cycle_7.xml
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="7" />
try to use this one:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:toDegrees="5" />
<translate
android:fromXDelta="-10"
android:toXDelta="10"
android:repeatCount="5"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:duration="70" />
</set>
To make shake effect like this
First define shake animation inside anim folder as shake.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="-5"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toDegrees="5" />
<translate
android:duration="70"
android:fromXDelta="-10"
android:interpolator="#android:anim/linear_interpolator"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="10" />
</set>
Then in code
if (TextUtils.isEmpty(phone.getText())
|| phone.getText().length() < 10)
{
//shake animation
phone.startAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.shake));
}
I created a shake effect on Android and posted in GitHub. See if it works better.
https://github.com/teoinke/ShakeAnimation
Relevant code:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/overshoot_interpolator"
android:fillAfter="true">
<translate
android:startOffset="100"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="50" />
<translate
android:startOffset="150"
android:fromXDelta="0%p"
android:toXDelta="-25%p"
android:duration="110" />
<translate
android:startOffset="260"
android:fromXDelta="0%p"
android:toXDelta="25%p"
android:duration="120" />
<translate
android:startOffset="380"
android:fromXDelta="0%p"
android:toXDelta="-20%p"
android:duration="130" />
<translate
android:startOffset="510"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="140" />
</set>
This one works pretty well (though not perfectly) as an iOS "incorrect PIN" shaking clone:
final float FREQ = 3f;
final float DECAY = 2f;
// interpolator that goes 1 -> -1 -> 1 -> -1 in a sine wave pattern.
TimeInterpolator decayingSineWave = new TimeInterpolator() {
#Override
public float getInterpolation(float input) {
double raw = Math.sin(FREQ * input * 2 * Math.PI);
return (float)(raw * Math.exp(-input * DECAY));
}
};
shakeField.animate()
.xBy(-100)
.setInterpolator(decayingSineWave)
.setDuration(500)
.start();
/**
*
* #param view view that will be animated
* #param duration for how long in ms will it shake
* #param offset start offset of the animation
* #return returns the same view with animation properties
*/
public static View makeMeShake(View view, int duration, int offset) {
Animation anim = new TranslateAnimation(-offset,offset,0,0);
anim.setDuration(duration);
anim.setRepeatMode(Animation.REVERSE);
anim.setRepeatCount(5);
view.startAnimation(anim);
return view;
}
use:
TextView tv;
makeMeShake(tv,20,5); // it will shake quite fast
For Kotlin users:
First create an Animation resource file called shake.xml. Right click on the res folder in Android Studio, then click New > Android Resource File > enter shake for the file name and select Animation for Resource type dropdown. Click OK.
Inside shake.xml paste the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="200"
android:fromXDelta="-5%"
android:repeatCount="3"
android:repeatMode="reverse"
android:toXDelta="5%"/>
</set>
Now just call it on a view!
From within a fragment:
myView.startAnimation(AnimationUtils.loadAnimation(requireContext(), R.anim.shake))
From within an activity:
myView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.shake))
(note - myView is the ID given to the view that you want to animate)
If you would like to fine-tune the animation, simply modify the values in shake.xml.
I created a very good approximation of iOS shaking (when you long press a icon to remove app from homescreen). You have to apply inside your code, programmatically, as it requires random number generation:
int dur1 = 70 + (int)(Math.random() * 30);
int dur2 = 70 + (int)(Math.random() * 30);
// Create an animation instance
Animation an = new RotateAnimation(-3, 3, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
// Set the animation's parameters
an.setDuration(dur1); // duration in ms
an.setRepeatCount(-1); // -1 = infinite repeated
an.setRepeatMode(Animation.REVERSE);
an.setFillAfter(true); // keep rotation after animation
// Create an animation instance
Animation an2 = new TranslateAnimation(-TranslateAnimation.RELATIVE_TO_SELF,0.02f,
TranslateAnimation.RELATIVE_TO_SELF,0.02f,
-TranslateAnimation.RELATIVE_TO_SELF,0.02f,
TranslateAnimation.RELATIVE_TO_SELF,0.02f);
// Set the animation's parameters
an2.setDuration(dur2); // duration in ms
an2.setRepeatCount(-1); // -1 = infinite repeated
an2.setRepeatMode(Animation.REVERSE);
an2.setFillAfter(true); // keep rotation after animation
AnimationSet s = new AnimationSet(false);//false means don't share interpolators
s.addAnimation(an);
s.addAnimation(an2);
// Apply animation to image view
itemView.setAnimation(s);
This code was design to be applied inside an adapter's gridview (getView), but you can apply to any view by changing the last line to:
yourViewName.setAnimations(s);
Kotlin version of lincolnq's answer
val FREQ = 3f
val DECAY = 2f
val decayingSineWave = TimeInterpolator { input ->
val raw = sin(FREQ * input * 2 * Math.PI)
(raw * exp((-input * DECAY).toDouble())).toFloat()
}
// where binding.loginFrame is the view you wanna shake
binding.loguinFrame.animate()
.withEndAction{
// here you can clear the fields after the shake
}
.xBy(-100f)
.setInterpolator(decayingSineWave)
.setDuration(500)
.start()
IOS wobble animation is not that simple try to change pivot x and y randomly when rotate. You should change the value programatically though. May be you also can use translate animation simultaneously
Banging my head for more than two hours, I knew how to shake and wobble an view.
Unfortunately the accepted answer won't work apart from onCreateView of fragment.
Example if you have onClick method and inside in it. You have animation like below it won't work.
Please go through the code.
DoneStart.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
register(view);
}
});
The register method has some checks like below code
private void register(View view) {
String type = typedThings.getText.toString();
String km = Km_Now.getText().toString();
if (serviceType == null) {
animationServiceList = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
silverServiceButton.setAnimation(animationServiceList);
generalServiceButton.setAnimation(animationServiceList);
platinumServiceButton.setAnimation(animationServiceList);
animationServiceList.start();
} else if (km == null) {
animationEditText = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
Km_Now.setAnimation(animationEditText);
animationEditText.start();
}
The Call animationServiceList.start(); will never be called,
SOLUTION: Use PropertyAnimator like ObjectAnimator.
Other answers are correct as well but this is a bit smoother than them since it uses an interpolator produces smooth numbers for back an forth movement
public class WobblyView extends ImageView implements ValueAnimator.AnimatorUpdateListener {
private final ValueAnimator va = ValueAnimator.ofInt(-10, 10);
public WobblyView(Context context) {
this(context, null);
}
public WobblyView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WobblyView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setAdjustViewBounds(true);
setImageResource(R.drawable.ic_logo);
va.setInterpolator(new AccelerateDecelerateInterpolator());
va.setRepeatMode(ValueAnimator.REVERSE);
va.setRepeatCount(ValueAnimator.INFINITE);
va.setDuration(1000);
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
va.addUpdateListener(this);
va.start();
}
#Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
va.removeUpdateListener(this);
}
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int heading = (int) animation.getAnimatedValue();
setRotation(heading);
}
}

Categories

Resources