Dynamically place buttons where there is a circle on background image

Question

I am new android developer and trying to develop a game in android using eclipse IDE. Which has a game board like this

I just want to place the button where there is a circle.

I hard-coded the buttons positions in xml using relative layout but because of different size of screens this solution is not working

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/AbsoluteLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bani_qatar_board" >

<Button
    android:id="@+id/btn_a8"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignLeft="@+id/btn_a1"
    android:layout_below="@+id/btn_a1"
    android:layout_marginTop="82dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a7"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignLeft="@+id/btn_a8"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="7dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b2"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_below="@+id/btn_a1"
    android:layout_marginLeft="51dp"
    android:layout_marginTop="14dp"
    android:layout_toRightOf="@+id/btn_a1"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b1"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBottom="@+id/btn_a8"
    android:layout_alignLeft="@+id/btn_b2"
    android:layout_marginBottom="2dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b8"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_above="@+id/btn_a7"
    android:layout_alignLeft="@+id/btn_b1"
    android:layout_marginBottom="11dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c2"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_below="@+id/btn_b2"
    android:layout_marginLeft="52dp"
    android:layout_marginTop="5dp"
    android:layout_toRightOf="@+id/btn_b8"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c1"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBottom="@+id/btn_a8"
    android:layout_alignLeft="@+id/btn_c2"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c8"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_above="@+id/btn_b8"
    android:layout_alignLeft="@+id/btn_c1"
    android:layout_marginBottom="7dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b3"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBottom="@+id/btn_b2"
    android:layout_alignLeft="@+id/btn_a2"
    android:layout_marginBottom="4dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c3"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c2"
    android:layout_alignBottom="@+id/btn_c2"
    android:layout_alignLeft="@+id/btn_b3"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c7"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c8"
    android:layout_alignBottom="@+id/btn_c8"
    android:layout_alignLeft="@+id/btn_c3"
    android:background="@drawable/blank"
    android:focusable="true" />

<Button
    android:id="@+id/btn_b7"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBottom="@+id/btn_b8"
    android:layout_alignLeft="@+id/btn_c7"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a6"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_a7"
    android:layout_alignBottom="@+id/btn_a7"
    android:layout_alignLeft="@+id/btn_b7"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c4"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c3"
    android:layout_alignBottom="@+id/btn_c3"
    android:layout_marginLeft="95dp"
    android:layout_toRightOf="@+id/btn_c3"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c5"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c1"
    android:layout_alignBottom="@+id/btn_c1"
    android:layout_alignLeft="@+id/btn_c4"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_c6"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c7"
    android:layout_alignBottom="@+id/btn_c7"
    android:layout_alignLeft="@+id/btn_c5"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b4"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_b3"
    android:layout_alignBottom="@+id/btn_b3"
    android:layout_marginLeft="50dp"
    android:layout_toRightOf="@+id/btn_c4"
    android:background="@drawable/blank"
    android:paddingBottom="9dp" />

<Button
    android:id="@+id/btn_b5"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_c5"
    android:layout_alignBottom="@+id/btn_c5"
    android:layout_alignLeft="@+id/btn_b4"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_b6"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_b7"
    android:layout_alignBottom="@+id/btn_b7"
    android:layout_alignLeft="@+id/btn_b5"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a3"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_above="@+id/btn_b2"
    android:layout_alignParentRight="true"
    android:layout_marginRight="13dp"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a4"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_b5"
    android:layout_alignBottom="@+id/btn_b5"
    android:layout_alignLeft="@+id/btn_a3"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a5"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignBaseline="@+id/btn_a6"
    android:layout_alignBottom="@+id/btn_a6"
    android:layout_alignLeft="@+id/btn_a4"
    android:background="@drawable/blank" />

<Button
    android:id="@+id/btn_a2"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_above="@+id/btn_b2"
    android:layout_marginLeft="86dp"
    android:layout_toRightOf="@+id/btn_c2"
    android:background="@drawable/blank" />

<TextView
    android:id="@+id/infoDisplay"
    android:layout_width="175dp"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/btn_b1"
    android:layout_toLeftOf="@+id/btn_c5"
    android:gravity="center"
    android:text="@string/text"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#000000" />

<Button
    android:id="@+id/btn_a1"
    android:layout_width="27dp"
    android:layout_height="25dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="63dp"
    android:background="@drawable/blank" />

</RelativeLayout>`

Out put is

Issue : You can clearly see buttons are not showing on circles.

Note : I don't want to used any game-engine right now for this purpose. I want to develop this game in eclipse.

Any suggestions how i can place buttons exactly on circle. Thanks in advance.

You'll probably need some pattern recognition for this, if you don't know exactly where the circles are. — g00dy, Aug 29 '13 at 06:52
yes you are write i know the circles places on image But code wise i don't know where circles are. — Fahid Mahmood, Aug 29 '13 at 06:59

score 0 · Answer 1 · answered Aug 29 '13 at 06:52

If you stretch background image on both dimensions without preserving AR, then you can use LinearLayout and arrange buttons by assigning layout_weight to them and invisible padding views.
But this may me very tedious and it may be better to calculate all positions in code.

score 0 · Accepted Answer · answered Aug 29 '13 at 06:56

0

You could also hardcode the layout_height and layout_width of the relativeLayout. It's Background picture will be autosized to that layout size. Should work then for every display size.

answered Aug 29 '13 at 06:56

MojioMS

1,583
4
17
42

thanks for suggestion let me check whether this solution works or not – Fahid Mahmood Aug 29 '13 at 07:02
Yes it works buttons position are not changed but now the problem is boardsize height and width is hardcoded so layout other part is showing black i want to show board on full screen of kindly see the image. now what should i do thanks in advance [link](http://i.imgur.com/APNvVeI.jpg) – Fahid Mahmood Aug 29 '13 at 07:16
Then you should do it programmatically. Use ur Layout with fill_parent again. Then in code, create buttons and set them depending on screen_sizes to correct positions. have a look at here: http://stackoverflow.com/questions/1016896/how-to-get-screen-dimensions – MojioMS Aug 29 '13 at 07:25
let us suppose i did get the screen_width and screen_height so how i will calculate the positions where the circles are?. – Fahid Mahmood Aug 29 '13 at 07:34
they are in some order... You have to trial and error. eg the first 3 are at (screenSizeX/3, screenSizeY/3), (2*screenSizeX/3, screenSizeY/3), (screenSizeX, screenSizeY/3) , then the other 2 lines. but you have to reattempt if they do not fit – MojioMS Aug 29 '13 at 07:47
ok got your point let me check whether this calculate correct value for different screen size pixels . – Fahid Mahmood Aug 29 '13 at 07:58
Although it is not a efficient solution but it will work.so +1 but i am still locking for good answer – Fahid Mahmood Aug 29 '13 at 08:59

Dynamically place buttons where there is a circle on background image

2 Answers2