is it possible to have structure like the one below.
And have LinearLayout that is at front to be off screen:
<FrameLayout>
<LinearLayout>
.. Back Layout
</LinearLayout>
<LinearLayout>
.. Front layout
</LinearLayout>
</FrameLayout>
Here is the image.
What I have tried:
I have tried setting android:layout_marginLeft="-300dp" for LinearLayout A (front), but as soon as I test it on my phone the A layout is back inside of visible area.
I have also tried pushing the A layout off the screen with TranslateAnimation, after animation ends A layout is back inside of visible area.
Please help me solve the problem. Thank you.
So in case anyone needs something like this here how I solved it.
Sliding menu on top of content.
Layout structure as described in the question. Here is a simple animation in xml:
show_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="400">
</translate>
</set>
hide_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="400">
</translate>
</set>
in MyActivity
//loading hide animation and setting listener.
anim = AnimationUtils.loadAnimation(this, R.anim.hide_menu);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
//on animation end setting visibility to gone
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
MenuList.setVisibility(View.GONE);
}
});
Same thing is done for animation for show_menu animtaion except it would have onAnimationStart setting visibilty to visible.
MenuList in the code is A layout from the figure in the question.
Update:
*The best way to do a sliding menu today is to use the DrawerLayout.*
Related
I want to apply animation on layout
when i click on arrow the slide meny look like
then clink on arrow reanimation the menuenter code here
You can define an animation like this one that animates left to right and apply that to your layout:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700"/>
</set>
To apply animation to a layout resource:
Animation slideInLeft;
...
slideInLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
mYourLayout.startAnimation(slideInLeft);
Edit:
When the animation is finished the layout will go back to the starting position. to avoid that you can use one of these 3 approaches:
1- Define an animation listener like this and hide your layout
anim.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
}
});
2- Use a postDelayed Handler with the same duration has your animation duration and hide the layout at the end.
3- add this line to your animation:
anim.setFillAfter(true);
Hope it helps.
I'd like to add a press/touch effect to my widget. I'm trying with something like:
remoteView.setInt(R.id.layout_appwidget_imageButtonPrevious,
"setAlpha", 50);
remoteView.setInt(R.id.layout_appwidget_imageButtonPrevious,
"setAlpha", 255);
When the RemoteView is clicked. The problem is that there is a certain delay for the effect to take place and so only the second one is actually shown in the widget (so there is no visible touch effect). If I drop the second instruction I have a touch effect but it is permanent, which of course is something I don't want to have.
How can I solve this issue?
Thank you very much
With an animation:
iv = (ImageView) findViewById(R.id.imageView);
iv.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
iv.startAnimation(animFadein);
});
in res/anim/fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="100"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
I have two LinearLayout in my screen.
The first one should be visible and the second should be invisible at the time of activity launching . By pressing a button in first Linearlayout the first LinearLayout should be invisible and the second one should be visible.
But *I want some animation at the time of invisible and invisible state.*like by the time when the 1st is invisible it should animate towards right side of the screen the will invisible and the 2nd one should come from the leftside of the screen by giving animating effect.
Ok this would be the answer for your question
first hide the second LinearLayout in the xml layout file by using the tag android:visibility="invisible"because you dont want it for the first time while activity is launching then create anim folder inside the res folder there create two animation xml files like flip_in_left,flip_in_right in
flip_in_left.xml
<translate
android:duration="500"
android:fromXDelta="100%"
android:toXDelta="0"
/>
then in flip_in_right.xml apply
<translate
android:duration="500"
android:fromXDelta="0"
android:toXDelta="100%"
/>
get the Ids of your two LinearLayout's
LinearLayout layout1 = (LinearLayout) findViewById(R.id.layout1);
LinearLayout layout2 = (LinearLayout) findViewById(R.id.layout2);
By clicking on the Button
inside the onClickListener
layout1.startAnimation(AnimationUtils.loadAnimation(this,flip_in_right));
layout.setVisible(View.GONE);
layout2.setVisible(View.VISIBLE)
layout1.startAnimation(AnimationUtils.loadAnimation(this,flip_in_left));
like this you can do
Try this:
TranslateAnimation animation = new TranslateAnimation(0, -viewWidth, 0, 0); // To animate to the left. To animate right, remove the "-".
animation.setDuration(500);
animation.setAnimationListener(new TranslateAnimation.AnimationListener()
{
#Override
public void onAnimationStart(Animation animation) { }
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation)
{
myView.setVisibility(View.GONE);
}
});
myView.startAnimation(animation);
create anim folder in res and create xml like slie_out_left.xml
<translate
android:duration="300"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="0" />
this is another xml file name is silde_in_right.xml
<translate
android:duration="300"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
and get the animation in your activity using this
Animation anim1=AnimationUtils.loadAnimation(this,R.anim.slide_out_left);
Animation anim2=AnimationUtils.loadAnimation(this,R.anim.slide_in_right);
apply this animations to respected layouts. and maintain the respective visibility functionalities.
holder.layout.setVisibility(View.VISIBLE);
Animation animation = AnimationUtils.loadAnimation(
_context, R.animator.left_anim);
animation.setDuration(500);
holder.layout.setAnimation(animation);
holder.layout.animate();
If you are not in activity class
here is the left_anim xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
I use API 10.
I have an ImageView nested inside of a LinearLayout. The ImageView has an OnClickListener (or an OnTouchListener, I'm sure which one I ll use at the end). The ImageView is centered on the screen, and when clicked it performs the following animation.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true"
>
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration ="500"
/>
<translate
android:fromXDelta="0%"
android:toXDelta="-100%p"
android:duration ="1000"
/>
</set>
The problem is that after the animation ends, it returns to its first position, faded out to 0, but it is still clickable even if it doesn't show up. I click on an empty space where the ImageView was first positioned, and it performs the the animation again. Like clicking a ghost.
How do I make it so that the ImageView stays at the position written at android:toXDelta ??
You can set an animationListener to your animation to tackle the problem, I created this simple fonction:
public void startAnimation(final View v, final int animationResourceId, AnimationListener l){
Animation anim;
if(v!=null){ // can be null, after change of orientation
anim = AnimationUtils.loadAnimation(v.getContext(),resId);
v.setAnimation(anim);
anim.setAnimationListener(l);
v.startAnimation(anim);
}
}
Then every time I need to animate an view, I can do something like this:
startAnimation(myView, R.anim.my_anim, new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
myView.setVisibility(View.GONE);
}
});
I am creating an animation in android for two buttons.Button1 moves from bottom center to center of the screen vertically upwards direction(say in 2 seconds).Once it reaches there,the image should be there for say 2 seconds.Then the second image moves from center_right side of the screen to the center_left side of the screen while the first button is still present.Can some body please tell me how to make the first image be there for some time on the screen.Following is my code :
R.anim.alpha
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="200%p"
android:toYDelta="-11%p"
android:duration="3000"
android:repeatCount="infinite"
/>
</set>
R.anim.anim_card
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="600%"
android:toXDelta="-100%"
android:repeatCount="infinite"
android:duration="4000"
android:fillAfter="true"
/>
</set>
And in Java code:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
btn_card.clearAnimation();
btn_card.startAnimation(b);
You will have to use AnimationListener for that:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
a.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
btn_card.clearAnimation();
btn_card.startAnimation(b);
}
});
Hope it helps.