I am making a simple calculator application for android. I've already made the code and everything works fine. However, I want to improve the design of its user interface by adding a little animation for the changing of text. So it's like this for example:
I will enter input via the buttons to the edittext, say for example, "2+3".
When I will press the enter button, "2+3" moves up and disappears then "5", from below, replaces the original position of "2+3".
How can I do this?
This should answer your question now that I understand it a little better. You just need a couple of animation files, one to slide the text out, and one to slide it in. You can adjust the animations however you would like:
Here is your click listener for the equals button:
Button btnEquals = (Button)findViewById(R.id.btnEquals);
btnEquals.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation slideOutBottom = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.out_bottom);
slideOutBottom.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// Update the text here
Animation slideInTop = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.in_top);
llContainer.startAnimation(slideInTop);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
llContainer.startAnimation(slideOutBottom);
}
});
}
And here are the out_bottom.xml and in_top.xml files (respectively) that go in your anim folder:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="100%" android:duration="600"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%" android:toYDelta="0%" android:duration="600"/>
</set>
And here is how I wrapped the layouts. Kind of quick and dirty, but it works:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:background="#fff">
<LinearLayout
android:id="#+id/llContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<EditText
android:id="#+id/edtInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:padding="5dp"
android:background="#null"/>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btnEquals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="/>
</LinearLayout>
Related
Why is my setAnimation not working in LongClickListener where as it is working fine in outside the LongClick listener?
This is my java code for adding animation
final Animation shake = AnimationUtils.loadAnimation(NavyashActivity.context, R.anim.shake);
final CardView breakfast = (CardView) rootView.findViewById(R.id.breakfastcard);
breakfast.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
Log.e("shake long press","coming ");
// TODO Auto-generated method stub
breakfast.setAnimation(shake);
return true;
}
});
Also my shake.xml is as:
<?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: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>
and my layout for cardview for which i need shaking is:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:foreground="?android:attr/selectableItemBackground"
android:longClickable="true"
android:clickable="true"
android:id="#+id/breakfastcard">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/framebox">
<TextView
android:layout_width="wrap_content"
android:id="#+id/breakfastheading"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/breakfastdetails"
android:layout_margin="2dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
I just want that as soon as the user Longclicks the cardview element the card should start shaking so as to notify that on being touched for long time its moving continuosly.
Try to change this:
breakfast.setAnimation(shake);
To this:
breakfast.startAnimation(shake);
You are setting the animation but not starting it.
I want to animate a view consisting of multiple lines of text as shown in link https://dl.dropboxusercontent.com/u/8003415/animation.gif . This view consists of two TextViews enclosed in a parent view.
This parent view, contains two sets of animation.
1) the first set of view contains multiple lines of text which gets scaled from normal to large and then fades out.
2) second set of view contains another set of multiple text which fades and scales from small to normal.
please note that scaling and fading should happen simultaneously.
for the first set I designed the below animation set.This animation set scales((1,1)to (1.5,1.5))) and fades the text block from centre.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#anim/custom_decelerator" >
<scale
android:duration="50"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<alpha
android:duration="2000"
android:fromAlpha="2.0"
android:toAlpha="0.0" />
</set>
and for the second set also scales ((-1,-1)to (1,1)))and fades the text block from centre
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#anim/custom_decelerator" >
<alpha
android:duration="50"
android:fromAlpha="0.0"
android:toAlpha="0.2" />
<scale
android:duration="3000"
android:fromXScale="-1"
android:fromYScale="-1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
The problem is that, the two sets of animation is exactly not matching the animation specified in above link.
The animation doesn’t seem to originate from the dead centre of the text blocks.
I haven`t really worked with the animations, so thought to give it a try.
Trial and error led to POC level app. Hence the bunch of code.
Note that i have used some static views and repeated the animations on them.That can be polished for the expected output mentioned.
There were some minor problems in the animation example, i have fixed that.
Code snippets are as follows.
anim/zoom_to_medium.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale
android:duration="1000"
android:fromXScale="0"
android:fromYScale="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatMode="restart"
android:toXScale="1.0"
android:toYScale="1.0" />
<alpha
android:duration="50"
android:fromAlpha="0.0"
android:toAlpha="0.2" />
</set>
anim\zoom_to_full.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatMode="restart"
android:toXScale="2"
android:toYScale="2" />
<alpha
android:duration="1000"
android:fromAlpha="2.0"
android:toAlpha="0.0" />
</set>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/border_circle"
android:orientation="vertical">
<LinearLayout
android:id="#+id/llFish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="36%"
android:textColor="#android:color/black"
android:textSize="42dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:includeFontPadding="false"
android:text="Cat \n owners"
android:textColor="#android:color/black"
android:textSize="42dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/llDog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="54%"
android:textColor="#android:color/black"
android:textSize="42dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:includeFontPadding="false"
android:text="Fish \n owners"
android:textColor="#android:color/black"
android:textSize="42dp" />
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/btnToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Click Me" />
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout llDog;
private LinearLayout llFish;
private Animation zoomToMed, zoomToFull;
private Button btnToggle;
private boolean isRunning;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
llDog = (LinearLayout) findViewById(R.id.llDog);
llFish = (LinearLayout) findViewById(R.id.llFish);
zoomToMed = AnimationUtils.loadAnimation(this, R.anim.zoom_to_medium);
zoomToFull = AnimationUtils.loadAnimation(this, R.anim.zoom_to_full);
zoomToFull.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
hideViews();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
startAnimations();
}
}, 1000);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
btnToggle = (Button) findViewById(R.id.btnToggle);
btnToggle.setOnClickListener(this);
}
private void hideViews() {
llDog.setVisibility(View.GONE);
llDog.setVisibility(View.GONE);
}
private void startAnimations() {
llDog.setVisibility(View.VISIBLE);
llFish.setVisibility(View.VISIBLE);
llDog.startAnimation(zoomToMed);
llFish.startAnimation(zoomToFull);
}
#Override
public void onClick(View view) {
isRunning = !isRunning;
if (isRunning) {
startAnimations();
} else {
hideViews();
}
}
}
and the bonus shape drawable for the red circle.
border_circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#android:color/holo_red_dark"></stroke>
<size android:width="250dp" android:height="250dp" />
</shape>
Applying these sets of animations simultaneously on that parent view would not result in the animation you are looking for. If I understand you correctly you are doing:
parentView.startAnimation(animSet1);
parentView.startAnimation(animSet2);
Am I right? If so, you are doing wrong! you should instead have the following layout: (This is not a real XML code, it is a pseudo XML code)
<Parent>
<Frame1>
<TextViews>
</Frame1>
<Frame2>
<TextViews>
</Frame2>
</Parent>
By this design you should consider that Parent element as a FrameLayout and that Frame elements can be whatever layout you want. Now you can achieve your desire animation by:
frame1.startAnimation(animSet1);
frame2.startAnimation(animSet2);
If something is unclear, don't hesitate, let me know.
In my layout I have one button and an AddView on the top of the screen (Image below explain it better). I need the AddView to show only when it is loaded and for that I made an AdListener. But now I want my button to slide down when the AddView is shown. ¿How do I do that? Thank you in advance.
Here is my AdListener
adView.setAdListener(new AdListener() {
#Override
public void onAdLoaded(){
adView.bringToFront();
adView.startAnimation(slide_from_top);
}
});
Here is my XML animation slide_from_top:
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-100%p"
android:toYDelta="0%p"
android:duration="1000"/>
EDIT
Here is my Layouts XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adUnitId="MY_AD_UNIT_ID"
ads:adSize="BANNER"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/MY_BUTTON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="MY_BUTTON" />
</RelativeLayout>
You can control what happens when an animation starts/repeats/ends. So you can start the AdView animation then in the onAnimationEnd you can have the button go to View.GONE
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
}
});
Edit: Just saw that you want the button to slide down rather but still be in view. You can achieve it the same way. Just have button's animation start.
I am trying to make animation of group of buttons sliding in and out but I am struggling with one problem.
Current animation is moving correctly but is sliding out from the very left of the screen. Just where is the button used to show up this. So this makes whole animation looks bad, because this group is sliding on this.
What I want to achieve is add some margin, or something similar that will make start of the animation just from the point where is the button.
I want it to look like this:
That means those 3 images will start showing from this white line, not from the very left of the screen.
Main activity onCreate, where everything is going on:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
image1 = (LinearLayout)findViewById(R.id.imageLayout);
button = (Button)findViewById(R.id.buttonShow);
animationSlideInLeft = AnimationUtils.loadAnimation(this,
R.anim.push_right_in);
animationSlideOutRight = AnimationUtils.loadAnimation(this,
R.anim.push_left_out);
animationSlideInLeft.setDuration(1000);
animationSlideOutRight.setDuration(1000);
animationSlideInLeft.setAnimationListener(animationSlideInLeftListener);
animationSlideOutRight.setAnimationListener(animationSlideOutRightListener);
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
if(v == button)
{
if(!on)
{
curSlidingImage = image1;
image1.startAnimation(animationSlideInLeft);
image1.setVisibility(View.VISIBLE);
on = true;
}
else
{
image1.startAnimation(animationSlideOutRight);
image1.setVisibility(View.INVISIBLE);
on = false;
}
}
}
});
}
animations files:
push_right_in
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="300"
android:fromXDelta="-100%p"
android:toXDelta="0" />
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
push_left_out
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="300"
android:fromXDelta="0"
android:toXDelta="-100%p" />
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</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" >
<Button
android:id="#+id/buttonShow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Btn" />
<LinearLayout
android:id="#+id/imageLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" />
<ImageView
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" />
</LinearLayout>
</LinearLayout>
try this code:
TranslateAnimation anim = new TranslateAnimation(-50, 0, 0, 0);
anim.setStartOffset(0);
anim.setDuration(3000);
imageView.startAnimation(anim);
Hope it Helps!!
You can add Padding to the parent Relative layout in this case the animations starts from padding like this
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="64dp">
this is my code for animated image is work fine but i want to add green illuminated lighting border around image how i do this? like this image http://imgur.com/qg0JM0q ?
for fade in fade out on image rounded border???
public class MainActivity extends Activity {
Button btnAnimation, btnAnimation1, btnAnimation2;
Animation performAnimation, performAnimation1, performAnimation2;
ImageView androidImageView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
performAnimation1 = AnimationUtils.loadAnimation(this, R.layout.animation1);
performAnimation1.setRepeatCount(4);
androidImageView = (ImageView)findViewById(R.id.androidImageView);
btnAnimation1 = (Button)findViewById(R.id.btn_animation1);
btnAnimation1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
androidImageView.startAnimation(performAnimation1);
}
});
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/androidImageView"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="192dp"
android:adjustViewBounds="false"
android:src="#drawable/alertlogo" />
<Button
android:id="#+id/btn_animation1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/androidImageView"
android:layout_below="#+id/btn_animation"
android:text="perform animation 2" />
</RelativeLayout>
<!------------ animation1.xml---->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="8000" />
</set>