I want to put marker on image like Google map, with functionality like zooming,scrolling of image,dynamically adding of marker on image and marker drag & drop on image.
Marker can not be move from there position when image gets zoom.
On marker click, dialog will open to show its information
Also, I want the x,y position of marker on image, so that next time I can place marker directly to that position.
Here is my xml :
<ScrollView
android:id="#+id/imageOuterScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical">
<HorizontalScrollView
android:id="#+id/ImageHorizontalScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/markerAndLoadedImageView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView
android:id="#+id/loadedImageFromServer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
</com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView>
</RelativeLayout>
</HorizontalScrollView>
</ScrollView>
Java code :
private void addNewMarker(#DrawableRes int resid, float xCoordinates, float yCoordinates, String pinID) {
image = new ImageView(getActivity());
image.setBackgroundResource(resid);
markerAndLoadedImageView.addView(image);
image.setX(xCoordinates);
image.setY(yCoordinates);
}
private View.OnTouchListener onTouchListener() {
return new View.OnTouchListener() {
#SuppressLint("ClickableViewAccessibility")
#Override
public boolean onTouch(View view, MotionEvent event) {
mSitePlanImageHorizontalScrollView.requestDisallowInterceptTouchEvent(true);
mSitePlanImageOuterScrollView.requestDisallowInterceptTouchEvent(true);
final int x = (int) event.getRawX();
final int y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams)
view.getLayoutParams();
xDelta = x - lParams.leftMargin;
yDelta = y - lParams.topMargin;
pressStartTime = System.currentTimeMillis();
pressedX = event.getX();
pressedY = event.getY();
break;
case MotionEvent.ACTION_UP:
long pressDuration = System.currentTimeMillis() - pressStartTime;
Utility.printLog("pressDuration", "pressDuration" + pressDuration);
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view
.getLayoutParams();
layoutParams.leftMargin = x - xDelta;
layoutParams.topMargin = y - yDelta;
layoutParams.rightMargin = 0;
layoutParams.bottomMargin = 0;
view.setLayoutParams(layoutParams);
break;
}
Utility.printLog("POINTS", "POINTS : X:" + String.valueOf(x));
Utility.printLog("POINTS", "POINTS : Y:" + String.valueOf(y));
XPoint = x;
YPoint = y;
mMainParentProjectListLayout.invalidate();
return true;
}
};
}
I have use below library for zooming :
https://github.com/davemorrissey/subsampling-scale-image-view
I am able to put marker on image, but I am not getting exact position of marker on image so that I will put marker to that particular position.
Also, marker click and drag & drop functionality are not smooth as required.
Can anyone help me, thanks in advance.
Sorry for the English :)
Related
i'm trying to add a touch listener to FAB so that i can drag it any where in the FrameLayout, well my touch listener is working fine but the default position of the FAB is coming at top of the screen , i wanted it to be at the bottom right of the screen.
if i set the gravity to bottom,my touch listener wont work, how do get it dynamically ?
below is my woking code
Layout code
```
<FrameLayout
android:id="#+id/frame_layout_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/dashboard_foreground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.design.widget.FloatingActionButton
android:id="#+id/dash_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mike"
app:fabSize="normal" />
</FrameLayout>
```
Activity
```
private int mTopMargin = 300;
mFab = (FloatingActionButton) findViewById(R.id.dash_fab);
FrameLayout.LayoutParams lpDraggableView = new
FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,
FrameLayout.LayoutParams.WRAP_CONTENT);
mFab.setLayoutParams(lpDraggableView);
mFab.setOnTouchListener(OnTouchToDrag);
public View.OnTouchListener OnTouchToDrag = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
FrameLayout.LayoutParams dragParam = (FrameLayout.LayoutParams) v.getLayoutParams();
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE: {
if (((int) event.getRawY() - (v.getHeight() + mTopMargin)) > 0) {
dragParam.topMargin = (int) event.getRawY() - (v.getHeight() + mTopMargin);
TCLog.d("Custom", "topMargin" + ((int) event.getRawY() - (v.getHeight() + mTopMargin)));
dragParam.leftMargin = (int) event.getRawX() - (v.getWidth());
v.setLayoutParams(dragParam);
}
break;
}
case MotionEvent.ACTION_UP: {
// dragParam.height = 150;
// dragParam.width = 150;
dragParam.height = v.getHeight();
dragParam.width = v.getWidth();
dragParam.topMargin = (int) event.getRawY() - (v.getHeight() + mTopMargin);
dragParam.leftMargin = (int) event.getRawX() - (v.getWidth() / 2);
v.setLayoutParams(dragParam);
break;
}
case MotionEvent.ACTION_DOWN: {
break;
}
}
return true;
}
};
Even i tried the seting the Layout params dynamically, it is going out of the screen.
```
DisplayMetrics displayMetrics = getBaseContext().getResources().getDisplayMetrics();
float dpHeight = displayMetrics.heightPixels ;
float dpWidth = displayMetrics.widthPixels ;
lpDraggableView.topMargin = dpHeight;
lpDraggableView.leftMargin = dpWIdth;
mFab.setLayoutParams(lpDraggableView);
```
You should calculate the position by yourself if you want to not use Gravity.
This is better aquired in the onResume method where the layout inflation and measurement already finished.
You may use display width and height if you want to do in onCreate.
If you have a custom view you may place your calculation code in the onMeasure method.
how do i create an endless / movable layout, which is endless/movable in all directions?
I want to develop an app to create diagrams, and if the diagram gets too big i want it to be movable in all directions.
I hope its understandable.
with regards
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_draw);
_root = (ViewGroup) findViewById(R.id.draw);
_view = new ImageView(this);
_view.setImageResource(R.drawable.greenbutton);
BitmapDrawable bd=(BitmapDrawable) this.getResources().getDrawable(R.drawable.greenbutton);
int height=bd.getBitmap().getHeight();
int width=bd.getBitmap().getWidth();
/*MyScrollView myV = new MyScrollView(this);
myV.setLayoutParams(_root.getLayoutParams());*/
RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(height,width);
_view.setLayoutParams(layoutParams);
_view.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
v.setLayoutParams(layoutParams);
break;
}
_root.invalidate();
return true;
}
});
//myV.addView(_view);
_root.addView(_view);
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".Draw">
<RelativeLayout
android:id="#+id/draw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/layout_grid">
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
android:orientation="vertical">
<GridView
android:id="#+id/mostUsedBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:layout_weight="1">
</GridView>
<GridView
android:id="#+id/elementBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:layout_weight="1"></GridView>
<GridView
android:id="#+id/relBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:layout_weight="1"></GridView>
</LinearLayout>
</LinearLayout>
Create a custom view that scrolls (do it manually) and keep everything in two variables let's say scrollX and scrollY (assume the point at the top left point of the screen). So draw everything on top with an offset of scrollX and scrollY.
Here is some code:
public class MyScrollView extends View
{
private int scrollX, scrollY;
private int pinPointX, pinPointY;
public MyScrollView(Context context)
{
super(context);
//Initialize scroll to look at the top left edge of the "paper"
scrollX = 0;
scrollY = 0;
}
public void onTouchEvent(MotionEvent e)
{
switch (e.getAction())
{
case MotionEvent.ACTION_DOWN:
//Mark touch point
pinPointX = (int) e.getX();
pinPointY = (int) e.getY();
break;
case MotionEvent.ACTION_MOVE:
//Scroll view
scrollX += (int) e.getX() -pinPointX;
scrollY += (int) e.getY() -pinPointY;
//Mark new point
pinPointX = (int) e.getX();
pinPointY = (int) e.getY();
break;
}
}
#Override
public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//Draw everything here with an offset of scrollX, scrollY
}
}
Sorry I may have made some mistakes (mainly with android's class names) but I wrote the code on the go, if u see any minor mistake make sure to correct it.
Note that this code will allow you to scroll "infinitely" at least as long as scrollX and scrollY remain on their int limits (from -2,147,483,648 to 2,147,483,647) you can keep it like that since nobody will scroll that far, but I'd recommend applying some limits just to make the app more "perfect".
Also I'm not sure but I think this code may have some issue if you scroll to the negative side (leftwards and upwards - when scrollX and/or scrollY are negative) but I may be wrong.
If you want to include more views (like a layout that you ask) make it a ViewGroup but I don't have much experience using that. I showed you a logic to follow it's up to you to attach it to your code as you like.
I am try to implement the vertical slider of image control. The image is inside the ScrollView. When it comes to vertical dragging of ImageView, the top margin of relative layout always provide different reading.
If it is greater than 600 something while dragging down, the background image of the relative layout stretch vertically together with the image position I have dragged.
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:fillViewport="true" >
...
<RelativeLayout
android:id="#+id/relativeLayouyt6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/rTop"
android:background="#drawable/plain" >
<ImageView
android:id="#+id/dragImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_one"
android:visibility="gone" />
</RelativeLayout>
Would you please tell me how to
get the offset I have scrolled in my scrollview ?
I know it is get touch position minus scrolled position and plus image Y position, how to implement this parameter after finishing dragging ?
How to set relative boundary for imageview inside the relative layout ? is it wiser to take this background image out as the imageview?
If I programmatically repositioning of 6 relativelayouts but coming up to the same width , would it affect the scrolling position and the scollview total Height ? If so , How to calculate the offset Y for the repositioning ?
The below is my code as of February 11:
dragImage.setOnTouchListener(new OnTouchListener(){
//private int _xDelta;
private int _yDelta;
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
final float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//_yDelta = Y - lParams.topMargin;
mOldY2 = y;
break;
case MotionEvent.ACTION_UP:
mViewPager.setPagingEnabled(true);
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
btn4.setBackgroundResource(R.drawable.fbl02);
final float dy = y - mOldY2;
mNewY2 += dy;
mOldY2 = y;
System.out.println(mNewY2);
while(mNewY2 > 224){
mNewY2 -= 224;
}
while(mNewY2 < 157){
mNewY2 += 157;
}
if(mNewY2 < 157 || mNewY2 > 224)
break;
v.setTranslationY((int)mNewY2);
v.invalidate();
float power = (float) ( 51.5/67 -(0.2/67) * mNewY2) ;
System.out.println(power);
Float roundF = new Float( Math.round(power));
midBandStick = roundF;
btn4.setText(String.valueOf(midBandStick) );
//}
//break;
}
return true;
}
The below is my code :
public static void setRLBelowAnother(RelativeLayout rA , RelativeLayout rB ){
RelativeLayout.LayoutParams rparam4 =
(android.widget.RelativeLayout.LayoutParams) rB.getLayoutParams();
rparam4.addRule(RelativeLayout.BELOW, rA.getId());
rB.setLayoutParams(rparam4);
}
setRLBelowAnother(rTop , r1);
setRLBelowAnother(r1 , r2);
setRLBelowAnother(r2 , r6 );
setRLBelowAnother(r6 , r3 );
setRLBelowAnother(r3 , r4 );
setRLBelowAnother(r4 , r5 );
dragImage.setVisibility(View.VISIBLE);
dragImage.setImageResource(R.drawable.slide_lshort);
dragImage.setX((float) (0.15*screenWidth));
dragImage.setY((float) (0.05*screenHeight));
dragImage.setOnTouchListener(new OnTouchListener(){
//private int _xDelta;
private int _yDelta;
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
final int X = (int) event.getX();
final int Y = (int) event.getY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) dragImage
.getLayoutParams();
//_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
mViewPager.setPagingEnabled(true);
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
midStick = 0.2f;
btn4.setBackgroundResource(R.drawable.fbl02);
RelativeLayout.LayoutParams ParamsA = (RelativeLayout.LayoutParams) dragImage
.getLayoutParams();
//ParamsA.leftMargin = X - _xDelta;
ParamsA.topMargin = Y - _yDelta;
//ParamsA.rightMargin = -250;
ParamsA.bottomMargin = -250;
mViewPager.setPagingEnabled(false);
int offYb = 0;
int pos = ParamsA.topMargin + offYb ;
if(pos > -52 && pos < 582 ){
dragImage.setLayoutParams(ParamsA);
System.out.println(ParamsA.topMargin);
float power = (float) (100 + (900/634) * ParamsA.topMargin) ;
Float roundF = new Float( Math.round(power));
midStick = roundF;
btn4.setText(String.valueOf(midStick));
}
break;
}
return true;
}
});
Call the getScrollY() method from the ScrollView to get the Y index (scrolled index)
If I understood (otherwise please correct me) you could get a frame (boundary) between the ImageView and the RelativeLayout adding padding or margin to the ImageView. You just need to call android:padding="" or android:margin=""
The height of the ScrollView will change and also the scrollY if the new added RelativeLayout/ImageView doesn't completely fit on the available space. When you finish adding the new layout you could get the scrollY from the ScrollView and see where the ScrollView has scrolled to.
Can you improve the questions 2, 3 and 4? It's quite confusing.
Basically my question is: how to move a complete view around, instead of just moving the canvas? *I have a custom view and I want to move the whole thing not just the canvas.*
This is what I have tried, but I get a NullPointerException (the code is not compleate, I have put what I think is the most relevant part, also the parent of the custom view is a LinearLayout):
ResistorView class:
LinearLayout root;
public class ResistorView extends View{
public ResistorView(Context context){
super(context);
root = (LinearLayout)findViewById(R.id.main);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
LinearLayout.LayoutParams lParams = (LinearLayout.LayoutParams) this.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) this.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
this.setLayoutParams(layoutParams);
break;
}
root.invalidate(); //There is a NullPointerException on this line.
return true;
}
main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/main">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<Button
android:id="#+id/bAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add RES" />
</LinearLayout>
I don't know what I am doing wrong, if someone can help I would really appreciated. Thanks.
Change
root = (LinearLayout)findViewById(R.id.main);
to
root = (LinearLayout)getParent();
You may even want to do this inside of onTouch instead and remove it from the constructor, something like:
if(root == null) {
root = (LinearLayout)getParent();
}
root.invalidate();
I suggest using FrameLayout and call myCustomView.setX(x) and myCustomView.setY(y)
x and y passed to methods are event rawX and rawY + deltaX and deltaY
ACTION_DOWN case
deltaX = v.x - event.rawX
deltaY = v.y - event.rawY
deltaX and deltaY are global variables
and in ACTION_MOVE case do this
v.x = event.rawX + deltaX
v.y = event.rawY + deltaY
I would like to set a limit the the x and y ranges of a scrollable image. Here is the code I am using:
public class MapActivity extends Activity {
private LinearLayout container;
private int currentX;
private int currentY;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.map);
container = (LinearLayout) findViewById(R.id.Container);
container.scrollTo(0, 0);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
currentX = (int) event.getRawX();
currentY = (int) event.getRawY();
break;
}
case MotionEvent.ACTION_MOVE: {
int x2 = (int) event.getRawX();
int y2 = (int) event.getRawY();
container.scrollBy(currentX - x2 , currentY - y2);
currentX = x2;
currentY = y2;
break;
}
case MotionEvent.ACTION_UP: {
break;
}
}
return true;
}
}
And my map.xml looks like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<LinearLayout
android:id="#+id/Container"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:src="#drawable/aowmap"
android:layout_height="752px"
android:layout_width="1712px"></ImageView>
</LinearLayout>
</LinearLayout>
I've tried various ways to get "Container"s x and y and even the images x and y, but no luck. I'm sure the code would go under ACTION_UP, but I'm just not sure what to put there to find the x and y.
You need to have a look at the display metrics, below is a snippet of code I use in an image gallery to restrict scrolling left, you should be able to do something similar!
The key line is mlp.setMargins(...), the first parameter passed to that function is where i set the new left margin so you would need to do something similar but for the bottom margin!
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
MarginLayoutParams mlp = (MarginLayoutParams) gallery.getLayoutParams();
mlp.setMargins(-(metrics.widthPixels/2+130),mlp.topMargin,mlp.rightMargin, mlp.bottomMargin );
Hope this helps! :)