I have two views in a RelativeLayout, both of which fill the screen, so view B is on top of view A. I also have an animation defined which can move view B partially offscreen to show view A underneath. The animation works fine, but I'm having the classic issue of the view bounds not moving with the view, so the button that I use to trigger the animation (which is located on view B) is only clickable from its original position, no matter where view B is located. The issue that I'm having is that after the animation ends, when I set the layout params it's causing view B to be redrawn again, translated from the location of the end of the animation.
As a concrete example, the left edge of view B is initially at x = 0, with a button at x = 450. When the button is pressed, an animation moves the view to x = -400. This works properly - the view is partially off the left hand side of the screen, and the button is now at x = 50, so it is still on screen. The click area for the button though is still at x = 450. So now I set the layout params on view B:
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewB.getLayoutParams();
lp.rightMargin = 400;
viewB.setLayoutParams(lp);
Once the new params are set, the view gets 400px of padding on the right, moving the entire view to x = -800. The clickable area for the button is now properly at x = 50 though, so it seems like I can have it look right or act right. Any idea what I'm doing wrong? Here's how the animation is set up.
Animation anim = null;
anim = new TranslateAnimation(0, -400, 0, 0);
anim.setAnimationListener(this);
anim.setDuration(duration);
viewB.startAnimation(anim);
I was able to get things working by changing the layout params before or after the animation, as appropriate:
private int marginOffsets;
public void triggerAnimation(boolean show, offset)
{
int curX = 0;
int newX = 0;
Animation anim = null;
this.showingPanel = show;
if(show)
{
curX = 0 - offset;
android.widget.RelativeLayout.LayoutParams lp = new android.widget.RelativeLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT);
lp.rightMargin = 0;
rootPanel.setLayoutParams(lp);
}
else
{
newX = 0 - offset;
}
marginOffsets = newX < 0 ? 0 - offset : offset;
anim = new TranslateAnimation(curX, newX, 0, 0);
anim.setAnimationListener(this);
anim.setDuration(duration);
startAnimation(anim);
}
public void onAnimationEnd(Animation anim)
{
//This prevents flicker when the view is moving onscreen.
clearAnimation();
if(!showingPanel)
{
//Move the margin to move the actual bounds so click events still work.
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT);
lp.rightMargin = 0 - marginOffsets;
rootPanel.setLayoutParams(lp);
}
}
Related
For an android app, Im doing infinite Translate Animation.
imageview starts first and after a delay of 1 second, imageview2 starts.
Animation animation = new TranslateAnimation(0, 0, -500, 500);
animation.setDuration(4000);
imageview.startAnimation(animation);
animation.setRepeatCount(Animation.INFINITE);
Animation animation2 = new TranslateAnimation(0, 0, -500, 500);
animation2.setDuration(4000);
imageview2.startAnimation(animation2);
imageview2.setStartOffset(1000);
animation2.setRepeatCount(Animation.INFINITE);
The problem is that, after sometime imageview overlaps imageview2.
What Can I do to avoid the overlapping of 2 images ?
Any pointer would be appreciated.
You might want to try something like this:
private boolean isViewOverlapping(View firstView, View secondView) {
int[] firstPosition = new int[2];
int[] secondPosition = new int[2];
firstView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
firstView.getLocationOnScreen(firstPosition);
secondView.getLocationOnScreen(secondPosition);
int r = firstView.getMeasuredWidth() + firstPosition[0];
int l = secondPosition[0];
return r >= l && (r != 0 && l != 0);
}
This is a method that will take in two views and check whether they are overlapping. If they are, it will return a boolean of true. I would presume that once you get this boolean returned as true, you would then want to carry out another action to ensure they are not overlapped anymore, such as moving one view down 400 pixels. This would then result in the images not overlapping and you would have avoided the worrying situation. Hope this helps!
I'm wondering what would be the best solution to get to the result shown below.
Here is what i've found so far:
an ImageView for the forest and a transparent surfaceView (to handle touch) on which I would draw the rectangles?
Or...
Just One SurfaceView with the image set as background and rectangles directly drawn on...?
For those 2 I've already chosen a RelativeLayout.
Which of those 2 would be the most efficient and easiest to do?
Or maybe there is another way which I haven't think about.
In any case thanks for your advice, here is what I tend to...
I've implemented this by placing the image in a RelativeLayout (FrameLayout would work too), and then adding each outlined view programatically. If you know the x and y origin (perhaps as a ratio to the image) and the size for each area, you can easily inflate each view/area (with a black border, transparent center), make it clickable and set a listener, and then set it's origin by adjusting it's margins. You may want to perform all of this after the image has finished laying out:
I put this in onActivityCreated of my Fragment, but other lifecycle methods would work too...
ViewTreeObserver vto = image.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (image.getMeasuredHeight() > 0) {
addHotSpots();
ViewTreeObserver obs = image.getViewTreeObserver();
obs.removeGlobalOnLayoutListener(this);
}
}
});
And this is how I actually place all the hotspots/areas:
protected void addHotSpots() {
HotSpot[] hotSpots = res.hotspots;
for (HotSpot hs : hotSpots) {
addHotSpotToImage(hs);
}
private void addHotSpotToImage(HotSpot hs) {
int height = image.getMeasuredHeight();
int width = image.getMeasuredWidth();
//this piece will probably be different for you
//depending on what you know about the area's intended size/position
double hsHeightRatio = hs.lr.y - hs.ul.y;
double hsWidthRatio = hs.lr.x - hs.ul.x;
double leftMargin = hs.ul.x * width;
double topMargin = hs.ul.y * height;
double hsHeight = height * hsHeightRatio;
double hsWidth = width * hsWidthRatio;
LayoutInflater vi = (LayoutInflater) image.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View newSpot = vi.inflate(R.layout.question_hotspot, null);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams((int) hsWidth, (int) hsHeight);
newSpot.setTag(hs.key);
newSpot.setFocusable(true);
newSpot.setClickable(true);
newSpot.setFocusableInTouchMode(true);
newSpot.setOnTouchListener(this);
params.topMargin = (int) topMargin;
params.leftMargin = (int) leftMargin;
image.addView(newSpot, params);
}
I'm trying to make a dynamic grid layout, it being API 10+ is the part that's been making it slow going. I tried to make it wrap automatically.. but in the end found it easier just to try to force it into a grid pattern using coordinates. This script was working by itself when I did the positioning at time of creation, but now I am trying to loop through each item as a sort. So if one item is deleted, they all float back into a grid without a hole in the middle.
Problem is, it seems the layout parameters are only applying to the last object.
Here's some base variables and onCreate setup:
int screenWidth;
int screenHeight;
int distStep = 130;
int leftPad = 20;
int numCols;
int baseID = 0;
android.util.DisplayMetrics metrics = this.getResources().getDisplayMetrics();
screenWidth = metrics.widthPixels;
screenHeight = metrics.heightPixels;
numCols = (int) (screenWidth - leftPad) / distStep;
int scrRemain = screenWidth - ((numCols * distStep) + leftPad);
distStep += (int) scrRemain / numCols;
Then on to the main function for adding:
public void addObjToLayout() {
RelativeLayout relLay = (RelativeLayout) this.findViewById(R.id.mainWindow);
for(int i = 1; i <= currQuantity; i++){
TextView tv=new TextView(this);
tv.setTextSize(40);
tv.setId(baseID + i);
tv.setPadding(24, 4, 24, 4);
tv.setBackgroundColor(0x110000FF);
tv.setText(String.valueOf(baseID + i)); //Val for debugging
tv.setTextColor(0xFFFFFFFF);
relLay.addView(tv);
}
baseID += currQuantity;
sortLayout();
}
Then the sorting:
public void sortLayout() {
int leftNum = 20;
int topNum = 0;
for(int i = 1; i <= baseID; i++){
TextView tv= (TextView) this.findViewById(baseID);
MarginLayoutParams mp = new MarginLayoutParams(tv.getLayoutParams());
mp.setMargins(leftNum, topNum, 0, 0);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(mp);
tv.setLayoutParams(lp);
leftNum += distStep;
if(leftNum >= distStep * numCols){
leftNum = leftPad;
topNum += distStep;
}
}
}
What I am getting is all the textViews pile up in the top left corner, except the last one which is positioned exactly where it should be. So it seems in my head, the params object isn't applying until the loop ends or something.. but logically I don't see why.
As I said, this worked when I set the params at the get go, problem is mass updating them all at once. I am pretty new to android, so I hope I'm not just doing something stupid.
Thanks for your time
Margin means it will set a gap between the previous view and current view.
When you add view1, view2 and view3 to grid layout and if you remove view2 at some point of time, then the margin for view3 is set according to view1. So, it won't leave empty space in place of view2. Instead of removing view2 at run time, set the background for view2 as null and set the text as empty as below.
textView.setBackground(null);
textView.setText("");
So that the view is still available but looks as deleted.
Started looking into GridView using an extended baseAdapter. Looks promising:
For more (see #2):
http://www.mkyong.com/android/android-gridview-example/
I want the button to be inflated with its centre point = touch point.
At the time of inflating, m doing as follows:
control = inflater.inflate(R.layout.button,
(ViewGroup) target_layout, false);
targetContainer.addView(control);
x = x - (control.getWidth()/2); // control not inflating exactly # center of
y = y - (control.getHeight()/2); // the touch left.
absoluteLayoutParams = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, x, y);
control.setLayoutParams(absoluteLayoutParams);
button.xml contains button with height and width = Wrap Content.
x & y here are the touch co-ordinates at the time of releasing drag.
This is how its getting inflated from the touch point.
I expect it to get inflated like this from the touch point.
Thanks in advance, Kapil.
Try to call
targetContainer.addView(control);
after you set the layoutParams for it, something like this:
control = inflater.inflate(R.layout.button,
(ViewGroup) target_layout, false);
x = x - (control.getWidth()/2); // control not inflating exactly # center of
y = y - (control.getHeight()/2); // the touch left.
absoluteLayoutParams = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, x, y);
control.setLayoutParams(absoluteLayoutParams);
targetContainer.addView(control);
Maybe that's the problem.
imageView.SetRotation(theta) centerize the view around the pivot point and rotates the image around this pivot by theta degrees, thats nice, but how can i rotate an image view without first centerizing it around this pivot?
to clearify my question, imagine a board and an image on it, what setRotation does is sticking a pin in the middle of this image and rotate it then, what i want is to pick a pivot - say image's bottom left stick a pin there and then rotate it.
hopefully my question is clear, and solveable!
thanks!
You can set a new pivot point using:
setPivotY(float pivotY);
setPivotX(float pivotX);
After that, the rotation will be made using the new pivot point set by the above methods.
--EDITED--
I used this method to add a ImageView to my layout.
private ImageView addImageView(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
ImageView imageView = new ImageView(this);
imageView.setAdjustViewBounds(false);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.height = height;
params.width = width;
imageView.setLayoutParams(params);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageDrawable(getResources().getDrawable(R.drawable.marker_red));
params.leftMargin = x - width/2;
params.topMargin = y - height/2;
imageView.setOnClickListener(onClickListener);
mainLayout.addView(imageView);
return imageView;
}
I called the method with this parameters:
ImageView imageView;
imageView = addImageView(mainLayout, 200, 300, 200, 200, new OnClickListener() {
#Override
public void onClick(View v) {
imageView.setPivotX(200);
imageView.setPivotY(200);
imageView.setRotation(45);
}
});
Finally, you just click on the image, and the image rotates 45 degrees.
regards