Translate Animation for layouts from one position to another in android - android

I have a Linear layout (say A - at top right) inside a FrameLayout. There are some set of new linear layouts created from the code at center bottom & added to the same FrameLayout(say l1,l2,l3...l10). Width & Height of all the layouts (Layout A & 10 new layouts) are same. Hence at center bottom location layout l10 is being shown as its the latest layout added.Remaining layouts will not be shown as they will be behind l10 . Now I want to translate all the 10 layouts from Layout B to Layout A with TranslateAnimation which I am able to do without any issues.
When the first layout(l10) translates from its position to Layout A , it covers the layout A area and i10 will be shown on Layout A now (which is what expected) and l9 will be shown at bottom center location. BUT when the next layout(l9) translates layout A , it is going below l10 . Instead it should cover l10 and l9 should be shown on Layout A area now. If anyone has faced this issue before and has any solutions for the same , please share it.
(Have clear screenshots but not able to attach as I am a new member
Thanks in advance.
**CODE**
int numberOfCardsLeft = 10;
FrameLayout fl=(FrameLayout)findViewById(R.id.cardsFrameMainLayout);
ArrayList<LinearLayout> animationCardLayouts= new ArrayList<LinearLayout>(10);//used for animation
for(int i=0;i<10;i++) //create 10 layouts & add to FrameLayout
{
cpuPlayers.add(temp.get(i));
tempCardLayout = new LinearLayout(this);
layoutParams=new FrameLayout.LayoutParams(cardLayoutWidth,cardLayoutHeight);
layoutParams.gravity=Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM;
//layoutParams.leftMargin=0;
tempCardLayout.setLayoutParams(layoutParams);
tempCardLayout.setWeightSum(10);
tempCardLayout.setOrientation(LinearLayout.VERTICAL);
tempCardLayout.setGravity(Gravity.CENTER);
//adding different childs & different background to it
animationCardLayouts.add(tempCardLayout);
fl.addView(tempCardLayout);
}
cardAnimation = new TranslateAnimation("<to fit area of Layout a>");
cardAnimation.setFillAfter(true);
cardAnimation.setDuration(900);
cardAnimation.setAnimationListener(cardAnimationListener);
animationCardLayouts.get(numberOfCardsLeft-1).startAnimation(cardAnimation);
cardAnimationListener= 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
numberOfCardsLeft--;
if(numberOfCardsLeft!=0)
{
tempCardAnimation = new TranslateAnimation("<to fit area of Layout a>");
tempCardAnimation.setFillAfter(true);
tempCardAnimation.setDuration(900);
tempCardAnimation.setAnimationListener(cardAnimationListener);
animationCardLayouts.get(numberOfCardsLeft-1).startAnimation(tempCardAnimation);
}
}
};

Related

Suggestion to use layout

