Android - How to layout buttons inside image?

Question

I have some image with areas. I would like to react on click in specific area, but I can't cut this image into separate images. You can see example below.

Black circles are my areas. Red rectangles are my transparent buttons. How would you implement this in XML ? I want to make sure that active buttons will always cover the same area in background image.

I've tried to do this using FrameLayout :

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

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/_podklad" />
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <ImageButton
                    android:layout_gravity="right|bottom"
                    android:contentDescription="prawy_tyl"
                    android:layout_marginRight="45dp"
                    android:layout_marginBottom="40dp"
                    android:layout_width="65dp"
                    android:layout_height="75dp"
                    android:background="@null"
                    android:src="@null"/>

                <ImageButton
                    android:contentDescription="lewe_kolo_przod"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="38dp"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@null"
                    android:src="@null"/>
                <ImageButton
                    android:layout_gravity="bottom"
                    android:contentDescription="lewe_kolo_tyl"
                    android:layout_marginLeft="28dp"
                    android:layout_marginBottom="75dp"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@null"
                    android:src="@null"/>
                <ImageButton
                    android:layout_gravity="right"
                    android:contentDescription="prawe_kolo_przod"
                    android:layout_marginRight="28dp"
                    android:layout_marginTop="40dp"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@null"
                    android:src="@null"/>
                <ImageButton
                    android:layout_gravity="right|bottom"
                    android:contentDescription="prawe_kolo_tyl"
                    android:layout_marginRight="25dp"
                    android:layout_marginBottom="75dp"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@null"
                    android:src="@null"/>
            </RelativeLayout></FrameLayout>

As you can see I tried to specify fixed width, height and margins for buttons, but in Android studio it worked well on Nexus 4 preview, but on larger screen like Nexus 9 the buttons were misplaced.

I wait for your ideas.

Greetings.

Answer 1

Add circle in image, and change the attributes of padding = 10dp or padding 20dp. or padding-left or padding - right

Answer 2

since you know your image and you know where the areas located in this image in pixels i don't recommend using transparent buttons you can instead use (onTouchListener) for this Image and as response to this touch first do View.measure to this Image and then do your mapping depending on the (x,y) axis