I would like to have a button in my android application trigger a slide down view of a form. I want to have a view at the top of the screen, a list at the bottom of the screen, and I want to have the slide down form view appear between the two when a button is clicked.
I have no problem showing the view, but can't seem to animate it from hidden to shown on the screen.
Any ideas on how this could work?
public void doSlideDown(View view){
RelativeLayout myView = (RelativeLayout)findViewById(R.id.my_view);
addListingView.setVisibility(myView.VISIBLE);
Animation slideDown = setLayoutAnim_slidedown();
myView.startAnimation(slideDown);
}
public void doSlideUp(View view){
RelativeLayout myView = (RelativeLayout)findViewById(R.id.my_view);
Animation slideUp = setLayoutAnim_slideup();
myView.startAnimation(slideUp);
}
public Animation setLayoutAnim_slidedown() {
AnimationSet set = new AnimationSet(true);
Animation animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
Animation.RELATIVE_TO_SELF, 0.0f);
animation.setDuration(800);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
// MapContacts.this.mapviewgroup.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
Log.d("LA","sliding down ended");
}
});
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(
set, 0.25f);
return animation;
}
public Animation setLayoutAnim_slideup() {
AnimationSet set = new AnimationSet(true);
Animation animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f);
animation.setDuration(800);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
RelativeLayout bodyView = (RelativeLayout)findViewById(R.id.bodyView);
RelativeLayout myView = (RelativeLayout)findViewById(R.id.my_view);
addListingView.clearAnimation();
bodyView.removeView(myView);
}
});
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(
set, 0.25f);
return animation;
}
This may help you:
ANDROID ANIMATION SLIDEDOWN SLIDEUP
Android Animation Framework
Related
I am animating my relative layout with some images in my app. When i write the code to animate the layout on button click, for the first time it is just displaying not animating. Then on the same button click i am sliding up the layout. After that if i click the button sliding down animation works fine.Actually i have to write this sliding down animation inside onCreate itself instead of button click. Given below is my code. Can anyone tell me why it s not showing the animation?
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.fadeview);
iconLayout=(RelativeLayout)findViewById(R.id.icon_ayout);
iconLayout.postDelayed(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
iconLayout.setVisibility(View.VISIBLE);
SlideToDown();
}
}, 500);
}
public void SlideToAbove() {
Animation slide = null;
slide=new TranslateAnimation(0.0f, 0.0f, 0.0f,-iconLayout.getHeight());
slide.setDuration(1000);
slide.setFillAfter(true);
slide.setFillEnabled(true);
iconLayout.startAnimation(slide);
slide.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
iconLayout.clearAnimation();
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
iconLayout.getWidth(), iconLayout.getHeight());
// lp.setMargins(0, 0, 0, 0);
//lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
iconLayout.setLayoutParams(lp);
}
});
}
public void SlideToDown() {
Animation slide = null;
slide=new TranslateAnimation(0.0f, 0.0f, -iconLayout.getHeight(), 0.0f);
slide.setDuration(1000);
slide.setFillAfter(true);
slide.setFillEnabled(true);
iconLayout.startAnimation(slide);
slide.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
iconLayout.clearAnimation();
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
iconLayout.getWidth(), iconLayout.getHeight());
lp.setMargins(0,0, 0, 0);
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
iconLayout.setLayoutParams(lp);
}
});
}
This is because you are starting animation in onCreate() and in this time the view is available but it is not actually drawn(doesnt have width and height). Here the value of iconLayout.getHeight() will return value 0.
Solution is to setup a Layoutlistener to the view and the listener will notity you when it is drawn. After that you can start the animation.
ViewTreeObserver loadingObserver = iconLayout.getViewTreeObserver();
loadingObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
iconLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
SlideToDown();
}
});
I've implemented a small animation on a button placed over a list view.
Basically it's like a quick action button to add/refresh the list.
What I want to do is to animate the button once the user has clicked on it and display a popup. Once the popup has been dismissed, the button should go back to its initial state.
I've made the followning code:
final PopupWindow popup = new PopupWindow(getContext());
// Attach layout
LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.core_popup_quickactions, new LinearLayout(getContext()));
// Creating the PopupWindow
popup.setContentView(layout);
popup.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
popup.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
popup.setOutsideTouchable(true);
popup.setFocusable(true);
popup.setBackgroundDrawable(new BitmapDrawable());
popup.setOnDismissListener(new OnDismissListener() {
#Override
public void onDismiss()
{
// Rotate back
RotateAnimation animation = new RotateAnimation(-45.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
QuickActionButton.this.setClickable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
QuickActionButton.this.setClickable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
}
});
popup.setTouchable(false);
popup.showAsDropDown(this, 0, -dpToPx(350));
// Rotate the icon
RotateAnimation animation = new RotateAnimation(0.0f, -45.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
popup.setTouchable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
popup.setTouchable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
The problem now is that when I scroll the view and press the quick action button, the animation starts and is reseted after a few miliseconds.
Is that a normal behaviour because of the Popup ?
Finally, I've found a dirty way to solve this issue:
handler.postDelayed(new Runnable() {
#Override
public void run()
{
if (!popup.isShowing())
{
handler.postDelayed(this, 100);
return;
}
// Rotate the icon
RotateAnimation animation = new RotateAnimation(0.0f, -45.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
popup.setTouchable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
popup.setTouchable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
}
}, 100);
It's just a delayed until the popup has been completely shown.
I'm using the following code to make turns (left or right) in a series. So if i call it one after another ie: turn(90); turn(90); turn(-90); all it shows is the last one. I'd like to show them all and it wait until the first one is done before moving on to the next. Any idea's?
public void turn(int i)
{
RotateAnimation anim = new RotateAnimation( currentRotation, currentRotation + i,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
currentRotation = (currentRotation + i) % 360;
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(1000);
anim.setFillEnabled(true);
anim.setFillAfter(true);
token.startAnimation(anim);
}
So what i did was create a que of the animations and an iterator to run through it... after i defined all the animations that needed to be done, added them to the que, i ran the first one, then within the AnimationListener handled the rest.
Queue<RotateAnimation> que = new LinkedList<RotateAnimation>();
Iterator<RotateAnimation> queIt;
public void turnToken(int i){
RotateAnimation anim = new RotateAnimation( currentRotation, currentRotation + i,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
currentRotation = (currentRotation + i) % 360;
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(1000);
anim.setFillEnabled(true);
anim.setAnimationListener(this);
anim.setFillAfter(true);
que.add(anim);
}
AnimationListener:
#Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
if(queIt.hasNext()){
token.startAnimation((Animation) queIt.next());
}
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
Ok, so I have a View where its being animated with the following code:
RelativeLayout rl = (RelativeLayout) findViewById(R.id.productPage_parentLayout_RL);
ImageView iv = new ImageView( ProductPage.this );
imageLoader.DisplayImage(FULL_PRODUCT_INFO.getFirstImage(), iv);
Animation animation = new TranslateAnimation(0, helper.getDeviceWidth() - 100,0, 0);
animation.setDuration(1000);
animation.setFillAfter(true);
rl.addView(iv);
With this code, the view starts from the left side of the screen and moves to almost the end of the screen, but I also want to fade-out the view and hide/destroy it in the end. I tried to search anything related to this, but couldn't find any.
Any help is appreciated.
Try this
ObjectAnimator move=ObjectAnimator.ofFloat(iv, "translationY",100f);
move.setDuration(3000);
ObjectAnimator alpha1=ObjectAnimator.ofFloat(iv, "alpha",0.5f);
alpha1.setDuration(1000);
ObjectAnimator alpha2=ObjectAnimator.ofFloat(iv, "alpha",0);
alpha2.setDuration(2000);
AnimatorSet animset=new AnimatorSet();
animset.play(alpha2).before(alpha1).with(move);
animset.start();
Animation a = new AlphaAnimation(1.0f, 0.0f);
a.setDuration(1000);
a.setFillAfter(true);
iv.startAnimation(a);
AnimationSet set = new AnimationSet(true);
set.addAnimation(animation)
set.addAnimation(a)
set.setFillAfter(true);
iv.startAnimation(set);
set.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationEnd(Animation animation) {
iv.setVisibility(View.INVISIBLE);
}
});
I have an ImageView in my screen and I want to make it shake (rotate left and then rotate right).
I know how to animate an ImageView, this is my code:
new RotateAnimation(20f, 50f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setInterpolator(new LinearInterpolator());
anim.setRepeatCount(Animation.INFINITE);
anim.setDuration(700);
// Start animating the image
final ImageView splash = (ImageView) findViewById(R.id.mobileshake);
splash.startAnimation(anim);
The problem is, right now the Imageview is looping one animation, but I want 2 animations to loop (rotate left and then rotate right).
How can I do this?
Sorry for my bad English..
You can combine two (or more) animations using an AnimationSet.
There is an example of a "Shake" animation in API Demos using TranslateAnimation defined in xml. You can achieve the result you are looking for by following a similar approach.
I figured it out by doing the following and works very smooth :)
final RotateAnimation anim1 = new RotateAnimation(20f, 50f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim1.setInterpolator(new LinearInterpolator());
//anim1.setRepeatCount(Animation.INFINITE);
anim1.setDuration(300);
final RotateAnimation anim2 = new RotateAnimation(50f, 20f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim2.setInterpolator(new LinearInterpolator());
//anim2.setRepeatCount(Animation.INFINITE);
anim2.setDuration(300);
final ImageView splash = (ImageView) findViewById(R.id.mobileshake);
anim1.setAnimationListener(new AnimationListener(){
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
splash.startAnimation(anim2);
}
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}});
anim2.setAnimationListener(new AnimationListener(){
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
splash.startAnimation(anim1);
}
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}});
splash.startAnimation(anim1);