I have 3 views on a screen in android, assume like set of buttons, map, list and another information view. these are all present vertically.
So, if i click on list, map should get updated & also buttons color should change. Some time if i click on button information should display.
In this scenario, is it good to use fragments? or Relative layout?. suggest
Thanks
I would go with a Activity that consists of a RelativeLayout, with 3 FrameLayouts inside the RelativeLayout. I would then add Fragments in code, to the FrameLayouts. 1 fragment to each. This way you can easily move the fragments in any way you desire. Sliding menus, top sliding, side sliding, over and under, so easy. So easy if you set it up like this.
When the far left is selected you can shove ther other 2 the right, when the center receives focus slide the left one to the left and right one right, and when the far right one gets focus, slide the other to to the left.
Or you can do top to bottom.
Or you can just have all 3 have equal space, at all times.
Or you can always shove the non-focused ones to the right, left, top, bottom, the possibilities are endless. You can shrink the unfocused 2 to 1/4 size and shove them to one side of the screen, one o top and one on bottom.
See where I'm going?
otherwise do a linearlayout, with 3 framelayouts, and set each framelayout to weight = 1 (may have to toggle a few other options to keep them perfectly even at all times), then add your fragments.
public void swapfragment(int fragId, Bundle args, boolean slide)
{
FragmentTransaction ft = getFragmentManager().beginTransaction();
switch (fragId)
{
case FRAGID_DEVICE:
currentFrag = new FragmentDevice();
currentFrag.setArguments(args);
((FragmentDevice) currentFrag).initialize();
break;
case FRAGID_NETWORK:
currentFrag = new FragmentNetwork();
currentFrag.setArguments(args);
((FragmentNetwork) currentFrag).initialize();
break;
}
ft.replace(R.id.flFragHost, currentFrag).commit();
if (slide)
slideFragment();
}
private void slideFragment()
{
final Point displaySize = new Point();
getWindowManager().getDefaultDisplay().getSize(displaySize);
if (isFragmentOut)
{
isFragmentOut = false;
Animation slideOutAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_right_out_80);
AnimationListener listener = new Animation.AnimationListener()
{
public void onAnimationStart(Animation animation)
{
}
public void onAnimationRepeat(Animation animation)
{
}
public void onAnimationEnd(Animation animation)
{
int pushback = (int) (displaySize.x * .8f);
rlFragHost.clearAnimation();
RelativeLayout.LayoutParams FragContainerParams;
FragContainerParams = (android.widget.RelativeLayout.LayoutParams) rlFragHost.getLayoutParams();
FragContainerParams.setMargins(pushback, 0, pushback * -1, 0);
rlFragHost.setLayoutParams(FragContainerParams);
}
};
slideOutAnimation.setAnimationListener(listener);
rlFragHost.startAnimation(slideOutAnimation);
}
else
{
isFragmentOut = true;
Animation slideInAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_left_in_80);
AnimationListener listener = new Animation.AnimationListener()
{
public void onAnimationStart(Animation animation)
{
}
public void onAnimationRepeat(Animation animation)
{
}
public void onAnimationEnd(Animation animation)
{
rlFragHost.clearAnimation();
RelativeLayout.LayoutParams FragContainerParams;
FragContainerParams = (android.widget.RelativeLayout.LayoutParams) rlFragHost.getLayoutParams();
FragContainerParams.setMargins(0, 0, 0, 0);
rlFragHost.setLayoutParams(FragContainerParams);
}
};
slideInAnimation.setAnimationListener(listener);
rlFragHost.startAnimation(slideInAnimation);
}
}
I know this isn't exactly what you need, but it should get you started. this is how I do sliding menus.
I think a lot of it is personal preference. My particular favorite is the linear layout. You mentioned that you want to present the items vertically, well, just set android:orientation="vertical", put your items in the xml file in order, and there you go. I've never used fragments personally, so I can't speak to their usefulness, but the linear layout has yet to let me down.

Multi layers viewPager

I need to create an app that has 2 special behaviors on a viewPager that has 3 pages:
On page 0, there are 2 images, one on top of the other. the background image doesn't move when going from page 0 to page 1 , but it will move when going from page 1 to page 2 (and vice versa) . On page 1, there is nothing besides the background image from page 0.
In short, to the user, it seems as if the image from page 0 actually unveils the content of page 1 when scrolling to it (since page 1's content is behind page 0).
Some pages would have on top views that move faster than the viewPager, providing an effect as if they float above it, in a semi-3d way . Maybe show up after half the page was scrolled.
Both special behaviors are very hard to think about, and I would like to ask for your suggestions of how to achieve them.
Another tricky thing is that I need to use an indicator of the viewPager, so even if I decide to use multiple viewPagers, I would have to deal with this issue too.
Copy the background image in both Page 0 and Page 1, and try changing the image offset in onPageScrolled callback to achieve your goal~
FragmentPic is a simple fragment with only one imageview child as iv
/*this method change position of image to move it against its parent and make it looks static to the screen */
public void changeImageOffset(int offset) {
RelativeLayout.LayoutParams lp = (LayoutParams) iv
.getLayoutParams();
lp.leftMargin = offset;
lp.rightMargin = -offset;
iv.setLayoutParams(lp);
}
in the viewPager activity
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
#Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
}
#Override
public void onPageScrolled(int position, float arg1, int arg2) {
((FragmentPic) mAdapter.getItem(position))
.changeImageOffset(arg2);
}
#Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
The above code can make the page1 static and the page2 covering it from right to left.

How to set the position of a button after animation?

I have a button (placed in a linearlayout) with animation. After the animation is completed (simple translateAnimation) I want that animated button to be enabled. I realized that using an animation only has an effect for the button drawable, so the clickable "place" stays at the original position.
layout= (LinearLayout) findViewById (R.id.newitemtext);
layout.setBackgroundResource(R.drawable.white_box);
btn = (Button) findViewById (R.id.btn);
moveLefttoRight = new TranslateAnimation(0,0 , 0, 200);
moveLefttoRight.setDuration(1000);
moveLefttoRight.setFillAfter(true);
animbutton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
layout.startAnimation(moveLefttoRight);
layout.setEnabled(true);
}
});
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.i("TAG", "CCIK");
}
});
The btn button is in the LinearLayout layout. How could I set the position after the animation? I tried to use setPadding but with no success.
Thanks in advance!
Use View.setLayoutParams(), to update a Views params - note that it depends on what kind of layout the view is inside as to how the params can be updated. For example, if your view is in a LinearLayout, then you will only be able to adjust params that relate to a LinearLayout (gravity, weight, width, height, etc.) so you would not be able to adjust the absolute X/Y coords. You may want to switch to something like a RelativeLayout to try and move the view to the final destination based on the location of other views.

