Develop Reference

Find the difference App layout not working

I want to create a find the difference in 2 images kind of app in Native Android.
I have done this using a Custom view with 2 images side by side and finding the touch positions (X, Y) of the image and it kind of works. But as soon as I try it on a different device the (X, Y) changes.
On one device the bitmap is (600 x 500) and the other it is (800 x 700). What can I do to get the aspect ratio same which is 6:5 on all devices?
Is there any alternate way to do this kind of App?
This is a part of my XML layout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<gamesforkids.coloring.games.multipleclickableex.CanvasView
android:id="#+id/signature_canvas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/scene_2"
/>
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ring"
android:visibility="invisible" />
<ImageView
android:id="#+id/iv_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ring"
android:visibility="invisible" />
</FrameLayout>
This is my java onTouch code.
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (v.getId()) {
case R.id.signature_canvas:
x0 = event.getX();
y0 = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
CanvasView.startTouch(x0, y0);
break;
case MotionEvent.ACTION_MOVE:
CanvasView.moveTouch(x0, y0);
break;
case MotionEvent.ACTION_UP:
CanvasView.upTouch();
Toast.makeText(this, "X_Value_" + x0 + "_Y_Value_" + y0, Toast.LENGTH_SHORT).show();
if (x0 > MyConstant.x0_min && x0 < MyConstant.x0_max && y0 > MyConstant.y0_min && y0 < MyConstant.y0_max)
{
iv.setX(((MyConstant.x0_max+MyConstant.x0_min)/2));
iv.setY(((MyConstant.y0_max+MyConstant.y0_min)/2));
iv.setVisibility(View.VISIBLE);
iv1.setX(((MyConstant.x0_max+MyConstant.x0_min)/2));
iv1.setY(((MyConstant.y0_max+MyConstant.y0_min)/2));
iv1.setVisibility(View.VISIBLE);
}
if (x0 > MyConstant.x0_min1 && x0 < MyConstant.x0_max1 && y0 > MyConstant.y0_min1 && y0 < MyConstant.y0_max1)
{
iv_a.setX(((MyConstant.x0_max1+MyConstant.x0_min1)/2));
iv_a.setY(((MyConstant.y0_max1+MyConstant.y0_min1)/2));
iv_a.setVisibility(View.VISIBLE);
iv_a1.setX(((MyConstant.x0_max1+MyConstant.x0_min1)/2));
iv_a1.setY(((MyConstant.y0_max1+MyConstant.y0_min1)/2));
iv_a1.setVisibility(View.VISIBLE);
}
break;
}
break;
}
return true;
}
Link of the screenshot of large device
and Link of the screenshot of normal device

You have to calculate offsets that depend on the current device.
There are two cases:
If the device height is more than (the height of image 1 + the height of image 2): you have to put your images in the center and you will have unused spaces in the top and in the bottom.
If the device width is more than (the width of images): you have to put your images in the center and you will have unused spaces in the left and in the right.

Android Viewflipper sequence with multiple views

