How to set Image position relative to another Image on Android - android

I try to explain my problem. I have two ImageViews.
One of them is the background image and large as well.
This background image has also a zoom function. The other Image is a small image with size of 36x36.
The small image can be moved around the screen:
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
//Definition MotionEvent.ACTION_MASK: Bit mask of the parts of the action code that are the action itself.
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;
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) view
.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
view.setLayoutParams(layoutParams);
break;
}
viewGroup.invalidate();
return true;
}
If i zoom in the background image, the small image doesn't zoom. It's position is absolute to the screen and not to the Image.
How can i make the small Image to be relative to the large Image?
I hope it's clear what my Problem is.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/root">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/skizze"
android:scaleType="matrix"
/>
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:id="#+id/feuerloescher"
android:layout_gravity="center_horizontal|top"
android:layout_alignParentTop="false"
android:src="#drawable/feuerloescher"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="false" />
</RelativeLayout>

try with android:layout_below="#id/skizze"
Try as following xml code
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/skizze"
android:scaleType="matrix"
/>
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:id="#+id/feuerloescher"
android:layout_gravity="center_horizontal|top"
android:layout_alignParentTop="false"
android:src="#drawable/feuerloescher"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="false"
android:layout_below="#id/skizze" />

I know this is an old post however just in case it helps I just had this same issue and was able to resolve it as follows.
android:layout_alignTop="#id/app_bg_fill"
"alignTop" seemed to be the key line. Full code follows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/app_bg_fill"
android:orientation="vertical" >
<ImageView
android:id="#+id/app_bg_fill"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="60dp"
android:layout_marginTop="100dp"
android:scaleType="fitEnd"
android:src="#drawable/guide_item_2f"
android:background="#drawable/view_frame_style" />
<TextView
android:layout_width="match_parent"
android:layout_height="100sp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="20sp"
android:layout_marginRight="20sp"
android:layout_marginBottom="20sp"
android:background="#00000000"
android:layout_centerInParent="true"
android:padding="12sp"
android:text="SomeText"
android:layout_alignTop="#id/app_bg_fill"
android:textColor="#000000" />
</RelativeLayout>

Related

Setting ImageView and TextView at predefined XY coordinates - Xamarin Android

I have a Greeting Card activity where one can place Text and Image at desired locations by moving ImageView and TextView using Touch events. After moving to location I want to save its position and use same for other greetings. But neither view.GetX(), view.GetY() nor view.Left, view.Top is working.
I can capture the XY after moving but when using same XY coordinates on SetX & SetY or Left & Top the view is placed at weird locations.
This is my XML layout and using Touch even I move imgV1, txtName and txtSignature.
<RelativeLayout
android:background="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/layoutControl"
android:layout_below="#+id/toolbar1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pBar"
android:layout_gravity="center_vertical" />
</LinearLayout>
<FrameLayout
android:orientation="vertical"
android:id="#+id/GreetingFrame"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/layoutPhoto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_gravity="bottom|right|center_vertical|center_horizontal|center"
android:id="#+id/imgV1"
android:layout_width="135dp"
android:layout_height="135dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="65dp"
android:scaleType="matrix"/>
</FrameLayout>
<ImageView
android:id="#+id/frameImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/digicard"
android:adjustViewBounds="true"
android:layout_alignParentBottom="true"/>
<TextView
android:textSize="18sp"
android:textColor="#000000"
android:layout_gravity="bottom|right|center_vertical|center_horizontal|center"
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="35dp"
android:layout_marginBottom="55dp"
android:text="Your Name"/>
<TextView
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_gravity="bottom|right|center_vertical|center_horizontal|center"
android:id="#+id/txtSignature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="80dp"
android:layout_marginBottom="2dp"
android:text="9999999999"/>
</FrameLayout>
</RelativeLayout>
TextView touch event
private void TxtName_Touch(object s, TouchEventArgs e)
{
TextView v = (TextView)s;
if (e.Event.Action == MotionEventActions.Move)
{
v.SetX(e.Event.RawX - v.Width / 2.0f);
v.SetY(e.Event.RawY - v.Height / 2.0f);
}
}
Any suggestions ?
Modify your code as below ,it works fine on my side .
float dX, dY;
private void TextView_Touch(object sender, Android.Views.View.TouchEventArgs e)
{
TextView view = (TextView)sender;
int X = (int)e.Event.RawX;
int Y = (int)e.Event.RawY;
switch (e.Event.Action)
{
case MotionEventActions.Down:
dX = view.GetX() - X;
dY = view.GetY() - Y;
break;
case MotionEventActions.Move:
view.Animate().X(X + dX).Y(Y + dY).SetDuration(0).Start();
break;
}
}
Refer to https://stackoverflow.com/a/31094315/8187800.

