Scrollview with many buttons over an image

Question

I want to do something similar to a Map behavior where I have a large Image (bigger than the phone screen) and a group of buttons I want to put over special XY locations over the image, and when the user scrolls the image (horizontally and vertically), the buttons keep the same position over the image (like markers do). Then the user can click over a button and open a new activity.

I want to do this in xml. Any suggestion?

I cant figure out how to attach the buttons with the image XY positions:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/map_view"
            android:background="@drawable/myImage"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 1"
            android:id="@+id/radioButton" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 2"
            android:id="@+id/radioButton2" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 3"
            android:id="@+id/radioButton3" />`
        />
    </RelativeLayout>

</ScrollView>

Create a parent relative layout then the buttons inside but on first: ChildOfScrollView> ScrollView> — Sheychan, Jul 10 '15 at 01:17

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Instead of scrollview you should change imageview position on touch. If user touches top-down , imageview position should goes to negative direction same as top-down pixels. Therefore your imageview can move to right-left as well.

Get the touch position inside the imageview in android

Android move view on touch event

edited May 23 '17 at 12:14

Community

1
1

answered Jul 10 '15 at 01:16

Abdullah Tellioglu

1,434
1
10
26

Sheychan · Answer 2 · 2015-07-10T01:41:41.523

0

Here, make sure the the ImageView should always be larger than the screen as you say.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/map_view"
        android:layout_width="1800px"
        android:layout_height="1800px"
        android:background="@drawable/the_large_image"/>

    <RadioButton
        android:id="@+id/radioButton"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 1"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 2"/>

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="60dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 3"/>

</RelativeLayout>

</ScrollView>

edited Jul 10 '15 at 01:41

answered Jul 10 '15 at 01:24

Sheychan

2,415
14
32

Not what I am looking for. I need the button to move if the image is scrolled. The button must keep the XY position over the image – IIRed-DeathII Jul 10 '15 at 01:29
Oooooh you mean the button also moves away if the you are on the end of the image sorrry Im gonna edit it right away – Sheychan Jul 10 '15 at 01:31
kindly check, I hope it went well – Sheychan Jul 10 '15 at 01:41
was almost what I was looking for. It scrolls up and down, but not laterally cause the image fits device width (even if I put 3000px on image layout_width). Any suggestion to keep image size without automatically resizing it to fit width? – IIRed-DeathII Jul 23 '15 at 12:35
I figured out part of the problem. First of all, is important for ImageView use "android:src" instead of "android:background". Secondly, you have to add "android:scaleType="centerCrop"" so the image wont fit device width and keep original size. Besides this, I am still not being able to scroll horizontally, only vertically. If you can figure out that, I am done :) – IIRed-DeathII Jul 23 '15 at 13:17
Ok, problem resolved. I put a solution in an answer. Thanks for your help :) – IIRed-DeathII Jul 23 '15 at 14:31

score 0 · Accepted Answer · answered Jul 23 '15 at 14:29

Thanks to @Sheychan that gave me some clue for getting this as I wanted.

First of all: the xml. Use 2 scroll views (one main that is vertical, and another horizontal), so that we can get horizontal and vertical scrolling. Then a RelativeLayout so that we can put the radiobuttons over the image in desired positions. Is important the "src" and "scaleType" in image so that we can get correct image dimensions. Here is the code for xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/svVertical">

    <HorizontalScrollView android:id="@+id/hsvHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isScrollContainer="true">

            <ImageView
                android:id="@+id/map_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/imagen"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioButton"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 1"/>

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_marginTop="200dp"
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 2"/>

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_marginTop="80dp"
                android:layout_marginLeft="60dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 3"/>

        </RelativeLayout>
    </HorizontalScrollView>
</ScrollView>

But with this solution we got odd scrolling (only vertical or horizontal, not both at the same time: call it "diagonal" scrolling). To resolve this: a simple override on Activity holding this layout:

ScrollView scrollY;
HorizontalScrollView scrollYChild;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scrollY = (ScrollView)findViewById(R.id.svVertical);
        scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        scrollYChild.dispatchTouchEvent(event);
        scrollY.onTouchEvent(event);
        return super.dispatchTouchEvent(event);
    }

This start working better, but still in an odd way. Is like the move "jumps" while scrolling.

The solution: take away the action bar:

On the Manifest, add the "NoActionBar" theme in the application tag (or the activity tag)

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" > 
...
        </application>

But, be careful, cause the activity must not be an "ActionBarActivity", you must change it to "Activity".

And, just in case, by Android recommendation, add a compatible old SDK versions with a "hide the status bar" on the OnCreate of the Activity.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // If the Android version is lower than Jellybean, use this call to hide
        // the status bar.
        if (Build.VERSION.SDK_INT < 16) {
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }

    setContentView(R.layout.activity_main);
    scrollY = (ScrollView)findViewById(R.id.svVertical);
    scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
}

And that's all folks :) Hope it helps you as it helped me.

Scrollview with many buttons over an image

3 Answers3

Linked