I want to add a viewflipper with multiple views in it (say 3 views with one image in each view). Following is my code :
In xml :
<ViewFlipper
android:id="#+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="6dip" >
<!-- The child Views/Layout to flip -->
<!-- Layout 1 for 1st Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/help1" />
</LinearLayout>
<!-- Layout 2 for 2nd Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/help2" />
</LinearLayout>
<!-- Layout 3 for 3rd Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/help3" />
</LinearLayout>
</ViewFlipper>
In Java:
viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
// Method to handle touch event like left to right swap and right to left swap
public boolean onTouchEvent(MotionEvent touchevent)
{
switch (touchevent.getAction())
{
// when user first touches the screen to swap
case MotionEvent.ACTION_DOWN:
{
lastX = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP:
{
float currentX = touchevent.getX();
// if left to right swipe on screen
if (lastX < currentX)
{
// If no more View/Child to flip
if (viewFlipper.getDisplayedChild() == 0)
break;
// set the required Animation type to ViewFlipper
// The Next screen will come in form Left and current Screen will go OUT from Right
viewFlipper.setInAnimation(this, R.anim.in_from_left);
viewFlipper.setOutAnimation(this, R.anim.out_to_right);
// Show the next Screen
viewFlipper.showNext();
}
// if right to left swipe on screen
if (lastX > currentX)
{
if (viewFlipper.getDisplayedChild() == 1)
break;
// set the required Animation type to ViewFlipper
// The Next screen will come in form Right and current Screen will go OUT from Left
viewFlipper.setInAnimation(this, R.anim.in_from_right);
viewFlipper.setOutAnimation(this, R.anim.out_to_left);
// Show The Previous Screen
viewFlipper.showPrevious();
}
break;
}
}
return false;
}
This is working except that the views come in the order 1 > 3 > 2 rather than 1 > 2 > 3 on swiping. As I am new to android I have just copied this code from elsewhere without understanding the code.

You are using ViewFlipper to swipe left and right between views. You should really use ViewPager for that.
That been said, you can do what you want with view flipper if you change your ACTION_UP to something like:
case MotionEvent.ACTION_UP: {
float currentX = touchevent.getX();
if (lastX > currentX) {
if (viewFlipper.getDisplayedChild() == 2)
break;
// anim stuff here...
viewFlipper.showNext();
}
if (lastX < currentX) {
if (viewFlipper.getDisplayedChild() == 0)
break;
// anim stuff here...
viewFlipper.showPrevious();
}
break;
}

Why my animation does not stop in the to-x given value?

I want to move a view on touch and when the user unholds this view, it is started an animation which moves my view to the end of its parent.
This is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/time_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<AbsoluteLayout
android:id="#+id/slide_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:background="#0000FF" >
<View
android:id="#+id/slide_to_pause"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00FFFF" />
</AbsoluteLayout>
</RelativeLayout>
This is how I set the view to move in my onCreate:
slideView = ((View) findViewById(R.id.slide_to_pause));
slideView.setOnTouchListener(this);
This is how I move the view and starts the animation:
#Override
public boolean onTouch(View view, MotionEvent event) {
AbsoluteLayout.LayoutParams layoutParams = (AbsoluteLayout.LayoutParams) view.getLayoutParams();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
mX = event.getRawX();
break;
case MotionEvent.ACTION_UP:
int endOfAnimation = findViewById(R.id.slide_layout).getWidth() - view.getWidth();
mSlideAnimation = new TranslateAnimation(0, endOfAnimation - layoutParams.x, 0, 0);
mSlideAnimation.setDuration(1000);
view.startAnimation(mSlideAnimation);
Log.d(TAG, "endOfAnimation = " + layoutParams.x + " | " + endOfAnimation);
break;
case MotionEvent.ACTION_MOVE:
layoutParams.x = (int) event.getRawX();
view.setLayoutParams(layoutParams);
break;
}
return true;
}
The problem is that when the view arrives at the end it comes back to a point in the midle of the screen, which is the point where the user unholds the view.
How can I fix this?
Thank you!

You need to use
mSlideAnimation.setFillAfter(true);
to make it not revert back to the start.
If that doesn't work you might have to follow the suggestion on Animation.setFillAfter/Before - Do they work/What are they for?

You can simulate animation manually (move views yourself, without animation framework) by using
View.offsetLeftAndRight(int offset)
View.offsetTopAndBottom(int offset)

Using a Viewflipper with Gridview