android:layout_toLeftOf in RelativeLayout not working when I setX on left view

I have a RelativeLayout that contains two ImageViews and a View between them, both ImageViews are aligned to the View sibling [i.e. right ImageView is aligned to right side of the view, same with the left].
like this:
<RelativeLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="106dp">
<ImageView
android:id="#+id/img1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/euqualizer"
android:scaleType="fitXY"
app:srcCompat="#mipmap/ic_launcher_round" />
<View
android:id="#+id/euqualizer"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#000" />
<ImageView
android:id="#+id/img2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/euqualizer"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
app:srcCompat="#mipmap/ic_launcher" />
</RelativeLayout>
and in the java code I want to move the view's location according to the direction of the touch motion i.e. using setX() on the view.
like this:
img1.setOnTouchListener(touchListener);
img2.setOnTouchListener(touchListener);
View.OnTouchListener touchListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startDrag_X = event.getX();
break;
case MotionEvent.ACTION_MOVE:
float x_delta = event.getX() - startDrag_X;
euqualizer.setX(euqualizer.getX() + x_delta);
break;
case MotionEvent.ACTION_UP:
startDrag_X = -1;
break;
}
return true;
}
};
But for some reason although, the view does successfully relocate itself as I expected it to do, but the ImageViews which are aligned to the views sides do not move at all
what am I doing wrong?

Adding imageView on ViewGroup with setOnTouchListener

EDIT: This question was solved!
i'm facing with a, hopefully, simple problem. What i need it's to show/add image on onTouch position when the user click on the Image/Area.
This is the layout:
activity_test_diff.xml
<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"
tools:context=".TestDiff"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/img_rectangle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:visibility="invisible"/>
<ImageView
android:id="#+id/img_test_diff1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter" />
<ImageView
android:id="#+id/click_check_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check_green_48dp"/>
<ImageView
android:id="#+id/click_check_ko"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:src="#drawable/close_red_48dp"/>
</RelativeLayout>
<ImageView
android:id="#+id/img_test_diff2"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:scaleType="fitCenter"/>
</LinearLayout>
The parent group of the Relative Layout it's a LinearLayout, but i don't care if someone touch outside of RelativeLayout. This is the code to handle the touch:
TestDiff.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_diff);
RelativeLayout relative = (RelativeLayout) findViewById(R.id.relative_layout);
relative.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent ev) {
final int action = ev.getAction();
final int evX = (int) ev.getX();
final int evY = (int) ev.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
int x = (int) ev.getX();
int y = (int) ev.getY();
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
ImageView iv = new ImageView(getApplicationContext());
lp.setMargins(x, y, 0, 0);
iv.setLayoutParams(lp);
iv.setImageDrawable(getResources().getDrawable(
R.drawable.check_green_48dp));
((ViewGroup) v).addView(iv);
return true;
case MotionEvent.ACTION_UP:
// On the UP, we do the click action.
// The hidden image (img_rectangle) has three different hotspots on it.
// The colors are red, blue, and yellow.
// Use img_rectangle to determine which region the user
return true;
default:
return false;
}
}
And this is the coming error:
Attempt to invoke virtual method 'void android.widget.RelativeLayout.setOnTouchListener(android.view.View$OnTouchListener)' on a null object reference
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2646)
Mean someone can figure out what's happening!
Thanks
on the xml layout you have :
<RelativeLayout
android:id="#+id/relative_layout"
in the java code you have
RelativeLayout relative = (RelativeLayout) findViewById(R.id.layout_relative);
you reversed relative & layout words

