Using Android Studio, I want to create an android phone app that presents a field of staggered circles, similar to those in this picture. The important thing is the positions of the circles relative to each other.
enter image description here
Here is a portion of code that I have used to create a field of rectangularly-arranged circles. The result is not the arrangement I need.
<HorizontalScrollView android:layout_width="match_parent" android:id="@+id/horizontalScrollView1" android:layout_height="0dp" android:isScrollContainer="true"
android:layout_weight="13">
<TableLayout android:id="@+id/tableLayout1" android:layout_width="match_parent" android:layout_height="match_parent">
<TableRow android:layout_height="match_parent" android:id="@+id/tableRow1" android:layout_width="match_parent">
<TextView android:id="@+id/Bubble0000" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0001" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0002" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0003" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0004" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0005" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0006" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0007" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0008" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0009" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0010" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0011" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
</TableRow>
<TableRow android:layout_height="match_parent" android:id="@+id/tableRow2" android:layout_width="match_parent">
<TextView android:id="@+id/Bubble0100" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0101" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0102" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0103" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0104" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0105" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0106" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0107" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0108" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0109" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0110" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
<TextView android:id="@+id/Bubble0111" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
for (int i = 0; i < nRows; i++) {
for (int j = 0; j < nCols; j++) {
bubbleIndex = Math.abs(generator.nextInt() % 5);
bubble[i][j] = new Bubble(i, j, bubbleIndex, color, Bubble.selectableYes);
bubbleImage[i][j].setBackgroundDrawable(res.getDrawable(bubbleID[bubble[i][j].getSelectedValue()][bubble[i][j].getColor()][bubble[i][j].getImageIndex()]));
bubbleImage[i][j].setClickable(true);
savedBubble[i][j] = new Bubble(i, j, blankImageIndex, color, Bubble.selectableYes);
}
}
public class Bubble {
boolean exists;
int imageIndex, color, selectedStatus;
// Image Indexes
// 0 = circle
// 1 = circleDot
// 2 = circleLine
// 3 = circleDisco
// 4 = circleSolid
int xPosition, yPosition;
boolean selectable;
static int colorNo = 0;
static int colorYes = 1;
static int selectedNo = 0;
static int selectedYes = 1;
static boolean selectableYes = true;
static boolean selectableNo = false;
Bubble(int x, int y, int index, int colorValue, boolean selectableValue)
{
imageIndex = index;
xPosition = x;
yPosition = y;
color = colorValue;
exists = true;
selectedStatus = selectedNo;
selectable = selectableValue;
}
The resulting layout - not the arrangement I need:
enter image description here
What layouts, widgets and techniques will help me achieve the effect in the first image?
Thank you.