2

I'd like to have a sliding effect on the arrow on the side of the screen. By the time I clicked the arrow a button will be displayed with sliding effect. I am not sure about how I can do this.

I think I can use embedded fragment on this one but I don't know to to achieve the slide effect.

enter image description here

1
  • On what way I can achieve this on animations sir. Thanks
    – rahstame
    Jul 26, 2013 at 8:12

3 Answers 3

7

Here is the code to achieve this. I wrote comments as well.

TranslateAnimation anim = new TranslateAnimation(0, 150, 0, 0); //first 0 is start point, 150 is end point horizontal
anim.setDuration(1000); // 1000 ms = 1second
yourarrow.startAnimation(anim); // your imageview that you want to give the animation. call this when you want it to take effect

if you want it to stay like that after the animation, put this:

anim.setFillAfter(true);
2

Like I have in one of my projects:

a) Create animations

public Animation getEditModeAnimation() {
    TranslateAnimation animation = new TranslateAnimation(0,
            convertDpToPixel(57, this.context), 0, 0);
    animation.setDuration(300);
    animation.setFillAfter(true);

    return animation;
}

public Animation getNonEditModeAnimation() {
    TranslateAnimation animation = new TranslateAnimation(
            convertDpToPixel(57, this.context), 0, 0, 0);
    animation.setDuration(300);
    animation.setFillAfter(true);

    return animation;
}

b) Combine with your UI component:

Animation editAnimation = getEditModeAnimation();
yourUIComponent.setAnimation(editAnimation);

Animation nonEditAnimation = getNonEditModeAnimation();
yourUIComponent.setAnimation(nonEditAnimation);

c) Helper method (if needed): //simply converts dp to px - pretty convenient

public static float convertDpToPixel(float dp, Context context) {
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return px;
}

d) Plus some flags which will denote the state of a component, so you will know when to use one or another mode

public enum MODES {
    EDIT_MODE(1), NON_EDIT_MODE(0);

    private int mode_identifier;

    private MODES(int mode_identifier) {
        this.mode_identifier = mode_identifier;
    }
}

e) And a global variable to hold the current state

private MODES yourUIComponentState;

f) To create some UI component dynamically:

Button yourUIComponent = new Button(yourContextReferenceHere);
TextView yourUIComponent = new TextView(yourContextReferenceHere);
RelativeLayout(yourUIComponent) = new RelativeLayout(yourContextReferenceHere);
....

g) To create some UI component in XML:

 <Button android:id="@+id/yourUIComponent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
 />

 <TextView android:id="@+id/yourUIComponent"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
 />

h) To reference UI components created inside an Activity:

Button yourUIComponent = (Button) findViewById(R.id.yourUIComponent);
TextView yourUIComponent = (TextView) findViewById(R.id.yourUIComponent);
5
  • Thanks sir, do we need xml for this one or the button is created dynamically?
    – rahstame
    Jul 26, 2013 at 8:19
  • well, it is up to you how you create your buttons Jul 26, 2013 at 8:20
  • I'm not quite familiar with animations sir, can you show me how you use your functions. thanks. )
    – rahstame
    Jul 26, 2013 at 8:32
  • You can take a look to my code which is 4 lines and commented. Just set your button.startAnimation on your arrow click and you are good to go it is working and I am using that code.
    – canova
    Jul 26, 2013 at 8:36
  • if you look at b) you will see how to use animations Jul 26, 2013 at 8:36
2
Animation anim = E.getAnimation(anim_duration, 0, your_layout.getWidth(), 0, 0);
anim.setAnimationListener(new AnimationListener() {     
   @Override
   public void onAnimationStart(Animation animation) {}                            
   @Override
   public void onAnimationRepeat(Animation animation) {}   
   @Override
   public void onAnimationEnd(Animation animation) {}
});
your_layout.startAnimation(anim);

This your_layout.getWidth() will be positive when you want to slide the layout to your right. Override those elements if you want extra functionality.

Hope this gives you the idea how to do it.

EDIT: "E" class uses this method:

    public static Animation getAnimation(long duration, float fromX, float toX, float fromY, float toY){ 
        TranslateAnimation tAnimation = new TranslateAnimation(fromX,toX,fromY,toY);
        tAnimation.setDuration(duration); 
        tAnimation.setFillEnabled(true); 
        return tAnimation; 
    }
2
  • How about the button sir. Not quite familiar with animations. Thanks
    – rahstame
    Jul 26, 2013 at 8:30
  • Should be the same, button has also the method getWith() and startAnimation(Animation anim). And sorry, just noticed I'm using other class for doing it, edited my answer. If any doubts, just tell me. Jul 26, 2013 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.