Android: Horizontal and vertical scroll for recyclerview

I am trying to implement horizontal and vertical scrolling for a Recycler view at the same time.I have to show a table of 8 columns, so I plan to implement horizontal and vertical scrolling at the same time.
I tried HorizontalScrollView in list row but it is scrolling horizontally in one row.
I also tried the HorizontalScrollView as the parent of recyclerview but its not working
list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:clickable="true"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:textColor="#color/title"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaa"/>
<TextView
android:layout_toRightOf="#+id/title"
android:id="#+id/genre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="bbb"/>
<TextView
android:layout_toRightOf="#+id/genre"
android:id="#+id/year"
android:textColor="#color/year"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_height="wrap_content"
android:text="ccc"/>
</RelativeLayout>
Activity_main.xml
<?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="horizontal" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
can any one please tell me an idea.
The best solution i found so far to have horizontal and vertical scrolling on one view is to put it inside one FrameLayout. Then your view must implement OnTouch (you can do this in your activity to) and you just have to scroll it as the touch pointer moves.
Here is an example :
xml :
<FrameLayout
android:id="#+id/TwoWaysScrollableContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<YourView
android:id="#+id/GridContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false" />
</FrameLayout>
C# (i use xamarin, but Java wouldn't have so many differencies i think)
:
public class MyActivity : Activity
{
private MyView _myView; //Can be GridView, relative layout or wathever
private float _startX, _startY,_prevDx, _prevDy, _dx,_dy;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
_myView = FindViewById<MyView>(Resource.Id.GridContainer);
}
public bool OnTouch(View v, MotionEvent e)
{
switch (e.Action)
{
case MotionEventActions.Down:
{
mode = Mode.DRAG;
startX = e.GetX() - prevDx;
startY = e.GetY() - prevDy;
break;
}
case MotionEventActions.Move:
{
/* you also could add logic to prevent your view from scrolling out of you grid bounds*/
if (mode == Mode.DRAG)
{
dx = startX - e.GetX();
dy = startY - e.GetY();
_myView.ScrollBy((int)(dx), (int)(dy));
startX = e.GetX();
startY = e.GetY();
}
break;
}
case MotionEventActions.Up:
{
mode = Mode.NONE;
prevDx = dx;
prevDy = dy;
break;
}
}
return true;
}
}
I know this doesn't answer your question directly ( i don't know much about recycler view), but i hope it can still help you. I used this for a tile engine and it did the trick very well.

Detect finger leave of image button in android

