I am new to android, In my app I just need to add a screen like pattern lock, what exactly I want to do is, no need to create/ set a pattern.Just design a screen with 9 dots, and when user draw some pattern and I need to get those pattern value.For design I used PatternView but how can I get the user drawer pattern? I already google on this, but I found there they setting the pattern lock, I don't want that.I just want is when I draw something on PatternView it just return the value like,suppose like if I draw a pattern like 2365 dots it will return an integer value like 2365.
I already tried haibison.github.io/android-lockpattern but my app is different than this.I just want to draw a pattern and get result, no need to create and confirm screens. No need to save the result in shared preferences. I just want compare the drawn pattern value with my predefined value.
Following is idea on how to go for this:
Start with a table view for your layout and create a 3 x 3 grid of image views (dots).
override onTouchListener on your activity to detect touches on images. refer this answer for details.
private ImageView imageView;
private Rect imageRect;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.imageView1);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
if (imageRect == null) {
imageRect = new Rect();
imageView.getGlobalVisibleRect(imageRect);
}
int x = (int) event.getX();
int y = (int) event.getY();
if (imageRect.contains(x, y)) {
Log.i(TAG, "touch passing over imageView");
}
return true;
}
example is for 1 image view you have to build it for 9.
as and when touch is detected append the index of imageview to a string.
once an image is touched stop detecting touches on it.
perform desired operation when MotionEvent.ACTION_UP is detected
Related
I'm working in an app that uses the ml kit text recognition library; The app reads text from images and puts a Rect around every word.
Now I want these Rects to change color when the user tap on one of them or swipe above some words.
So, I was able to handle touch events correctly, but what I can't do is changing the color of the touched Rect!
Should I draw new colored Rects above the touched Rect? Or can I color the existing rects (which I don't think I can)?
Classes:
TextGraphic, GraphicOverlay.
//This is where the Rects get drawn
I also tried this solution, so I typed this methods in the TextGraphic class:
public void changeColor(boolean isHighlighted) {
if(isHighlighted) {
rectPaint.setColor(COLOR_HIGHLIGHTED);
rectPaint.setAlpha(400);//set opacity of rect
}else{
rectPaint.setColor(COLOR_DEFAULT);
rectPaint.setAlpha(400);//set opacity of rect
}
postInvalidate();
}
and called it when the user touches the text, but the problem is that all Rects colors get changed, and they do not change at runtime!
A snippet from my ActivityClass, where I used some callback methods to pass things out.
ArrayList<Rect> rects = new ArrayList<>();
#Override
public void onAdd(FirebaseVisionText.Element element, Rect elementRect, String wordText) {
GraphicOverlay.Graphic textGraphic = new TextGraphic(mGraphicOverlay, element);
mTextGraphic = new TextGraphic(mGraphicOverlay, element);
mGraphicOverlay.add(textGraphic);
rects.add(elementRect);
}
A snippet from my ActivityClass where I handle touch events:
#Override
public boolean onDown(MotionEvent event) {
helper.dismissKeyboard();
touchX = Math.round(event.getX());
touchY = Math.round(event.getY());
for(int x=0; x< rects.size();x++) {
if (rects.get(x).contains(touchX, touchY)) {
// line has been clicked
mTextGraphic.changeColor(true);
return true;
}
}
return true;
}
You are changing the color using the mTextGraphic variable. If you look closely in your onAdd() method you will see that you are assigning a new object to mTextGraphic that has nothing to do with the objects drawn to screen because only the objects that you add to GraphicOverlay list using the mGraphicOverlay.add() will get drawn to screen.
So what you need is to call changeColor() not on mTextGraphic but on the respective object that is already in the list inside GraphicOverlay
Since the list inside GraphicOverlay is private you can't manipulate it in the onDown() method. You will need to write a public method that will do the job for you.
Write the following method in GraphicOverlay class
public TextGraphic getGraphicElementAtIndex(int index) {
return (TextGraphic)graphics.get(index)
}
Now use this method inside the if condition of onDown() method like this
if (rects.get(x).contains(touchX, touchY)) {
// line has been clicked
Log.d("PreviewActivity", "changeColor() is called");
mGraphicOverlay.getGraphicElementAtIndex(x).changeColor();
touchedText = texts.get(x);
return true;
}
Hope this helps.
SIDE NOTE: Now even after this if for some reason the ordering of objects inside rects list and graphics list (which is inside GraphicOverlay) change then you will see that when you click a rectangle some other rectangle changes color.
Maybe you should not do it by coding but by ColorStateList
Android Developer: colorstatelist
I want to divide the image into sub images and when I click on a part of the image will give me the name of the region, for example, this is my question how to recognize a region from the image, or how to divide the image into sub-images and use it in imageViews
And thank you in advance
In my opinion #fractalwrench's idea is quite good for your case. Basic steps are listed below.
Subclass Android ImageView. For example, MultiRegionImageView.
Override its onTouchEvent method. (This method gets called whenever user touches the view)
User touches the image and thereby onTouchEvent is called and provides the exact touch point (x, y).
Declare another method or interface which determines at which region a given point is. For example, getRegionByPoint(int x, int y)
If you would like to highlight that region boundaries, you could use paths. First off, you should define paths and save them into a raw file (XML, for example), then using region ID, fetch its path and finally draw that path over the main image.
For drawing a path over the main image, you should also override onDraw method of ImageView class and use canvas.drawPath();
public class MultiRegionImageView extends ImageView {
RegionProvider mRegionProvider;
int mId = -1;
private Paint mPaint;
public MultiRegionImageView(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
mId = mRegionProvider.getRegionIdByPoint(event.getX(), event.getY());
return super.onTouchEvent(event);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(mId != -1) {
canvas.drawPath(mRegionProvider.getRegionBoundaryPath(mId), mPaint);
}
}
public interface RegionProvider{
int getRegionIdByPoint(float x, float y);
Path getRegionBoundaryPath(int id);
}
}
You should only need one ImageView to display the map. If you override onTouchEvent(MotionEvent e), you can get the position which is being touched in the View. If you store the position and shape of each region in some sort of List, you can check whether a touch event is within a region (and display whatever text you need to).
I have an ImageView which has a transparent drawable with a circle at the center like (http://wallpaperswide.com/circle_outline-wallpapers.html). Just that the circle is red, and the surrounding are not coloured but are transparent, it is a .png image. So now I will implement Canvas.ondraw(), and when while tracing the user goes outside the circle, the drawing should restart.
The doubt is:
1. How do I detect the boundaries of this image without hardcoding.
2. How do I detect that the user has clicked outside this, as this is not a regular rectangle.
I am doing this to help students trace alphabets, so I want the answer to be generic on the basis of any image in the shape of a letter.
Can it be done this way? If not, what better way can you suggest?
i'd go the easy route: just draw the image and check the colour of the point the user touched. if the alpha channel transparent, the user moved out.
the following code is untested (and very rough). i have no idea if the getDrawingCache trick works.
public class FooBar extends ImageView {
Bitmap b = null;
public FooBar(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
b = getDrawingCache(true);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE)
check((int) event.getX(), (int) event.getY());
return super.onTouchEvent(event);
}
private void check(int x, int y) {
if (b != null && Color.alpha(b.getPixel(x, y)) >= 0)
onMovedOutOfShape();
}
private void onMovedOutOfShape() {
Toast.makeText(getContext(), "You're out", Toast.LENGTH_SHORT).show();
}
}
What you're after is almost the same thing as "collision detection for irregular shapes". Googling on that will result in a zillion hits.
But if I had the problem to do, I'd probably bring in one of the game engines/frameworks such as Box2D, AndEngine, libGDX, or BatteryTech. I'd combine a few simple rectangles and curves to build up reactive places over each of my letter images and then use of of the library's pre-optimized collision detection algorithms to do the heavy lifting. I'd also at least look through their open source code to learn how they do their detection.
Hello guys I want to use a ImageView as a slideshow, that touch you on the right of the screen display the next image and if the touch is on the left show the previous image,
I already tried to implement this function but I get no response from the ImageView, looking logcat I realized that it doesn't dispatch of TouchEvent.
public class Prova4Activity extends Activity implements OnTouchListener {
/** Called when the activity is first created. */
ImageView image;
Bitmap trash = loadImageFromUrl("http://www.televideo.rai.it/televideo/pub/tt4web/ Nazionale/16_9_page-100.6.png");
ImageView imgpag;
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.EDGE_RIGHT){
trash.recycle();
trash = null;
trash = loadImageFromUrl("http://www.televideo.rai.it/televideo/pub/tt4web/Nazionale/16_9_page-100.6.png");
image.setImageBitmap(trash);
}else if(event.getAction() == MotionEvent.EDGE_LEFT){
trash.recycle();
trash = null;
trash = loadImageFromUrl("http://www.televideo.rai.it/televideo/pub/tt4web/ Nazionale/16_9_page-100.5.png");
imgpag.setImageBitmap(trash);
}
imgpag.setScaleType(ScaleType.FIT_XY);
return true;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imgpag = (ImageView)findViewById (R.id.imgpag);
imgpag.setImageBitmap(trash);
imgpag.setOnTouchListener(this);
}
}
I would not use a gallery because the images are small and do not know in advance the number of images because i load them directly from Inernet based on the actions of the user
This might be not the best way to achieve this but you can try following:
Set two buttons on Screen - One on Right corner and One on the left corner.
(If you are showing ImageView full screen then better to use FrameLayout -
bt make sure that Buttons are on the front)
Set Button properties like
<Button
android:id="#+id/button1"
android:layout_width="70dp"
android:layout_height="40dp" android:background="#null"/>
This will make sure that buttons are invisible
Then just add your logic of prev and next on OnClickListeners of these buttons
Hope this will help you
I'd appreciate it if someone could help me with my problem.
I am trying to change the image in an ImageView when someone clicks on it. I've put my images in an array and I am using a while loop to cycle once through all of them.
My problem is that while the first image (image8, not in the array) shows in the view all the other (after creating the OnClickListener) do not. Actually nothing happens and I am not sure where the mistake is. Thanks in advance.
This is the problematic code:
final int array[]=new int[5];
array[0]= R.drawable.image6;
array[1]= R.drawable.image4;
array[2]= R.drawable.image9;
array[3]= R.drawable.image4;
array[4]= R.drawable.image5;
ImageView touchView = (ImageView)findViewById(R.id.imageview);
touchView.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View touchView, MotionEvent ev) {
//get coordinates of touch event
int x = (int)ev.getRawX();
int y = (int)ev.getRawY();
---Code missing---
((ImageView)touchView).setImageResource(R.drawable.image8);
touchView.setOnClickListener(new View.OnClickListener() {
int counter = 0;
#Override
//Image change on every click
public void onClick(View touchView) {
while(counter<5){
((ImageView) touchView).setImageResource(array[counter]);
counter++;
});
You can't change images in a sequence like that and expect anything to show on the screen. You should use the click to start a separate thread that will do the image animation. See the description of the android.view.animation package. It sounds like the AnimationDrawable class will give you exactly what you want.
There is a special view for your case. ImageSwitcher is what you need. There is an example from android developers on how to use it. It should be trivial to adapt the example to your needs.