I have a RelativeLayout (vertical) defined to include 3 Views. The top and bottom views are 16 pixels high, and display text. The middle view displays graphics for a game application.
At various points during game play, the app runs a TranslateAnimation that effectively "scrolls" the middle view up or down. This keeps the game character in the game "centered" in the middle view.
My problem is that when the animation runs, the translation causes the top or bottom views to be overwritten. This lasts only for the duration of the animation. When the animcation completes, everything is fine and the top/bottom views display their text as expected. What is surprizing to me is that the translation animation displays content outside of the (middle) view in which it is running. My desire is that when the translation slides the display up/down, that the animation only affects the middle view and does not obscure content in the top or bottom views.
The following is the code I am using to create the layout. The custom views derive directly from View and display content in their onDraw(Canvas) methods.
RelativeLayout rl = new RelativeLayout(this);
topView = new MyTextView(this);
topView.setId(1);
middleView = new MyGameView(this);
middleView.setId(2);
bottomView = new MyTextView(this);
bottomView.setId(3);
final int textSize = 16;
RelativeLayout.LayoutParams lpTop = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, textSize);
lpTop.addRule(RelativeLayout.ALIGN_PARENT_TOP);
RelativeLayout.LayoutParams lpBottom = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, textSize);
lpBottom.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
RelativeLayout.LayoutParams lpMiddle = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
lpMiddle.addRule(RelativeLayout.BELOW, 1);
lpMiddle.addRule(RelativeLayout.ABOVE, 3);
rl.addView(topView, lpTop);
rl.addView(middleView, lpMiddle);
rl.addView(bottomView, lpBottom);
setContentView(rl);
The code in middleView that launches the animation is as follows:
TranslateAnimation ta = new TranslateAnimation(0, 0, 0, yDistance);
ta.setDuration(500);
startAnimation(ta);
I have tried a number of things to get this animation to behave as desired, but have been unable to do so. Hopefully someone out there can help. Thanks in advance.
Related
I want to display an image, but this image will reveal itself from top to bottom slowly. You can imagine that if this image is a text, then this text will be revealed line by line. And each line is revealed by the fade effect. Is there anyway to do this ? I don't even know which term should I search for.
There is one way I know to do that and it is just simple and it's by using the class called TransitionManager.
Here's a simple code you can put on your onCreate and test it.
final ImageView image = new ImageView(this);
image.setImageResource(R.mipmap.ic_launcher);
// Set the initial position of the image
RelativeLayout.LayoutParams imageDetails = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT
);
imageDetails.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
imageDetails.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
final ViewGroup layout = (ViewGroup)findViewById(R.id.mainLayout);
layout.setOnTouchListener(new ViewGroup.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
// Use the default transition of TransitionManager
TransitionManager.beginDelayedTransition(layout);
// Set the final position of the image
RelativeLayout.LayoutParams imageDetails = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT
);
imageDetails.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
imageDetails.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
image.setLayoutParams(imageDetails);
return true;
}
});
layout.addView(image, imageDetails);
There is one disadvantage that I know when using this approach. The minimum SDK version should be 19.
PS: If you want more control on the transitions or animations you make. Just read further on animations and transitions on Android.
OK, if you want to move the view from top to down, you could just use an animator to animate that. If you want to Reveal the image from top to bottom, then you can do that with a trick. Have an image view and load your image in it. Now have another view on top of it. All you have to is animate the height of that view until, the top coincides with the bottom. You will have your reveal animation.
If you want to create the reveal with fade effect, then you can mask the view on top and animate the mask. I used this in the past to create the circular reveal. For the mask view take a look at this : https://github.com/christophesmet/android_maskable_layout
I am trying to change the height of the view programmatically.
What i have tried is -
RelativeLayout rlOne;
rlOne = (RelativeLayout) findViewById(R.id.rlOne);
And on some click event i am changing the height using the LayoutParams.
rlOne.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, NEWHEIGHT));
The height is increased but the transition is not smooth.
How can i achieve a smooth transition from view's original height to view's new height?
Can i slow down the transition ?
Basically the idea is that, you calculate the new height (the height after your view increasing) view first and write an thread, increase the height of you old view (the height of your view before increasing) pixel by pixel(may be 5-10 pixels at a time) until it reaches the new height. Hope the idea could help.
Play with from/to/speed values
ScaleAnimation scaleAnimation = new ScaleAnimation(from, to, from, to, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rlOne.setAnimation(scaleAnimation);
Source:
https://stackoverflow.com/a/1624689/1276374
You could write a for loop, where the view's height is increased by very little, than a pause is made before increasing the counter. In this way, the user will have the impression of a smooth transition.
Use
LinearLayout linearLayout = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
i need to draw two imageviews, (+) and (-) symbols, on the bottom right corner of the screen, similar of the zoom objects from googlemaps.
I need to do it programatically, with Java, and without using XML files.
I'm trying to do with relativelayout, but i dont know how to do it. They must to be on the bottom right corner of the screen, with 5 or 10 pixels of separation between them.
How to do it?
Also will be cool if someone can tell me how to detect when a user has pressed each image.
You can use gravity.
http://developer.android.com/reference/android/widget/RelativeLayout.html#setGravity(int)
this might do it:
image.setGravity(Gravity.RIGHT | Gravity.BOTTOM);
This should work
ImageView plusImage = new ImageView(this);
RelativeLayout.LayoutParams pp = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
pp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,RelativeLayout.TRUE);
pp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,RelativeLayout.TRUE);
pp.leftMargin = 5;
plusImage.setId(501);
plusImage.setLayoutParams(pp);
plusImage.setImageResource(R.drawable.icon);
ImageView minusImage = new ImageView(this);
RelativeLayout.LayoutParams mp = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
mp.addRule(RelativeLayout.LEFT_OF,plusImage.getId());
mp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,RelativeLayout.TRUE);
mp.rightMargin = 5;
minusImage.setId(502);
minusImage.setLayoutParams(mp);
minusImage.setImageResource(R.drawable.icon);
//Add the images to the outer layout
((RelativeLayout)findViewById(R.id.outerlayout)).addView(plusImage);
((RelativeLayout)findViewById(R.id.outerlayout)).addView(minusImage);
I need to create a map with items on it (the map consists of a drawable object, which represents a room) and I thought about using buttons with background images for the items so that they are clickable.
I guess the AbsoluteLayout fits here the best, but unfortunately it's deprecated.
What layout would you recommend me for this kind of application ? Is there another layout which supports X/Y coordinates ?
Relative Layout supports X,Y coords -- and that would probably be the best, since you can set the layout relative to the map instead of the screen.
Cool. THanks so much !
Here is the code, if somebody needs it too.
RelativeLayout RL = new RelativeLayout(this);
RL.addView(V, RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
Button t = new Button(this);
t.setText("text");
t.setBackgroundResource(R.drawable.test);
int top = 200; //y
int left = 100; //x
RelativeLayout.LayoutParams LP= new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
LP.setMargins(left, top, 0, 0);
t.setLayoutParams(LP);
RL.addView(t);
setContentView(RL);
Hi I'd like to programatically increase the height allocated to a TextView, and have the activity layout redrawn accordingly (the text view has a maximum height until the user clicks it, then it takes up all height required, wrap_content).
setHeight() isn't working, even coupled with invalidate() or postInvalidate(). I am able to change the contents of the TextBox with setText() but it isn't altering the existing specified height.
Android 1.5 under the 1.6 SDK.
Didn't test that , but try to create new Layout params and assign it to a view
This is for a button, but idea is same.
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.weight = 0;
shareBtn.setPadding(50, 0, 50, 0);
shareBtn.setLayoutParams(params);