I've created a calendar which works fine, using a GridView which has an OnClickListener.
Now I wrapped the two GridViews in a ViewFlipper. The ViewFlipper has an OnTouchListener which also works fine, I can change the view by using ontouch when dragging. The problem is though that I have to drag on the EMTPY space in the Activity in order to use the ViewFlipper. When I drag on the GridView, nothing happends at all. But I can click on the GridView for OnClickListener.
xml:
<ViewFlipper android:id="#+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<GridView
android:id="#+id/weeks"
android:numColumns="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="8">
</GridView>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</GridView>
</LinearLayout>
android code:
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
// Get the action that was done on this touch event
switch (arg1.getAction())
{
case MotionEvent.ACTION_DOWN:
{
// store the X value when the user's finger was pressed down
downXValue = arg1.getX();
break;
}
case MotionEvent.ACTION_UP:
{
// Get the X value when the user released his/her finger
currentX = arg1.getX();
// going backwards: pushing stuff to the right
if (currentX - downXValue < -(arg0.getWidth()/3))
{
mdh.nextMonth();
calendar.add(Calendar.MONTH, 1);
currentMonth.setText(new SimpleDateFormat("MMMM yyyy").format(calendar.getTime()));
cAdapter.notifyDataSetChanged();
updateWeeks();
// Set the animation
vf.setInAnimation(arg0.getContext(), R.anim.push_left_in);
vf.setOutAnimation(arg0.getContext(), R.anim.push_left_out);
// Flip!
vf.showPrevious();
}
// going forwards: pushing stuff to the left
if (currentX - downXValue > arg0.getWidth()/3)
{
mdh.previousMonth();
calendar.add(Calendar.MONTH, -1);
currentMonth.setText(new SimpleDateFormat("MMMM yyyy").format(calendar.getTime()));
cAdapter.notifyDataSetChanged();
updateWeeks();
// Set the animation
vf.setInAnimation(arg0.getContext(), R.anim.push_right_in);
vf.setOutAnimation(arg0.getContext(), R.anim.push_right_out);
// Flip!
vf.showNext();
}
break;
}

gridview.setOnTouchListener(new OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event) {
return detector.onTouchEvent(event);
}
});

I had the same issue with a ViewFlipper and ScrollViews.
Try adding the onTouchListener to your GridView aswell and it should work.

Android: Scrollable (horizontal and vertical) ImageView with Buttons overlayed

I want to implement an activity where the only thing you see is a big image, which can be scrolled horizontally and vertically.On Top of that image I want to display buttons, that can be clicked and trigger certain actions (like creating an intent to start a new activity).
First I was thinking about a ScrollView, that has a FrameLayout as a child. The FrameLayout could have the image as a background and can have the buttons as childs. Because I know the position of my buttons exactly I could place them with absolute coordinates. Here is my first code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="1298px"
android:layout_height="945px"
android:background="#drawable/myimage">
<Button
android:id="#+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="115px"
android:layout_y="128px"/>
</FrameLayout>
</ScrollView>
The Problem is, that you can only scroll a ScrollView vertically. HorizontalScrollView doesn't solve the Problem, cause it only scrolls in one direction either. Can I mix them somehow? Is there another solution?
I found some similar threads on stackoverflow, where people put the image into a WebView and get horizonzal/vertical scrolling for free (here). Or someone put the image in an imageview and gave the imageview an onTouchListener to handle scrolling (here). The Problem with both ways is, that I either way I dont think you can put Buttons on top of the image, which is what I need to do.
I would very appreciate if someone help me out.

Using the (deprecated!!!) AbsoluteLayout and giving it and onTouchListener solved my problem:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/myImage"
android:layout_width="1298px"
android:layout_height="945px"
android:layout_x="0px"
android:layout_y="0px" />
<Button
android:id="#+id/myButton"
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50px"
android:layout_y="300px"
android:tag="1"/>
</AbsoluteLayout>
private float mx;
private float my;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
final Button button = (Button)findViewById(R.id.myButton);
button.setOnClickListener (new View.OnClickListener(){
// OnClickAction
});
final AbsoluteLayout switcherView = (AbsoluteLayout) this.findViewById(R.id.myLayout);
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;
}
});
}