Android Layout Animation won't work

I have a LinearLayout (LayoutContentView) which can contain one or two view (SubView1 and SubView2) (they are eitherTextView or ImageView).
This layout is in another LinearLayout (MyScreenLayout).
I want to make an animation on LayoutContentView so it can move and show just a part of it in MyScreenLayout.
Both of these layouts have setClipChildren(false); so it can let it's children draw outside it-self.
Depending on different parameters, I can change the size of the content, and the size of the content I will show.
Basically, I expend from top to bottom to show the two subviews and unexpend for bottom to top to show only the second subview. Before I expend, I increase the size of the LayoutContentView, so it can show the two subviews, and after I unexpend, I decrease the size of the LayoutContentView, so it can only show the second subview, and it let space on the screen for other elements.
Here is my method for expending and un-expending LayoutContentView :
mLayoutContentView.clearAnimation();
float yFrom = 0.0F;
float yTo = 0.0F;
float xFrom = 0.0F;
float xTo = 0.0F;
if (expend) { // if we expend
// I change the height of my LayoutContentView so it we can show it's two subviews
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView1H + subView2H;
setLayoutParams(lp);
invalidate();
// we start the animation so it shows only the second subview
yFrom = -subView1H;
// and we animate from top to bottom until it shows the two subviews
yTo = 0;
} else { // if we un-expend
// we animate from bottom to top starting by showing the two subviews
yFrom = 0;
// and progressively hiding the first subview and showing only the second subview
yTo = -subView1H;
}
Animation anim = new TranslateAnimation(xFrom, xTo, yFrom, yTo);
anim.setDuration(1000);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (!expend) {
// if we un expend at the end of the animation we can set the size of LayoutContentView to the size of the second subview again
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView2H;
mLayoutContentView.setLayoutParams(lp);
invalidate();
}
}
});
mLayoutContentView.startAnimation(anim);
The way I made my animation I need it to apply on LayoutContentView, the layout which contain two subview, and with startAnimation() it doesn't do the animation.
I tried to use a LayoutAnimationController, but instead of doing the animation on the LayoutContentView, it does it on each of its children...
I also tried to do the animation on each children myself, but I don't know why, the second subview isn't shown.
Each time I've tried to use HierarchyViewer, but it's does see the change made by the animation.
Does anyone know a solution or have faced the same problem and found a good solution ?
EDIT :
Well it seems that if you set a background color to your TextView and move them with animation, the background move but even if you have set the fill after parameter to your animation, the background moves back to it's original position or something like that, and therefore as I set a background color to both of my SubViews, somewhat one of the SubView's background hide the background of the other...
And there also a problem if after the animation, one of the SubView is still outside the its layout, there is also a problem during the animation, so I add a limitation to what I intended to here too.

TranslateAnimated ImageView not clickable after animation [Android]

I have 2 ImageViews that I translate from the top of the screen to the bottom. these views are infalted from xml and the animation is added from java code. The animation works perfectly, but the onClickListener I added in java code doesn't seem to work. I used fillAfter attribute of the animation to make the iamges stay at their arrival after the translation, but THESE images aren't clickable anymore... However, their position before translation remains clickable...
I can't see the logic of this. Could anyone give me some piece of advice about that?
This is because Animations affects only the drawing of widget. However, The real Location is not affected -It is still in the previous one-.
To overcome this problem, you need to update the layout parameters of the ImageView manually by installing an animation listener as follows:
Animation.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation arg0) {
}
public void onAnimationRepeat(Animation arg0) {
//TODO Auto-generated method stub
}
public void onAnimationEnd(Animation arg0) {
android.widget.LinearLayout.LayoutParams params = new LayoutParams(
android.widget.LinearLayout.LayoutParams.FILL_PARENT,
android.widget.LinearLayout.LayoutParams.WRAP_CONTENT);
params.topMargin = addLocationButton.getTop()-100;
ImageView.setLayoutParams(params);
}
});

Categories

Resources