I have an image button, i am trying to record an audio on touch of a button & when user leaves a button i stop recording.I am successfull in doing that.I have a problem when user starts moving its finger within that bounds of imagebutton.I am using on ACTION_MOVE to handle this, i am not getting 100% success , sometimes it detects on leave , sometimes not. Please help. Below is code i am using..
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (v.getId()) {
case R.id.btn_audio :
final int action = event.getAction();
// get the View's Rect relative to its parent
v.getHitRect(rect);
// offset the touch coordinates with the values from rect to obtain meaningful coordinates
final float x = event.getX() + rect.left;
final float y = event.getY() + rect.top;
switch (action) {
case MotionEvent.ACTION_DOWN :
audioBtn.setImageDrawable(getResources().getDrawable(R.drawable.img_audio_pressed));
mHandler.sendEmptyMessage(MSG_START_TIMER);
timer.setVisibility(View.VISIBLE);
playBtn.setVisibility(View.GONE);
break;
case MotionEvent.ACTION_MOVE :
Log.e(TAG, rect.top+","+rect.bottom+","+rect.left+","+rect.right);
Log.e(TAG, (int)x+","+(int)y);
if (!rect.contains((int) x, (int) y)) {
Log.e(TAG, "In action move,outside");
audioBtn.setImageDrawable(getResources().getDrawable(R.drawable.img_audio));
playBtn.setVisibility(View.VISIBLE);
if (stop)
mHandler.sendEmptyMessage(MSG_STOP_TIMER);
} else {
Log.e(TAG, "In action move,inside");
audioBtn.setImageDrawable(getResources().getDrawable(R.drawable.img_audio_pressed));
timer.setVisibility(View.VISIBLE);
playBtn.setVisibility(View.GONE);
}
break;
case MotionEvent.ACTION_UP :
// the user raised his finger, cancel the Runnable
audioBtn.setImageDrawable(getResources().getDrawable(R.drawable.img_audio));
playBtn.setVisibility(View.VISIBLE);
if (stop)
mHandler.sendEmptyMessage(MSG_STOP_TIMER);
break;
}
break;
default :
break;
}
return false;
}
XML ::
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/actvity_background"
android:padding="15dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/record_review"
style="#style/textview.review"
android:layout_below="#id/rating_app"
android:layout_marginTop="20dp"
android:text="Record a review" />
<LinearLayout
android:id="#+id/record"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/record_review"
android:orientation="horizontal"
android:splitMotionEvents="false"
android:weightSum="2" >
<RelativeLayout
android:id="#+id/audio_record"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageButton
android:id="#+id/btn_audio"
style="#style/imagebutton"
android:layout_centerInParent="true"
android:layout_marginTop="20dp"
android:background="#android:color/transparent"
android:contentDescription="#string/desc_provider_thumb"
android:focusableInTouchMode="true"
android:src="#drawable/img_audio" />
<TextView
android:id="#+id/timer"
style="#style/textview.review"
android:layout_below="#id/btn_audio"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="00:30"
android:visibility="gone" />
<ImageButton
android:id="#+id/btn_play"
style="#style/imagebutton"
android:layout_below="#id/btn_audio"
android:layout_marginLeft="6dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/timer"
android:background="#android:color/transparent"
android:contentDescription="#string/desc_provider_thumb"
android:src="#drawable/img_play"
android:visibility="gone" />
<ImageButton
android:id="#+id/btn_pause"
style="#style/imagebutton"
android:layout_below="#id/btn_audio"
android:layout_marginLeft="6dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/timer"
android:background="#android:color/transparent"
android:contentDescription="#string/desc_provider_thumb"
android:src="#drawable/img_pause"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/video_record"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageButton
android:id="#+id/btn_video"
style="#style/imagebutton"
android:layout_centerInParent="true"
android:layout_marginTop="20dp"
android:background="#android:color/transparent"
android:contentDescription="#string/desc_provider_thumb"
android:src="#drawable/img_video" />
<RelativeLayout
android:id="#+id/video_preview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<ImageView
android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/img_dumy_home_video_thumbnail" />
<ImageButton
android:id="#+id/play_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img_play" />
</RelativeLayout>
<Button
android:id="#+id/btn_rerecord"
style="#style/button.review"
android:layout_below="#id/video_preview"
android:layout_centerHorizontal="true"
android:layout_marginTop="2dp"
android:text="#string/re_record"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<Button
android:id="#+id/btn_submit_review"
style="#style/button.review"
android:layout_below="#id/record"
android:text="Submit review" />
</RelativeLayout>
return true
instead of
return false
in your onTouch method
Instead of v.getHitRect(rect); use getLocationInWindow() which returns screen co-ordinates instead of co-ordinates relative to the parent. Update your onTouch code as follows:
//same here
...
...
int[] location = new int[2];
v.getLocationInWindow(location); // get position on the screen.
rect = new Rect(location[0], location[1], location[0]+v.getWidth(), location[1]+v.getHeight());
final float x = event.getX(); // screen x position
final float y = event.getY(); // screen y position
...
...
//same here

Categories

Resources