I have an ImageView that is twice the height of a normale screen ( 960 dip). I would like to scroll it nicely up and down on the screen. The bottom of the screen should contain a button. I have tried various combinations of ScrollView and Imageviews without any success. I have also thinkered with the :isScrollContainer attribute without results. Anyone knows how to do this?
Cheers,
Luca
#cV2 Thank you so much for that code. It got me going in the direction I needed. Here's my modified version which stops scrolling at the edges of the image...
// set maximum scroll amount (based on center of image)
int maxX = (int)((bitmapWidth / 2) - (screenWidth / 2));
int maxY = (int)((bitmapHeight / 2) - (screenHeight / 2));
// set scroll limits
final int maxLeft = (maxX * -1);
final int maxRight = maxX;
final int maxTop = (maxY * -1);
final int maxBottom = maxY;
// set touchlistener
ImageView_BitmapView.setOnTouchListener(new View.OnTouchListener()
{
float downX, downY;
int totalX, totalY;
int scrollByX, scrollByY;
public boolean onTouch(View view, MotionEvent event)
{
float currentX, currentY;
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
currentX = event.getX();
currentY = event.getY();
scrollByX = (int)(downX - currentX);
scrollByY = (int)(downY - currentY);
// scrolling to left side of image (pic moving to the right)
if (currentX > downX)
{
if (totalX == maxLeft)
{
scrollByX = 0;
}
if (totalX > maxLeft)
{
totalX = totalX + scrollByX;
}
if (totalX < maxLeft)
{
scrollByX = maxLeft - (totalX - scrollByX);
totalX = maxLeft;
}
}
// scrolling to right side of image (pic moving to the left)
if (currentX < downX)
{
if (totalX == maxRight)
{
scrollByX = 0;
}
if (totalX < maxRight)
{
totalX = totalX + scrollByX;
}
if (totalX > maxRight)
{
scrollByX = maxRight - (totalX - scrollByX);
totalX = maxRight;
}
}
// scrolling to top of image (pic moving to the bottom)
if (currentY > downY)
{
if (totalY == maxTop)
{
scrollByY = 0;
}
if (totalY > maxTop)
{
totalY = totalY + scrollByY;
}
if (totalY < maxTop)
{
scrollByY = maxTop - (totalY - scrollByY);
totalY = maxTop;
}
}
// scrolling to bottom of image (pic moving to the top)
if (currentY < downY)
{
if (totalY == maxBottom)
{
scrollByY = 0;
}
if (totalY < maxBottom)
{
totalY = totalY + scrollByY;
}
if (totalY > maxBottom)
{
scrollByY = maxBottom - (totalY - scrollByY);
totalY = maxBottom;
}
}
ImageView_BitmapView.scrollBy(scrollByX, scrollByY);
downX = currentX;
downY = currentY;
break;
}
return true;
}
});
I'm sure it could be refined a bit, but it works pretty well. :)
I searched so long for this Code, so I wanted to share this great peace of code:
this code is from an Activity, which has a xml file on the backend containing an ImageView called 'img'
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img"
android:scaleType="center"
android:background="#fff"
android:src="#drawable/picName"
/>
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.xml_name_layout);
final ImageView switcherView = (ImageView) this.findViewById(R.id.img);
switcherView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View arg0, MotionEvent event) {
float curX, curY;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mx = event.getX();
my = event.getY();
break;
case MotionEvent.ACTION_MOVE:
curX = event.getX();
curY = event.getY();
switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
mx = curX;
my = curY;
break;
case MotionEvent.ACTION_UP:
curX = event.getX();
curY = event.getY();
switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
break;
}
return true;
}
});
}
did the job perfectly for me...
horizontal & vertical scrolling included (enabled)
only negative side is... you can scroll over the edge of the picture...
but this is no problem for me.. and spending some time you could easily implement this feature :)
good luck && have fun
this is how I fixed it :p
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawVerticalTrack="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="Specs"
android:scrollbars="vertical"
android:src="#drawable/image"/>
</ScrollView>
#wirbly Thank you so much for your code, it works exactly the way I want.
But when i first read your code, I was a little confused about the four variables that you forgot to define .
So, i want to add the definition for the code to make it clearer.
Resources res=getResources();
Bitmap mBitmap = BitmapFactory.decodeResource(res, R.drawable.p_1920x1080);
BitmapDrawable bDrawable = new BitmapDrawable(res, mBitmap);
//get the size of the image and the screen
int bitmapWidth = bDrawable.getIntrinsicWidth();
int bitmapHeight = bDrawable.getIntrinsicHeight();
int screenWidth = this.getWindowManager().getDefaultDisplay().getWidth();
int screenHeight = this.getWindowManager().getDefaultDisplay().getHeight();
Hope it's helpful.
The easiest way is imho to use a webview and load the image into it via a local html file. This way you will also automatically get the zoom controls if you want to use them.
For a large image (i.e. if it's 1000 or 3000 px wide) you will notice that Android (Coliris) isn't very good at displaying large zoomed images very sharp, even if the original images is sharp and uncompressed). This is a known issue. The solution for that is to break down the large image into smaller tiles and put them together again via html (div's or table).
I use this approach to provide a subway map (larger than the screen and scrollable) to the user.
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
webView.loadUrl( "content://com.myapp.android.localfile/sdcard/myappdata/common/mtr_map.html");
This might work for most cases / 'regular apps', although depends on your particular case. If you are talking about a image as a scrollable background of a game, it might not be useful for you.
Instead of a html file, you could also load the image directly (png, jpg). If you don't want the zoom control, just turn them off.
Another way is to create a HorizontalScrollView, add the imageView into it and then add the HorizontalScrollView into a ScrollView. This allows you to scroll up, down, left, right.
it works for me
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/img"
android:scaleType="centerCrop"
android:adjustViewBounds="true"/>
<Button
style="#style/btn"
android:id="#+id/btn"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="#drawable/btn"
android:onClick="click"
android:text="text" />
</LinearLayout>
</ScrollView>
hey guys found an easy and 100% reliable solution as Mr X mentioned above(as the other codes mentioned weren't working working on some devices or breaking)
Simply use ScrollView provided by android and it takes care of stuff
something like this
<ScrollView android:layout_width="fill_parent" android:id="#+id/scrollView1"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" android:layout_above="#+id/button1"
android:layout_alignParentRight="true" android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal">
<ImageView android:src="#android:drawable/ic_menu_report_image"
android:layout_height="wrap_content" android:id="#+id/imageView1"
android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</ScrollView>
and in oncreate something like this
if (mImageName != null) {
InputStream is = null;
try {
is = this.getResources().getAssets().open("mathematics/"+mImageName);
} catch (IOException e) {
}
Bitmap image = BitmapFactory.decodeStream(is);
mImageView.setImageBitmap(image);
}
Cheers!
Related
I want to implement a movable imageView when it is drag. The dragging is working perfectly alright. But when i drag to the end , the imageView goes out of the screen. How can i make the movable of the imageview only inside the screen ?
This is my OnTouch listerner :
public boolean onTouch(View view, MotionEvent event) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
dX = view.getX() - event.getRawX();
dY = view.getY() - event.getRawY();
lastAction = MotionEvent.ACTION_DOWN;
break;
case MotionEvent.ACTION_MOVE:
view.setY(event.getRawY() + dY);
view.setX(event.getRawX() + dX);
lastAction = MotionEvent.ACTION_MOVE;
break;
case MotionEvent.ACTION_UP:
if (lastAction == MotionEvent.ACTION_DOWN)
Toast.makeText(DraggableView.this, "Clicked!", Toast.LENGTH_SHORT).show();
break;
default:
return false;
}
return true;
}
and this is my layout. the layout contain a scrollview and their child, and the imageview which i want to drag.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ff0000"
android:gravity="center"
android:text="View 1"
android:textColor="#000"
android:textSize="100dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#00ff00"
android:text="View 2"
android:textColor="#000"
android:textSize="100dp" />
</LinearLayout>
</ScrollView>
<ImageView
android:id="#+id/draggable_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/icon" />
</FrameLayout>
After spend more time on it, finally find the best solution.
Modify my OnTouch listerner section as :
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
screenHight = displaymetrics.heightPixels;
screenWidth = displaymetrics.widthPixels;
#SuppressLint("NewApi") #Override
public boolean onTouch(View view, MotionEvent event) {
float newX, newY;
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
dX = view.getX() - event.getRawX();
dY = view.getY() - event.getRawY();
lastAction = MotionEvent.ACTION_DOWN;
break;
case MotionEvent.ACTION_MOVE:
newX = event.getRawX() + dX;
newY = event.getRawY() + dY;
// check if the view out of screen
if ((newX <= 0 || newX >= screenWidth-view.getWidth()) || (newY <= 0 || newY >= screenHight-view.getHeight()))
{
lastAction = MotionEvent.ACTION_MOVE;
break;
}
view.setX(newX);
view.setY(newY);
lastAction = MotionEvent.ACTION_MOVE;
break;
case MotionEvent.ACTION_UP:
if (lastAction == MotionEvent.ACTION_DOWN)
Toast.makeText(DraggableView.this, "Clicked!", Toast.LENGTH_SHORT).show();
break;
default:
return false;
}
return true;
}
It's working perfectly :)
After a lot of research, I found the best robust solution. The following code works perfectly for me keeping the ImageView or any View within Screen bounds.
Use the code in ACTION_MOVE
val pointerIndex = event.findPointerIndex(activePointerId)
if (pointerIndex == -1) return false
val (x, y) = event.getX(pointerIndex) to event.getY(pointerIndex)
posX += x - lastTouchX
posY += y - lastTouchY
// The BOUNDS_PADDING can be any value you like (Ex: 50)
val leftBound = -screenWidth + BOUNDS_PADDING
val rightBound = screenWidth - BOUNDS_PADDING
val downBound = -screenHeight + BOUNDS_PADDING
val upBound = screenHeight - BOUNDS_PADDING
if (posX <= leftBound) {
// Left Bound Reached while Dragging. So reset view position to be within bounds
posX = leftBound.toFloat()
}
if (posX >= rightBound) {
// Right Bound Reached while Dragging. So reset view position to be within bounds
posX = rightBound.toFloat()
}
if (posY <= downBound) {
// Bottom Bound Reached while Dragging. So reset view position to be within bounds
posY = downBound.toFloat()
}
if (posY >= upBound) {
// Top Bound Reached while Dragging. So reset view position to be within bounds
posY = upBound.toFloat()
}
binding.imageView.x = posX
binding.imageView.y = posY
lastTouchX = x
lastTouchY = y
You can obtain the screen width and height using the following
// Get Device Display Height and Width
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
val wm = windowManager.currentWindowMetrics
val insets = wm.windowInsets.getInsetsIgnoringVisibility(WindowInsets.Type.systemBars())
screenWidth = wm.bounds.width() - insets.left - insets.right
screenHeight = wm.bounds.height() - insets.bottom - insets.top
} else {
val dm = DisplayMetrics()
windowManager.defaultDisplay.getMetrics(dm)
screenWidth = dm.widthPixels
screenHeight = dm.heightPixels
}
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.
How to swipe a button on touch event android with directions left,right, up,down..?...I am new to android and want to develop a callback application.Please help by providing some links
callbackButton.setOnTouchListener(new OnTouchListener() {
private float currX;
private float currY;
#Override
public boolean onTouch(View v, MotionEvent event) {
float x1 = 0, x2, y1 = 0, y2, dx, dy , oldx =0,oldy=0;
String direction;
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
oldx = event.getX();
oldy = event.getY();
break;
case MotionEvent.ACTION_MOVE:
x2 = event.getX();
y2 = event.getY();
dx = x2-x1;
dy = y2-y1;
// Use dx and dy to determine the direction
if(Math.abs(dx) > Math.abs(dy)) {
if(dx>0) {
direction = "right";
Log.e("right...","moving..");
}else{
direction = "left";
Log.e("left...","moving..");
}
} else {
if(dy>0) {
direction = "down";
Log.e("down...","moving..");
currX = event.getRawX();
currY = event.getRawY();
Log.e("x=", ""+(currX-oldx));
Log.e("y=", ""+(currY-oldy));
MarginLayoutParams marginParams = new MarginLayoutParams(v.getLayoutParams());
marginParams.setMargins((int)(currX-oldx), (int)(currY-oldy),0, 0);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
v.setLayoutParams(layoutParams);
} else {
direction = "up";
Log.e("up...","moving..");
}
}
}
return true;
}
});
This is my code for imageButton moving on touch event. But this code is not working as I want
Here you will find an explaination on how to handle touch events:
http://developer.android.com/guide/topics/ui/ui-events.html
Then, in the on touch method, you need to
detect when the user put his finger down
store the finger's position
detect when the user moves
compare with previous position
detect when the user stops touching the screen
Example (using code from http://developer.android.com/training/graphics/opengl/touch.html)
#Override
public boolean onTouchEvent(MotionEvent e) {
// MotionEvent reports input details from the touch screen
// and other input controls. In this case, you are only
// interested in events where the touch position changed.
float x = e.getX();
float y = e.getY();
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
mIsDown = true;
break;
case MotionEvent.ACTION_MOVE:
float dx = x - mPreviousX;
float dy = y - mPreviousY;
// Here you can try to detect the swipe. It will be necessary to
// store more than the previous value to check that the user move constantly in the same direction
detectSwipe(dx, dy);
case MotionEvent.ACTION_UP:
mIsDown = false;
break;
}
mPreviousX = x;
mPreviousY = y;
return true;
}
With this simple case, you wouldn't even need to stor when the user puts his finger down or up (since moving implies a finger down) but it can be useful to have the boolean value stored)
Good luck with your app
EDIT:
It seems you edited your post with some code. You say that you don't get the explected results but you don't say what you get. This might be useful for us to help you.
You should try to find if a library that detects swipe movements already exists. I'm pretty sure there is many out there
EDIT 2:
I assume you button is a simple android.Button. One solution could be to create a class that extends Button (ex: MySwipableButton). in your xml, you create a layout that contains your MySwipableButton, and give it enought place to be moved (for example, it has width=fill_parent, since you want it to swipe on the while screen). MySwipableButton implements onTouch to store the position in which the button should be (using the method you already have)
MySwipableButton would also overwrite onDraw(Graphics g). In onDraw, you would paint the button (super.draw()) at the place it must be (regarding the current swipe) and leave the rest of the view empty
Check my blogspot in which I have shown the drag drop image onTouch event.
Edit: here is the full code:
First of all create android project in your eclipse and create a class and layout file as below:
MainActivity.java
public class MainActivity extends Activity
{
private ImageView m_ivImage, m_ivImage1;
private int m_counter = 0;
float m_lastTouchX, m_lastTouchY, m_posX, m_posY, m_prevX, m_prevY, m_imgXB, m_imgYB, m_imgXC, m_imgYC, m_dx, m_dy;
private LinearLayout m_llTop;
private AbsoluteLayout m_alTop;
private Button m_btnAddView, m_btnRemove;
private Context m_context;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
m_context = this;
m_prevX = 0;
m_prevY = 0;
m_imgXB = 50;
m_imgYB = 100;
m_imgXC = 150;
m_imgYC = 100;
m_ivImage = (ImageView) findViewById(R.id.ivImage);
m_ivImage1 = (ImageView) findViewById(R.id.ivImage1);
m_llTop = (LinearLayout) findViewById(R.id.llTop);
m_alTop = (AbsoluteLayout) findViewById(R.id.alTop);
m_btnAddView = (Button) findViewById(R.id.btnAdd);
m_btnRemove = (Button) findViewById(R.id.btnRemove);
m_ivImage.setOnTouchListener(m_onTouchListener);
m_ivImage1.setOnTouchListener(m_onTouchListener);
m_btnAddView.setOnClickListener(m_onClickListener);
m_btnRemove.setOnClickListener(m_onClickListener);
}
OnClickListener m_onClickListener = new OnClickListener(){
#Override
public void onClick(View p_v)
{
switch (p_v.getId())
{
case R.id.btnAdd:
addView();
break;
case R.id.btnRemove:
removeView();
break;
default:
break;
}
}
};
OnTouchListener m_onTouchListener = new OnTouchListener(){
#Override
public boolean onTouch(View p_v, MotionEvent p_event)
{
switch (p_event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
m_lastTouchX = p_event.getX();
m_lastTouchY = p_event.getY();
break;
}
case MotionEvent.ACTION_UP:
{
break;
}
case MotionEvent.ACTION_MOVE:
{
m_dx = p_event.getX() - m_lastTouchX;
m_dy = p_event.getY() - m_lastTouchY;
m_posX = m_prevX + m_dx;
m_posY = m_prevY + m_dy;
if (m_posX > 0 && m_posY > 0 && (m_posX + p_v.getWidth()) < m_alTop.getWidth() && (m_posY + p_v.getHeight()) < m_alTop.getHeight())
{
p_v.setLayoutParams(new AbsoluteLayout.LayoutParams(p_v.getMeasuredWidth(), p_v.getMeasuredHeight(), (int) m_posX, (int) m_posY));
m_prevX = m_posX;
m_prevY = m_posY;
}
break;
}
}
return true;
}
};
/**
* Add view dynamically for drag and drop
*/
private void addView()
{
ImageView m_img = new ImageView(m_context);
TextView m_tv=new TextView(m_context);
if (m_counter < 5)
{
if (m_counter % 2 == 0)
{
m_img.setBackgroundResource(R.drawable.bol_green);
m_tv.setText("Hello! Drag Me! ");
m_alTop.addView(m_tv, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXB), ((int) m_imgYB)));
m_alTop.addView(m_img, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXB), ((int) m_imgYB)));
}
else
{
m_img.setBackgroundResource(R.drawable.bol_paars);
m_alTop.addView(m_img, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXC), ((int) m_imgYC)));
}
m_counter++;
if (m_counter == 5)
m_btnAddView.setEnabled(false);
}
m_img.setOnTouchListener(m_onTouchListener);
m_tv.setOnTouchListener(m_onTouchListener);
}
public void removeView()
{
m_counter = 0;
m_alTop.removeAllViews();
m_alTop.invalidate();
m_btnAddView.setEnabled(true);
}
}
main_layout.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/llTop"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical" > <AbsoluteLayout
android:id="#+id/alTop" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_margin="10dp"
android:layout_weight=".70" > <ImageView android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="10dp"
android:src="#drawable/ic_menu_share" android:visibility="gone" />
<ImageView android:id="#+id/ivImage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginLeft="10dp"
android:layout_marginTop="10dp" android:layout_x="193dp"
android:layout_y="29dp" android:src="#drawable/ic_launcher" />
</AbsoluteLayout> <LinearLayout android:layout_width="wrap_content"
android:layout_height="0dp" android:layout_gravity="center"
android:layout_weight=".30" > <Button android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="10dp"
android:text="Add View" /> <Button android:id="#+id/btnRemove"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="10dp"
android:text="Remove View" android:visibility="visible" />
</LinearLayout> </LinearLayout>
Here is the boundary file xml code which shows the border of the layout in which object moves.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="1dp" android:color="#000000"/>
<corners
android:topLeftRadius="8dp" android:topRightRadius="8dp"
android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp"/> <gradient android:angle="270"
android:endColor="#FFFFFF" android:startColor="#FFFFFF"
android:type="linear" android:centerColor="#FFFFFF"/>
</shape>
</item>
</selector>
I am trying to scale a TextView with a pinch-zoom gesture. I have the pinch zoom working, but as the text scales it becomes somewhat pixelated. I assume this is because the actual font size is not scaling. However, when I try to put setTextSize() anywhere inside the onTouch() method, it scales very choppy with little lines appearing/disappearing on the edge of the TextView and the text disappearing when scale sufficiently large. I have the TextView inside a LinearLayout, and the pinch zoom scales the LinearLayout.
Here is the layout xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF000000" >
<LinearLayout
android:id="#+id/textLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:text="texthere" />
</LinearLayout>
<View
android:id="#+id/touchView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
Here is the touch listener java:
scaleView.setOnTouchListener(new View.OnTouchListener(){
public boolean onTouch(View v, MotionEvent event){
float viewWidth = mTextView.getWidth();
float viewHeight = mTextView.getHeight();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
mode = DRAG;
x_0 = mTextView.getX();//+50;
y_0 = mTextiew.getY();//+50;
initialTouchRawX = event.getRawX();
initialTouchRawY = event.getRawY();
currentScale = mTextView.getScaleX();
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist2 = spacing(event);
if (oldDist2 > 10f) {
mode = ZOOM;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
break;
case MotionEvent.ACTION_MOVE:
float xmin = x_0 - viewWidth/2*(currentScale-1);
float xmax = x_0 + viewWidth + viewWidth/2*(currentScale-1);
float ymin = y_0 - viewHeight/2*(currentScale-1) + viewShift;
float ymax = y_0 + viewHeight + viewHeight/2*(currentScale-1) + viewShift;
if (mode == DRAG && initialTouchRawX >= xmin && initialTouchRawX <= xmax && initialTouchRawY >= ymin && initialTouchRawY <= ymax ) {
float mShiftX = -(initialTouchRawX - x_0);
float mShiftY = -(initialTouchRawY - y_0);
mTextView.setX((float) event.getRawX()+mShiftX);
mTextView.setY((float) event.getRawY()+mShiftY);
} else if (mode == ZOOM) {
float newDist2 = spacing(event);
if (newDist2 > 10f) {
newScale = newDist2 / oldDist2 * currentScale;
mTextView.setScaleX(newScale);
mTextView.setScaleY(newScale);
//***I've tried setting the font size here***
}
}
break;
}
//***I've tried setting the font size here***
//*** Now I write the scaling float to shared preferences here
return true;
}
});
I am confounded about where and how to actually scale the font size. I've indicated in the code where I have tried implementing setFontSize(). I mean, it did work, for the most part, but like I mentioned above, it was very bad quality with text disappearing and the lines sometimes appearing on the edge of the TextView. Any hints are much appreciated.
=== EDIT: ===
I've implemented a custom TextView below:
public class ScaleTextView extends TextView {
public ScaleTextView(Context context) {
this(context, null);
}
public ScaleTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
updateTextSize(context);
}
public void updateTextSize(Context context) {
getTypeface();
float currentTextSize = getTextSize();
SharedPreferences otherSettings = context.getSharedPreferences("settings", 0);
float newScale = otherSettings.getFloat("key_scaling", 1f);
setTextSize(newScale * currentTextSize);
}
}
So this helps somewhat except that the font size is now different for portrait and landscape, and this causes the scaling to change each time orientation is changed. The text still disappears once scale sufficiently large and there are lines on the edge of the textview sometimes. Maybe there is a betterway to pass the scaling variable to the custom ScaleTextView class?
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! :)