I have an imageview which only takes up a portion of the screen. And I have a textview on top of the imageview. When the user touches the textview, they can drag it to where ever they want on the screen. However, I want to limit the user to only be able to move the textview on the imageview.
When the textview is moved to the top or right side of the screen it automatically blocks it from going any further (similar to if you move your computer mouse to the top or left side of the screen). I want to try to mimic this effect just in the bounds of the imageview.
I have tried numerous techniques like getting the size of the imageview and comparing it to the y and x values and if the textview would go past this point it would equal this point. However, no success so far.
This is my current code (within the OnTouchListener()):
if (touchY >= imageHeight){
params.leftMargin = leftSideText;//sets the margin so the textview is displayed on the screen according to them because its aligned to top and left
params.topMargin = (tvOne.getHeight()) - imageHeight;
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
tvOne.setLayoutParams(params);
}
where some of the variables are:
touchX = (int) eventTwo.getRawX();
touchY = (int) eventTwo.getRawY();
//helps make the edit text start where the user touches the screen rather than that just being the top corner
int editTextWidth = tvOne.getWidth() / 2;
int editTextHeight = tvOne.getHeight() / 2;
topText = touchY - editTextHeight;
leftSideText = touchX - editTextWidth;
This code just makes the textview disappear once it goes past this point.
So, to clear up what I'm asking, how do you limit textview boundaries to the range of an imageview? If you could provide any help or suggestions it would be greatly appreciated, thanks!
EDIT: I found the reason to my problem, yet, I have not found the solution. First, it seems the textview is not disappearing its just not visible on the black background below the image. Second, the reason why the textview is going past the imageview is because the full image is not being displayed, or so it seems. So, when I get the height its referring to the whole image height, yet, the whole image is not being displayed.
Take a look at my question here
Related
Right now I am trying to solve a problem with adding views on top of a custom view that can exceed the screen bounds. That custom view draws different rectangles at different angles. For later use it should be possible to select the rectangles for later drag n drop implementations where I don’t want to constantly redraw the whole custom view.
So over each drawn rectangle I put a button that has the same dimensions and rotation.
For some reason however android seems to resize my views automatically when it hits the end of the Screen:
My expectation(button covers everything even if only half visible):
The actual behaviour(button gets shrunk):
This by itself is not a huge issue when the view I want to add is not rotated.
If the view is rotated however the rotation around the center point causes all kinds of problems as the view is now smaller and on a different location:
My expectation(button is rotated exactly around the center point of the object):
What I get is button becomes smaller and therefore its center point moves:
I read on other questions that View.setClipChildren(false) and View.setClipPadding(false) should help. But all it does is basically mess up my view hierarchy because I kinda want clipping to happen but not the automated resize. And on top of that it doesn’t fix the issue that I am having.
Does any of you have an Idea how I can fix this?
I tried to do the same on IOS and JavaFX which both work as I expected them to.
Since I am trying to solve the whole thing programmatically, I created some test code that places a buttons center point on the screen edge and rotates it 45 degrees: So you should only be able to see half of the button. But the button appears smaller and is fully visible on the right side of the screen. Of course due to the different center point it’s also not on the location I would expect it to be.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Context context = getApplicationContext();
RelativeLayout relativeLayout = new RelativeLayout(context);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
Button button = new Button(context);
button.setText("DO STUFF");
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(800, 80);
params.leftMargin = width - 400;
params.topMargin = height / 2;
button.setLayoutParams(params);
button.setRotation(45);
button.setBackgroundColor(Color.RED);
relativeLayout.addView(button);
setContentView(relativeLayout);
}
}
I found the solution myself by accident.
It appears to be a special behavior of the RelativeLayout. I didn't find anything that explains it, but I swapped it out with a FrameLayout which has two positive effects.
It works as I expected it to
I got a performance increase since I was also nesting multiple Relative Layouts into each other.
Is it possible to detect on color touch with Bitmap on 'Android'?
The screen will look like this:
The black arrow is the Bitmap object that user can move up and down. It should detect when black arrow is touching the blue line and add points for each second that it has touched the line.
Maybe it is worth noting that arrow can be only moved up and down and the blue lines are what are moving from right to left.
There is a wierd background and the background may contain blue since it will be a camera preview screen and the Canvas where the arrow and the blue line are moving will be transparent. Will that be an issue or is there maybe a better way to detect collision?
The most important part that I need here is to detect 'collision' or weather the bitmap and the line are touching or not but the second part of the question would be, is there a way to add an animation or something that would show the user that the lines are touching, maybe chaing the arrow for a golden one or something.
The line is made with 'GraphView' and thus I can not really treat that as an 'object'. More about graphview - http://www.android-graphview.org/
If there is any need for source code then I can provide that but I'd rather not share it right off the bat.
EDIT I have tried using Pixels and detecting color that way but I have not gotten it to work.
For a given pixel, x and y:
ImageView imageView = (ImageView)v;
Bitmap bitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();
int pixel = bitmap.getPixel(x,y);
int redValue = Color.red(pixel);
int blueValue = Color.blue(pixel);
int greenValue = Color.green(pixel);
Reference here.
In android I would like to draw flower by adding each petal from a center point. I used setRotation on the image view but the center point is different for each petal. (I mean the center point from the flower) Can anybody look at my code and suggest me correction? Thanks.
int angle=0;
int ypos=500;
int xpos=500;
RelativeLayout layout = (RelativeLayout)findViewById(R.id.ln1);
for(int i=0;i<10;i++)
{
ImageView image = new ImageView(this);
image.setLayoutParams(new android.view.ViewGroup.LayoutParams(150,400));
image.setX(xpos);
image.setY(ypos);
image.setPadding(-7,-30,-10,0);
image.setPivotX(1.0f);
image.setScaleX(1.5f);
image.setScaleY(1.5f);
image.setImageResource(R.drawable.petal);
image.setRotation(image.getRotation() + angle);
angle=angle+36;
layout.addView(image);
}
Image I get is this
When you rotate the image, the rotation is done with the top left corner of the image, not the center of the rotated image.
Below image might illustrate this. The black square represents your image. The lefthand site shows the situation you have now. The righthand side shows the situation you want.
Before rotating, you should subtract half the width from the x position, and add half the height from the y position. Then you should get the desired image.
As user Ralf Renz pointed out in their comment, you could also simply start with an angle of -36. This is a useful workaround.
I accomplished this using the following strategy.
image.setPivotY(-1);
Now the flower was coming in a different design because petal was Tilted. So I Tilted my actual image to the opposite direction using inkscape and now I get the desired output.
I am currently trying to get an image view containing an image to move from top of the screen downwards. When it reaches the buttom of the screen i'd like to switch direction going upwards again.
My problem is i can't find the exact spot, where i should make the image view change direction. My screen has a very high resolution and therefore i've set my os, windows, to enlarge all components. I can therefore not use my screen size to calculate how many pixels there are from top to bottom.
Therefore i use following code to get height of screen:
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
bounds.getHeight();
My Imageview is initialized at point (0,0) and i can therefore at any given time get the y-koordinate of my top left corner by using imageview.getY()
Therefore i should move it downwards until the value of imageView.getY() + height the image view equals the height of the screen.
But this solution seems to make my image view switch direction a bit before it reaches the bottom of the screen.
For calculating height of image i use the method imageView.getFitHeight();
I suspect imageView.getFitHeight for delivering the height desired by the imageview before it is actually determined by the underlying anchor pane and therefor i am not sure imageView.getFitHeight() actually delivers the height of the imageView. I can't seem to find any other method in imageView which regards height of the imageView.
I don't know how to make the imageview switch direction exactly at the bottom, can anybody help?
Regards Martin
I have and ImageView that is set on the bottom of the screen.
I want to do an animation with translate to move it away through bottom side of the screen. now if to slide up I just need to set final Y point at -300 so I'll be sure that my ImageView slides up , how do I slide it down - is it possible to set in xml, or is it programmatically only?
You can set positive y value in the code of translate anim.
translateAnimation(0,0,urView.getY,urViewgetY+300)
Not sure about XML, but I handle all of my animations using droidQuery. To do this, first add the class variable:
private float imageTop;
and in onCreate, set this to the y position of your view:
imageTop = ViewHelper.getY(mImageView);//where mImageView is your ImageView.
The slide-down animation can be done very easily:
$.with(mImageView).slideDown(400, $.noop());
To slide it back up, use this:
$.with(mImageView).animate("{ y : " + Float.valueOf(imageTop) + "}", 400, $.Easing.LINEAR, $.noop());